jQuery 如何在 AJAX 帖子上刷新我的剃刀视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13611485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I refresh my razor view on AJAX post
提问by Naresh
Helo all,
大家好，
I am able to post to controller using ajax.post, but on success how can I make my view refresh with new data.
我可以使用 ajax.post 发布到控制器，但成功后如何使用新数据刷新我的视图。
Do I need to usn @Html.BeginForm to do this?
我是否需要使用 @Html.BeginForm 来执行此操作？
This is my view.
这是我的看法。
<div>
<p>Order lines allocates to <b>@Model.Name (@Model.Code) </b>
</div>
@if (Model.OrderLineAllocations.Any())
{
@grid.GetHtml(
columns: grid.Columns(
grid.Column(header: "Dispatched", style: "row-selector", format: @<text><input name="chkSelected" class="myCheckbox" onclick="expandableEvent(this)" type="checkbox" value="@item.IdAllocation" /></text>),
grid.Column(header: "Order Ref", format: item => item.OrderLineItem.OrderLine.Order.OrderRef)
),
tableStyle: "expandable-table",
rowStyle: "expandable-master-row",
htmlAttributes: new { id = "gridLineAllocations" })
<br />
<input type="hidden" id="hidUnselectedValues" name="hidUnselectedValues" />
<input type="submit" name="action" value="Dispacth" id="btnDispacth" />
<input type="submit" name="action" value="Revert" id="btnRevert" />
}
else
{
@Html.Raw("No records found....");
}
And this is my ajax post
这是我的 ajax 帖子
$(document).ready(function () {
unSelected = [];
$("#btnDispacth").click(dipatchAllocations);
$("#btnRevert").click(revertAllocations);
});
function dipatchAllocations() {
var objInputEmail = $("#hidUnselectedValues");
if (objInputEmail != null) {
var id = objInputEmail.val();
if ((id != null) && (id != "")) {
$.ajax({
type: 'POST',
url: '/Batch/GetData',
data: '{ "allocationId" : "' + id + '","batchId" : "' + @Model.Id + '" }',
contentType: "application/json; charset=utf-8",
//contentType:"application/x-www-form-urlencoded",
traditional: true,
success: subscribed,
error: errorInSubscribing
});
}
else {
alert('Please enter a valid email address in order to subscribe.');
}
}
};
This is my controller action
这是我的控制器操作
[HttpPost]
public ActionResult GetData(long[] allocationId,long batchId)
{
var model = context.GetData(batchId)
model.Name = "asdaksdjaksdj";
return View("Finalize", model);
}
I am having some idea, I have to do that on success call back. But I am not sure how to bind my updated model to the view at client side.
我有一些想法，我必须在成功回电时这样做。但我不确定如何将我更新的模型绑定到客户端的视图。
Thanks
谢谢
回答by Dima
There is no simple "rebind" method inside mvc, it's still html, css and js at the end.
I see 2 options to achieve desired behaviour.
mvc里面没有简单的“rebind”方法，最后还是html、css和js。
我看到 2 个选项来实现所需的行为。
option 1. Override rendered content with the result of POST
选项 1. 用 POST 的结果覆盖呈现的内容
In this case your View will look similar to:
在这种情况下，您的视图将类似于：
<div id="content">
<div>
<p>Order lines allocates to <b>@Model.Name (@Model.Code) </b>
</div>
...
else
{
@Html.Raw("No records found....");
}
</div>
On javascript:
在 JavaScript 上：
$.ajax({
type: 'POST',
url: '/Batch/GetData',
dataType: "html",
success: function(data, textStatus, jqXHR){
$('#content').html(data);
}
});
option 2. Fill rendered html from javascript on every load
选项 2. 在每次加载时从 javascript 填充呈现的 html
This will require to move Razor logic to javascript. Your view will look like:
这需要将 Razor 逻辑移至 javascript。您的视图将如下所示：
<div>
<p>Order lines allocates to <b id="NameAndCode"></b>
</div>
And javascript will fill the gaps:
而 javascript 将填补空白：
$(function(){
var model = {
NameAndCode: "@Model.Name (@Model.Code)"
}
fillView(model);
})
var fillView = function(data){
$('#NameAndCode').html(data.NameAndCode)
}
$.ajax({
type: 'POST',
url: '/Batch/GetData',
dataType: "json",
success: function(data, textStatus, jqXHR){
fillView(data);
}
});
It's just a small piece just to show the idea.
这只是一小部分，只是为了展示这个想法。
It depends on case which option to choose.
这取决于选择哪个选项的情况。
