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

时间:2011-07-15 04:10:36

标签: asp.net asp.net-mvc asp.net-mvc-3

我的页面上有一个左侧导航菜单..使用下面的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 ...感谢您的帮助

1 个答案:

答案 0 :(得分:6)

在这种情况下你必须使用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连接这些链接的click事件并发送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;
    });