Question

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

我的剧本代码：

 $(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'))部分，然后将模型与表单匹配。

不使用Ajax Call的控制器方法的值

2 个答案: