[英]MVC display partial view on navigation bar click
当我单击导航栏时,我想显示局部视图。 我有一个包含左侧菜单的视图。 当用户单击导航栏项目时,应显示适当的视图。
我不知道如何实现这种观点?
Manage.cshtml
<div class="row">
<div class="col-xs-12">
<div class="page-header">
<h1>My Account</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked nav-stacked-extended">
<li class="active">
<a id="A3" target="_self" runat="server" href="@Url.Action("Contactinfo", "Account")">Contact Info</a>
</li>
<li class="">
<a id="A4" target="_self" runat="server" href="@Url.Action("changePassword", "Account")">Password</a>
</li>
</ul>
</div>
<div class="col-xs-9 ng-scope" data-ng-view="">
<div class="row row-gap-medium ng-scope">
@Html.Partial("Contactinfo")
</div>
</div>
</div>
在上面的代码中,当我第一Manage.cshtml
显示Contactinfo
视图时,在Manage.cshtml
加载时,我创建了左侧菜单,即contactinfo,changepassword等。 当用户单击密码菜单时, contactinfo
的内容将通过更改的changedpassword
页面进行更改。 请检查以下屏幕截图。
在上图的此处,您可以看到左侧菜单和相应的页面。 用户单击密码后,我想要什么,查看已更改为password page
。 当前它显示联系信息页面。 我怎样才能做到这一点?
根据您的需求,只需对左侧栏中存在的链接进行局部查看,当用户单击左侧栏中的特定选项时,只需使用jquery从ajax调用中加载适当的局部视图,然后将右侧栏中的html替换为来自ajax调用的html。
给您的左侧菜单唯一的ID,然后:
演示:
$(document).ready(function(){
$("#menu1").click(function(e){
e.preventDefault();
$.ajax({
url: "/MyController/getdata",
type: 'GET',
datatype: 'html',
data: { },
success: function (data) {
$("#div1").html('');
$("#div1").html(data);
});
});
});
控制器(MyController):
[HttpGet]
Public ActionResult getdata(string dropval)
{
//bind model here
return PartialView("mypartialview",model)
}
我认为您应该通过JavaScript进行部分渲染。
假设您有<div id="partialView"></div>
然后,当用户单击链接时,应该运行Ajax查询。
就像是:
$.ajax({
url: $(this).data('yourUrl'),
type: 'GET',
cache: false,
success: function(result) {
$('#partialView').html(result);
}
});
花了我一点时间来解决这个问题。
本质上,您希望Controller动作返回部分视图,然后使用Ajax加载返回的部分视图。
JavaScript / Ajax
$.ajax({
url: '@Url.Action("Action", "Controller")',
type: 'POST',
data: { 'viewName': 'password' },
success: function (data) {
$('#partial-container').html(data);
}
});
控制器返回类型
Public ActionResult GetView(string viewName)
{
return PartialView(viewName, model);
}
理想情况下,更改HTML,以便更轻松地引用要在其中加载部分代码的div容器
<div class="col-xs-9 ng-scope" data-ng-view="">
<div class="row row-gap-medium ng-scope">
<div id="partial-container">@Html.Partial("Contactinfo")</div>
</div>
</div>
尝试This JS for Clickevent
$(document).on('click', '#anCalcBtn', function () {
$('#anCalcDetail').load('/Home/Contactinfo/');
});
如果我没有看错你正在尝试做的像这
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.