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