我不知道这是否是一个真正的问题,或者我对如何做事情的想法是错误的,但是如何将 json 对象(来自 knockout )与表单一起提交到 MVC Controller ?
首先,这是我的 Controller :
[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.“保存扣除”按钮调用一个 ajax 函数,该函数将名为“扣除”的 json 字符串发送到我的 Controller 中的操作。
2. 另一方面,“保存更改”按钮是一个提交按钮,它将表单提交到我的 Controller 并传递“MyViewModel”。
现在我想做的是将 2 个按钮合并为一个,并将这 2 个对象一起传递到一个 Controller 中。
我的意思是我想创建一个接受 2 个参数的操作,如下所示:
[HttpPost]
public ActionResult CreateLoanApp(PeopleViewModel MyViewModel, string deductions)
{
// Do something on MyViewModel
//Do something on string deductions;
}
这可能吗?如果可能的话,您可以告诉我这是如何完成的吗?
任何帮助将不胜感激。如果您需要更多详细信息,请发表评论。谢谢!
最佳答案
幸运的是,我也遇到过同样的情况。处理方法是更新 beforeSend 对象中的 data 属性。
这是 Controller 操作(mainView 也是表单将绑定(bind)的内容,也是您的页面 View 模型,tabView 参数将是来自 knockout 模型的参数):
[HttpPost]
public ActionResult Save(MainViewModel mainView, TabViewModel tabView)
{
//do some work here
}
以及 View 的 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,以便我们可以将其存储在客户端并设置 knockout 绑定(bind),这在这里并不重要,但如果您还没有学会如何执行此操作,那么了解一下是一件好事。
最后,当用户点击提交时,MainScript.beforeSend()函数将被调用:
beforeSend: function() {
var tabViewModel = tabKnockoutVM.GetModel();
this.data = this.data + "&" + convertToFormData(tabViewModel);
}
这里需要注意两件事:
首先,您需要从 knockout 模型中创建或获取与参数中的 .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("&");
}
关于ajax - Knockout 和 MVC POST(JSON 和表单发布),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29933186/