淘汰赛和 MVC POST（JSON 和表单发布）

Question

我不知道这是否是一个真正的问题，或者我只是对如何做事的想法有误，但是你如何 post 一个 json 对象（来自淘汰赛）在一起将表单提交给 MVC 控制器？

首先，这是我的控制器：

    [HttpPost]
    public ActionResult CreateLoanApp(PeopleViewModel MyViewModel)
    {
        //Do something on MyViewModel;
        return RedirectToAction("Index");
    }
    [HttpPost]
    public JsonResult CreateLoanApp(string deductions)
    {
        //Do something on string deductions;
    }

这是我的观点：

<h2>My Form </h2>
@using (Html.BeginForm(new { @class = "submitForm" }))
{
    <label>Loan Amount</label>
    @Html.DropDownListFor(model => model.Loan.LoanAmount, Model.DropDownOfLoanAmount, new { @class = "LoanAmount", @data_bind = "value: selectedLoanAmount" })
    @Html.ValidationMessageFor(model => model.Loan.LoanAmount)

    <label>Loan Receivable</label>
    @Html.TextBoxFor(model => model.Loan.LoanReceivable, "{0:0,0.00}", new { @class = "LoanReceivable", @readonly = true, dir = "rtl", @data_bind = "value: loanReceivable" })
    @Html.ValidationMessageFor(model => model.Loan.LoanReceivable)

    <label>Interest</label>
    @Html.TextBoxFor(model => model.Loan.Interest, "{0:0,0.00}", new { @readonly = true, @class = "Interest", dir = "rtl", @data_bind = "value: interest" })

    <table class="input-group">
        <tbody data-bind="foreach: loanDeductions">
            <tr>
                <td><strong data-bind='text: deductionName'></strong></td>
                <td>
                    <input class="deductionCode form-control" data-bind='value: amount, valueUpdate: "afterkeydown"' /></td>
                <td><a href='#' data-bind='click: $parent.removeLine'>Delete</a></td>
            </tr>
        </tbody>
    </table>

    <button type="button" class="btn btn-danger" data-bind="click: save">Save Deduction</button>

    <button type="submit" class="btn btn-primary">Save changes</button>
}

如您所见，我有 2 个不同的保存按钮：
1. "Save Deduction" 按钮调用一个 ajax 函数，该函数 post 是一个名为 "deductions" 的 json 字符串到我的控制器中的一个动作。
2. 另一方面，"Save Changes" 按钮是一个提交按钮，用于将表单提交到我的控制器并传递 "MyViewModel"。

现在我要做的是将 2 个按钮合二为一，并将 2 个对象一起传递到一个控制器中。
我的意思是我想创建一个接受 2 个参数的操作，如下所示：

    [HttpPost]
    public ActionResult CreateLoanApp(PeopleViewModel MyViewModel, string deductions)
    {
        // Do something on MyViewModel
        //Do something on string deductions;
    }

这可能吗？如果可以，你能告诉我怎么做吗？
任何帮助将不胜感激。如果您需要更多详细信息，请发表评论。谢谢！

Answer 1

幸运的是，我也遇到过同样的情况。它的处理方式是更新 beforeSend 对象中的数据属性。

这是控制器操作（mainView 也是表单将绑定的内容，也是您的页面视图模型，tabView 参数将是 knockout 模型中的那个）：

[HttpPost]
public ActionResult Save(MainViewModel mainView, TabViewModel tabView)
{
//do some work here
}

和视图的Html，表示发送前setter（MainScript 是用于管理此页面客户端工作的javascript 对象的名称）：

@using(Ajax.BeginForm("Save",new AjaxOptions {HttpMethod="POST", OnBegin = "MainScript.beforeSend", OnSuccess="MainScript.onSuccess(data)"}})
{
//some html form elements
<input type="submit" value="Send" id="btnSave" />
}

@section Scripts{
//a bunch of scripts are loaded here
<script type="text/javascript">
$(document).ready(function(){
MainScript.initialize(@Html.Raw(Json.Encode(Model)));
});
</script>
}

初始化接受 ViewModel，以便我们可以将其存储在客户端中并设置淘汰赛绑定，这在这里并不重要，但如果您还没有学会如何做，那么了解一下是件好事。

最后，当用户点击提交时，MainScript.beforeSend() 函数将被调用：

beforeSend: function() {
    var tabViewModel = tabKnockoutVM.GetModel();
    this.data = this.data + "&" + convertToFormData(tabViewModel);
}

这里要注意两点：

首先，您需要创建或从您的淘汰模型中获取一个与参数中的 .Net 对象相匹配的模型。如果您的 Knockout 模型相同，则可以使用 Knockout Mapping 库。如果没有，我建议在您的 Knockout 模型上放置一个函数来为您构建对象。

其次，需要有一个函数将对象转换为.Net 可以解析的格式。这就是 'convertToFormData' 函数调用发挥作用的地方，它是这样的（请注意，这段代码是在别处找到的）：

function convertToFormData(obj,prefix)  {
    var dataArray=[];
    for (var op in obj) {
      if(op in obj) {
        var k = prefix ? 
             (isNaN(op ) ? 
                prefix + "." + op  : 
                prefix + "[" + op  + "]") :
             op;
        var v = obj[op];
        dataArray.push(typeof(v==="object"? 
              convertToFormData(v,k) :  
              encodeURIComponent(k)+"=" + encodeURIComponent(v));
      }
    }
    return dataArray.join("&");
}

淘汰赛和 MVC POST（JSON 和表单发布）

Knockout and MVC POST (JSON and Form posting)

ajax

asp.net-mvc

form-post

knockout.js