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.

Answer 1

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;
    });