在jquery ajax调用之后,MVC视图无法正确更新

时间:2014-09-08 17:03:18

标签: c# javascript jquery ajax asp.net-mvc

我有一个容器,我从ajax调用填充,返回列表的PartialView。我有2个调用:CreateSplitInput和RemoveSplit。

对控制器的调用似乎有效,并且使用正确的子列表传递给局部视图的模型是正确的。在调试期间,看起来视图将返回正确的html。

添加新输入我没有问题...只删除输入项"弹出"列表的最后一项。


更新:MVC将首先检查ModelState,然后检查模型。我需要在我的RemoveSplit控制器方法中添加ModelState.Clear()。

归功于awrigley MVC 3 + $.ajax - response seems to be caching output from partial view


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>

1 个答案:

答案 0 :(得分:0)

经过多次挖掘,我发现MVC将首先检查ModelState,然后检查模型。

信用:awrigley's response to MVC 3 + $.ajax - response seems to be caching output from partial view