MVC3 - 在同一页面上显示部分视图

Question

我的页面上有一个左侧导航菜单.. 使用如下所示的 url.action.. 我试图根据点击的链接引入一个紧邻的视图（菜单的右侧）.. 我放了在导航菜单旁边的 div 中.. 但不知道如何在该 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>

在控制器中，ActionName1 代码我有这个...

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

当我运行它时，partialview1 会在新页面中打开。如何在与导航菜单相同的页面中打开此局部视图，紧邻菜单右侧..所以根据单击的链接，导航菜单旁边会显示 partialview1 或 partialview2 ...谢谢您帮助。

Answer 1

在这种情况下你必须使用 ajax。您可以在锚标签中添加一些类，例如

<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>

然后您可以使用 jquery 连接这些链接的点击事件并发送 ajax 调用，例如

    $('.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;
    });