值不会使用 Ajax 调用传递给控制器​​方法

Question

我正在使用MVC 4 并希望使用Ajax Call 向controller 方法发送一个表单和一些其他值，但在努力尝试之后我无法做到这一点。请查看下面的代码并指导我我的代码中的一些增强功能。

我的脚本代码：

 $(document).ready(function () {

           var ids = [];
        $("#btnproceed").click(function () {
            debugger;
            //   $("div[class^='apple-']")

            $("div[class^='dvDynamic_']").each(function () {
                debugger;


                var pids = $(this).text();

                ids.push(pids);

            });

            ids = [];
 });

序列化和发送的表单代码：

          <form id="customerform">
            <div id="customerdetails">
                <label>Your Information</label><br />

                @*@for (int i = 0; i < Model.Orders.Count; i++) {*@
                @Html.TextBoxFor(m => m.Orders.Customer, new { @placeholder = "Enter Your Full Name" })
                @Html.ValidationMessageFor(m => m.Orders.Customer)
                @Html.TextBoxFor(m => m.Orders.Phone, new { @placeholder = "Enter Your Cell Number" })
                @Html.ValidationMessageFor(m => m.Orders.Phone)
                @Html.TextAreaFor(m => m.Orders.Address, new { @rows = 3, @cols = 2, @style = "width:300px;", @placeholder = "Enter Your  Complete Delivery Address" })
                @Html.ValidationMessageFor(m => m.Orders.Address)


                <input id="btnback" type="button" value="Back" /> <input id="btnsubmit" type="button" value="Submit" />  @*<input id="submit" type="submit" value="Save" />*@

            </div>
        </form>

我的最终提交按钮的代码：

       $('#btnsubmit').click(function () {

         debugger;


            var form = [{ "name": "customerinfo", "value": JSON.stringify($('#customerform')) }];
            var data = JSON.stringify({
                'products': ids,
                'customerinfo': form

            });

            $.ajax({

                type: "POST",
                url: "@Url.Action("GetIds", "Store")",
                data: data,
                contentType: "application/json; charset=utf-8",

            success: function (r) {
                alert(r.d);
            }
        });
});

以及controller中我的接收方式代码

 public JsonResult GetIds(string products, string customerinfo)
 {
 }

控制器方法中的值将变为空

Answer 1

您可以序列化您的表单并向其附加其他数据

var data = $('form').serialize() + '&' + $.param({ 'products': ids }, true);
var url = '@Url.Action("GetIds", "Store")';
$.post(url, data, function(r) { alert r.Id; });

并将您的方法更改为

public JsonResult GetIds(ProductOrderViewModel  model, string[] products)

但是，您首先脚本会初始化一个新数组 (var ids = [];)，向其中添加对象，然后将其重置为一个空数组（代码的最后一行是 ids = [];）。建议您只需使用var ids = []; ids.push('abc'); ids.push('def'); 进行初始测试即可。

Answer 2

您需要构建一个更复杂的模型来绑定表单数据。像这样的：

public JsonResult GetIds(InputModel model)
{

}

public class InputModel
{
    public string[] Products { get; set; }
    public CustomerInfoModel CustomerInfo { get; set; }
}

public class CustomerInfoModel
{
    public string Name { get; set; }
    public string Value { get; set; }
}

您可以进行一些重构并跳过 JSON.stringify($('#customerform')) 部分，而是将模型与您的表单匹配。