jquery ajax调用后,MVC视图没有正确更新
MVC view does not update properly after jquery ajax call
我有一个容器,我通过ajax调用填充该容器,该调用返回列表的PartialView。我有两个调用:CreateSplitInput和RemoveSplit。
对控制器的调用似乎有效,并且传递给局部视图的模型是正确的,具有正确的子列表。在调试期间,视图似乎会返回正确的html。
添加新输入我没有问题。。。删除输入项只会"弹出"列表的最后一项。
更新:MVC将首先检查ModelState,然后检查Model。我需要在RemoveSplit控制器方法中添加ModelState.Clear()。
归功于awrigley MVC 3+$.ajax-响应似乎缓存了部分视图的输出
TIA!!!
型号:
public class Split
{
public int SplitID { get; set; }
public int ClientProfileID { get; set; }
public int CoveredPersonID { get; set; }
public DateTime StartDate { get; set; }
public DateTime? EndDate { get; set; }
public virtual List<SplitPercent> Percentages { get; set; }
}
public class SplitPercent
{
public int SplitPercentID { get; set; }
public int SplitID { get; set; }
public string PremiumKeyField { get; set; }
public decimal Percentage { get; set; }
}
控制器:
public ActionResult CreateSplitInput(Split model)
{
if (model.Percentages == null)
model.Percentages = new System.Collections.Generic.List<SplitPercent>();
model.Percentages.Add(new SplitPercent());
return PartialView("~/views/clients/_SplitPercentages.cshtml", model);
}
public ActionResult RemoveSplit(Split model, int index)
{
ModelState.Clear(); // <== HERE IS THE ANSWER!!!!!
if (model.Percentages != null && model.Percentages.Count >= (index + 1))
{
model.Percentages.RemoveAt(index);
}
return PartialView("~/views/clients/_SplitPercentages.cshtml", model);
}
Javascrpt:
function addSplit() {
if (true) { // testing purposes
$.ajax({
url: '/clients/CreateSplitInput',
data: $("#frm").serialize(),
cache: false,
success: function(resp) {
setSplitContainer(resp);
},
error: function(err, status) {
alert(status);
}
});
}
}
function removeSplit(indx) {
if (true) { // testing purposes
$.ajax({
url: '/clients/RemoveSplit/?index=' + indx,
data: $("#frm").serialize(),
cache: false,
type: 'GET',
success: function(resp) {
//debugger;
setSplitContainer(resp); //<-- the resp html just has the last item popped off
},
error: function(err, status) {
alert(status);
}
})
}
}
function setSplitContainer(h) {
$("#splitPercents").html(h);
$("select").chosen(chosenOpts);
}
_SplitPercentages.cshtml PartialView:调试它将显示正确的Percentages集合。。。似乎正确绑定。
@model BillingWeb.Models.Split
@if (Model != null && Model.Percentages != null)
{
var logic = new ClientLogic();
var premiumKeys = logic.GetAllPremiumKeyFields(Model.ClientProfileID);
string test = "";
int index = 0;
foreach (var percent in Model.Percentages)
{
test += ", " + percent.PremiumKeyField; // <- collect the model data to show at the end
var selectList = new SelectList(premiumKeys, percent.PremiumKeyField); // Trying anything now...
<div class="form-group">
@Html.Hidden("Percentages.Index", index)
@Html.Hidden(string.Format("Percentages[{0}].SplitID", index), percent.SplitID)
<div class="col-md-5 col-lg-5">
@Html.DropDownListFor(m => m.Percentages[index].PremiumKeyField, selectList, new { @class = "form-control" })
</div>
<div class="col-md-4 col-lg-4">
<div class="input-group">
<span class="input-group-addon">%</span>
@Html.TextBoxFor(m => m.Percentages[index].Percentage, new { @class = "form-control text-right", placeholder = "Split %" })
<button type="button" class="btn btn-danger input-group-addon" onclick="removeSplit(@index)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
index++;
}
<p>@test</p> <!-- WTH?! this works? -->
}
主视图:
@model BillingWeb.Models.Split
<div class="form-group">
<label class="control-label col-md-2">Percentages</label>
<div class="col-md-8">
<div id="splitPercents">
@Html.Partial("~/Views/Clients/_SplitPercentages.cshtml", Model)
</div>
<button type="button" class="btn btn-primary" onclick="addSplit()">Add Split</button>
</div>
</div>
经过更多的挖掘,我发现MVC会先检查ModelState,然后再检查Model。
来源:awrigley对MVC 3+$.ajax-响应似乎是缓存部分视图的输出
相关文章:
- 在控制器之间切换,可以't更新视图
- 拖动&删除Fullcalendar.io资源-更新视图
- 由控制器调用的服务更改时,Angular未更新视图
- 如何在Knockout.js中选中复选框时更新视图模型及其依赖项
- 当视图在AngularJS中返回时,我如何获得异步服务调用来更新视图
- 角度:当输入更改时更新视图 + .this/$scope
- 数据库中的数据更改时更新视图
- ng单击需要两次才能更新视图
- 范围变量更新,但不更新视图
- 在jquery中更新视图模型
- 在Meteor.js中通过同一路线内的锚点标签更新视图
- 更新视图和控制器之间的角度重复数据值的最佳方式是什么
- AngularJS 服务不会更新视图
- AngularJS 模式单例在服务中未更新视图
- 角度 JS 脚本未更新视图
- AngularJS 在$rootScope更改时更新视图
- 如果外部应用程序更改了持久模型(服务器数据库),AngularJS 是否可以自动更新视图
- AngularJS$scope更改不更新视图
- 如何在不使用映射的情况下更新视图模型
- 用于引导程序选择的挖空自定义绑定,不更新视图模型“选定类别/选定类别”