jquery - 使用 Ajax 调用时值不会传递到 Controller 方法

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)
 {
 }

Controller 方法中的值变为空

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'); 进行初始测试。