Question

我有一个我向最终用户显示的政策列表。每个策略条目都有一个复选框，指示他们是否要选择该策略。他们可以选择多种政策。一旦他们点击Next按钮，我希望能够通过AJAX调用将策略发送回我的控制器（带有更新的复选框值）。我看到很多发送数据的例子，只有一个项目，但我不能让它为多个工作。我觉得这很容易，但我很挣扎，我希望有人可以提供帮助。这是我到目前为止所拥有的。

视图模型：

public class PolicySelection
{
    public bool Selected { get; set; }
    public string PolicyType { get; set; }
    public string PolicyNumber { get; set; }
    public string Mod { get; set; }
    public string CompanyName { get; set; }
}

public class PolicySelectionViewModel
{
    public List<PolicySelection> Policies { get; set; }
}

查看：

@model Models.PolicySelectionViewModel

@using (Html.BeginForm())
{
    <div>
        @{ string policyType = "";}
        @for (int i = 0; i < Model.Policies.Count; i++)
        {       
            if (Model.Policies[i].PolicyType != policyType)
            {
                <h3>@Model.Policies[i].PolicyType</h3>
                policyType = Model.Policies[i].PolicyType;
            }

            <div class="col-lg-1" style="width:5%;">
                @Html.CheckBoxFor(m => m.Policies[i].Selected)
            </div>

            <div class="col-lg-3 padding-0">
                @Html.DisplayFor(m => m.Policies[i].PolicyNumber)<text>-</text>@Html.DisplayFor(m => m.Policies[i].Mod)
            </div>

            <div>
                @Html.DisplayFor(m => m.Policies[i].CompanyName)
            </div>
        }
    </div>

    <button class="btn btn-default btn-primary" style="position:absolute; left:300px; bottom:7px; width: 200px;" onclick="Next()" type="button">Next</button>
</div>
}

<script type="text/javascript">
    function GetModelData()
    {
        return $("form").serializeArray();
    }

    function Next()
    {
        var url = '@Url.Action("VerifyPolicies", "Home")';
        var model = GetModelData();
        $.ajax({
            url: url,
            data: { PolicyList: model},
            type: "POST",
            success: function (data, textStatus, XMLHttpRequest) {
                alert(data);
            }
        });
    }
</script>

控制器：

[HttpPost]
public string VerifyPolicies(PolicySelectionViewModel PolicyList)
{
    string selectedPolicyNumbers = string.Empty;

    foreach(var policy in PolicyList.Policies)
    {
        if(policy.Selected)
        {
            selectedPolicyNumbers += policy.PolicyNumber + ',';
        }
    }
    return selectedPolicyNumber;
}

我使用3个策略运行它并检查其中2个的复选框。当我在我的控制器中断时，PolicyList对象有5个策略，并且每个策略的字段都为空，除了Selected，它总是为false。这次我再次尝试检查3个策略中的一个，现在PolicyList对象有4个对象。在此先感谢您的帮助。

Answer 1

感谢Stephen Muecke，我能够让它运转起来。我不得不从Ajax调用中的data选项中删除大括号{}和属性名（PolicyList），为我想要传回的其他属性添加隐藏字段，并使用.serialize（）而不是.serializeArray（）。这是我的工作视图的样子：

查看：

@model Models.PolicySelectionViewModel @using (Html.BeginForm()) { <div> @{ string policyType = "";} @for (int i = 0; i < Model.Policies.Count; i++) { @Html.HiddenFor(m => m.Policies[i].PolicyNumber); @Html.HiddenFor(m => m.Policies[i].Mod); @Html.HiddenFor(m => m.Policies[i].PolicyType); if (Model.Policies[i].PolicyType != policyType) { <h3>@Model.Policies[i].PolicyType</h3> policyType = Model.Policies[i].PolicyType; } <div class="col-lg-1" style="width:5%;"> @Html.CheckBoxFor(m => m.Policies[i].Selected) </div> <div class="col-lg-3 padding-0"> @Html.DisplayFor(m => m.Policies[i].PolicyNumber)<text>-</text>@Html.DisplayFor(m => m.Policies[i].Mod) </div> <div> @Html.DisplayFor(m => m.Policies[i].CompanyName) </div> } </div> <button class="btn btn-default btn-primary" style="position:absolute; left:300px; bottom:7px; width: 200px;" onclick="Next()" type="button">Next</button> </div> } <script type="text/javascript"> function GetModelData() { return $("form").serialize(); } function Next() { var url = '@Url.Action("VerifyPolicies", "Home")'; var model = GetModelData(); $.ajax({ url: url, data: model, type: "POST", success: function (data, textStatus, XMLHttpRequest) { alert(data); } }); } </script>

我的Controller和ViewModel保持不变。再次感谢Stephen对此的帮助。

通过AJAX将多个选定项目发送到Controller

1 个答案: