MVC3 - Display partialview on same page

Question

I have a left side navigation menu on my page.. using url.action like below.. I am trying to bring in a view immediately adjacent(right side of the menu) based on what link is clicked.. I put in a div next to the navigation menu.. but have no idea how to display the appropriate contents in that div...

<table>

<tr><td><a href='@Url.Action("ActionName1", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image1.png")'/></a></td></tr>

<tr><td><a href='@Url.Action("ActionName2", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image2.png")'/></a></td></tr> 


</table>
<div id="DISPLAYVIEWHERE">DISPLAY VIEW HERE based on link that is clicked</div>

In controller, ActionName1 code I have this...

 public ActionResult ActionName1()
    {
        var model = new ViewModel();
        return PartialView("PartialView1", model);       
    }

When I run this, the partialview1 is opened in a new page. How can I get this partial view opened in the same page as the navigation menu, immediately to the right of the menu..so based on what link is clicked, partialview1 or partialview2 is displayed next to the navigation menu... thanks for your help.

You need to use the ajax to show the data in the same page.You can use MVC ajax or Jquery ajax to do this. — Mangesh
– Mangesh, Commented Jul 15, 2011 at 5:41

Muhammad Adeel Zahid · Accepted Answer · 2011-07-15 04:24:08Z

you have to use ajax in that case. you can add some class to your anchor tags like

<a class='handle' href='@Url.Action("ActionName1", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image1.png")'/></a>
<a class='handle' href='@Url.Action("ActionName2", "ControllerName")'>
<img src='@Url.Content("~/Content/themes/base/images/image2.png")'/></a>

and then you can hook up the click event of these links using jquery and send an ajax call like

    $('.handle').live('click', function(){
        $.ajax({
            url:this.href,
            type='post',
            success:function(data)
            {
               //data contains the result returned by server you can put it in div here
               $('#DISPLAYVIEWHERE').html(data);
            }
            });
//here you have to return false to prevent anchor from taking you to other page
return false;
    });

Collectives™ on Stack Overflow

MVC3 - Display partialview on same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related