我正在使用ASP.NET MVC 4
和jQuery
。我的视图上有一个按钮控件。单击它时,它会将部分视图“注入”到我的视图中。当我刷新页面时,局部视图就消失了。
我的HTML标记:
<button id="RetrieveButton" type="button">Retrieve</button>
<div id="RuleDetails">
<div class="main-content">
<p>Some text.</p>
</div>
</div>
我的jQuery使用AJAX调用返回部分视图以返回HTML:
$('#RetrieveButton').click(function () {
$.ajax(
{
type: 'POST',
url: '@Url.Action("GetRuleDetails")',
data: {
systemCode: $('#SystemCodes').val()
},
dataType: "html",
success: function (result) {
alert('success');
var domElement = $(result);
$("#RuleDetails").html(domElement);
},
error: function (result) {
alert('error');
}
});
});
我的行动方法:
public ActionResult GetRuleDetails()
{
RuleViewModel viewModel = new RuleViewModel();
return PartialView("_RuleInformation", viewModel);
}
我的部分观点:
@model MyProject.ViewModels.Rules.RuleViewModel
<div class="main-content">
<h2>Rule Details</h2>
</div>
如果我要刷新页面,我需要这个“注入”的局部视图留在那里。目前,如果我要更新它,它会“重置”,并且注入的部分消失了。
答案 0 :(得分:2)
它不会再次呈现该局部视图,因为它不会记住单击按钮的状态。
实现所需目标的方法之一是使用sammy.js
点击按钮,您可以使用sammy.js
设置hashurl(例如:'#/partialview'
),页面刷新hashurl部分保持不变(但不会转到服务器)。然后你可以相应地操纵客户端代码
如下所示初始化sammy
var app = $.sammy('body', function (context){
this.get('#/PartialView1', function () {
fnLoadPartialView();
});
});
将检索更改为使用href ='PartialView1'
function fnLoadPartialView (){
$.ajax(
{
type: 'POST',
url: '@Url.Action("GetRuleDetails")',
data: {
systemCode: $('#SystemCodes').val()
},
dataType: "html",
success: function (result) {
alert('success');
var domElement = $(result);
$("#RuleDetails").html(domElement);
},
error: function (result) {
alert('error');
}
});
}
5
$('#RetrieveButton').click(function () {
fnLoadPartialView ();
});