Question

我正在开发MVC应用程序。

我想使用ajax函数提交表单，而不是使用标准的提交按钮单击事件。

我想传递模型的对象和字符串数组（与模型的对象无关。）

我在“创建视图”中有以下代码

@using (Html.BeginForm("Create", "AdviceCreate", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate", onsubmit = "disableSubmitButton()" }))

{ }

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

            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            var obj = '@Html.Raw(Json.Encode(Model))';



            $.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
                JSON.stringify({ 
                    AdviceCreateVM : obj,
                    InvoiceDetails : invoiceDetailsArray,
                    LedgerDetails  : ledgerDetailsArray

                }),              
                success: function () {

                }
            });
        });

以及控制器中的代码

public ActionResult Create(AdviceCreateVM AdviceCreateVM, string[] InvoiceDetails, string[] LedgerDetails)
 {
}

但在控制器中，AdviceCreateVM为NULL ...

缺少什么？

Answer 1

通常我会这样做：

var postData = $("#form1").serializeArray();

$.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data: postData

                success: function () {

                }
            });

Answer 2

如果我了解您，您希望在按钮上单击手动提交表单，并希望提供额外数据。

编辑：纠正了一些错误。这里有工作Example in .Net Fiddle在小提琴中检查console.log输出。删除了content-Type，因为我们正在自定义它，jquery ajax会自动检测它。

$('#create').click(function (e) {

            e.preventDefault(); 
            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            //If you have validation attached, then you need to validate the form first and before submit if form is valid. 

            var obj =$("#frmCreate").serializeArray(); //serializeArray gives you a name,value object
            //Append extra data to above name/value collection,   
            obj.push({name: 'InvoiceDetails', value: invoiceDetailsArray});
            obj.push({name: 'LedgerDetails', value: ledgerDetailsArray});

            $.ajax({

                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
               obj,              
                success: function () {

                }
            });
        });

Answer 3

在调用按钮单击功能之前呈现您的视图（因为您正在进行客户端调用）。所以你的代码

var obj = '@Html.Raw(Json.Encode(Model))';

为null因为Model从控制器返回null。正如你所说，你从动态文本框中获取值，然后正确的方法是在客户端获取数据（即使用jQuery或javascript）并手动创建一个javascript数组并将其传递给服务器或者你必须将表单发布到服务器后，在控制器中的服务器端捕获数据 Inshort，如果您正在考虑代码;

var obj = '@Html.Raw(Json.Encode(Model))';

将在客户端点击后获取数据，然后您就在错误的轨道上。

如何使用ajax调用提交表单值，而不使用提交按钮

3 个答案: