Knockout和MVC POST(JSON和表单发布)

Question

我不知道这是一个真正的问题，还是我对如何做事的想法有误，但你如何将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>
}

如您所见，我有两个不同的保存按钮：
1."保存扣除"按钮调用一个ajax函数，该函数将一个名为"扣除"的json字符串发布到我的控制器中的一个操作中
2。另一方面，"保存更改"按钮是一个提交按钮，它将表单提交给我的控制器并传递"MyViewModel">

现在，我要做的是将这两个按钮组合为一个按钮，并将两个对象一起传递到一个控制器中
我的意思是，我想创建一个接受以下两个参数的操作：

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

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

Answer 1

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

以下是控制器操作(mainView也是表单将绑定的内容，也是您的页面视图模型，tabView参数将是淘汰模型中的参数)：

[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>
}

initialize接收ViewModel，这样我们就可以将其存储在客户端中并设置淘汰绑定，这在这里并不重要，但如果您还没有学会如何做到这一点，那就很好了。

最后，当用户点击submit时，MainScript.bforeEnd()函数将被调用：

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

这里需要注意两件事：

首先，您需要从淘汰模型中创建或获取一个与参数中的.Net对象匹配的模型。如果Knockout模型相同，则可以使用Knockout映射库。如果没有，我建议在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("&");
}