如何通过ajax将视图模型发送到控制器，其中包括表单数据，但不通过单击提交按钮

Question

我正在开发一个为产品报价的ASP.NET Core 2.1 Web应用程序。我正试图通过ajax将视图模型发送到控制器，它将返回一个带有计算的报价总额的视图模型，并将其显示在部分视图中。

我可以将模型发送到控制器，但模型只包含加载到视图中的默认值，而不包含任何表单输入值。我觉得我错过了一些非常简单的东西。我尝试了很多选项，包括序列化表单，它将值输入控制器，但忽略了模型的其余部分。

当函数被调用时(这就是我想要的(，下面的代码将模型发送到控制器，但不包括输入到表单中的值。有没有实现这一点的方法，或者整个事情需要返工？

帮帮我堆栈溢出，你是我唯一的希望。

控制器

[HttpPost]
public ActionResult CalculateItemQuote(string jsonString)
{
BifoldItemViewModel bifoldItemViewModel = JsonConvert.DeserializeObject<BifoldItemViewModel>(jsonString);
// Do calculations and return view model to partial view.
return PartialView("~/Views/Shared/_BifoldItemHeader.cshtml", bifoldItemViewModel);
}

---

脚本

函数RefreshHeaderValue((｛

var serModel =  '@Html.Raw(Json.Serialize(@Model))';
console.log(serModel);
$.ajax({
url: '@Url.Action("CalculateItemQuote", "Quote")',
type: 'POST',
data: { jsonString: serModel },
dataType: 'json',
traditional: true,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (data) {
$("#bifoldHeaderPartial").html(data);
$('#bifoldHeaderPartial').show();
}
});
};

---

查看

<div class="form-group col-md-6">
<label asp-for="thisBifoldItem.Width"></label>
<input asp-for="thisBifoldItem.Width" class="form-control" autocomplete="nay" />
<span asp-validation-for="thisBifoldItem.Width" class="text-danger"></span>
</div>
<div class="form-group col-md-6">
<label asp-for="thisBifoldItem.Height"></label>
<input asp-for="thisBifoldItem.Height" class="form-control" autocomplete="nay" />
<span asp-validation-for="thisBifoldItem.Height" class="text-danger"></span>
</div>

<div class="form-group col-md-4">
<label asp-for="DoorQuantityOptions" class="control-label">How Many Doors?</label>
<select asp-for="SelectedDoorQuantity" id="DoorQuantityOptions" class="form-control" asp-items="@Model.DoorQuantityOptions">
<option value="" selected disabled>-- Select --</option>
</select>
</div>

==========更新的解决方案======

感谢kbaccuche把我推向了正确的方向。以下内容现在适用于

控制器

---

[HttpPost]public ActionResult CalculateItemQuote(BifoldItemViewModel BifoldItemViewModel(｛

//Do stuff here
return PartialView("~/Views/Shared/_BifoldItemHeader.cshtml", bifoldItemViewModel);
}

---

编写

---

函数RefreshHeaderValue((｛

$.ajax({
url: '@Url.Action("CalculateItemQuote", "Quote")',
type: 'POST',
data: $("#myForm").serialize(),
dataType: 'json',
traditional: true,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (data) {
$("#bifoldHeaderPartial").html(data);
$('#bifoldHeaderPartial').show();
}
});
};

---

Answer 1

我尝试使用您的代码创建一个示例应用程序，并使用标准MVC模型绑定使其工作。这是代码

控制器

public class QuoteController : Controller
{
// POST: Quote/Create
[HttpPost]
public ActionResult CalculateItemQuote(ProductForm model)
{
var bifoldItemViewModel = new BifoldItemViewModel();
return PartialView("~/Views/Shared/_BifoldItemHeader.cshtml", bifoldItemViewModel);
}
}
public class ProductForm
{
public string ProductId { get; set; }
public string Quantity { get; set; }
}
public class BifoldItemViewModel
{
}

HTML+Javascript

@{
ViewData["Title"] = "Home Page";
}
<form>
<input id="ProductId" name="ProductId" type="text" />
<input id="Quantity" name="Quantity" type="text" />
<a id="submitForm" class="btn">Submit</a>
</form>
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div id="bifoldHeaderPartial">
</div>
@section Scripts{
<script type="text/javascript">
$('a#submitForm').click(function () {
$.ajax({
url: '@Url.Action("CalculateItemQuote", "Quote")',
type: 'POST',
data: {
'ProductId': $('#ProductId').val(),
'Quantity': $('#Quantity').val()
},
dataType: 'json',
traditional: true,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (data) {
$("#bifoldHeaderPartial").html(data);
$('#bifoldHeaderPartial').show();
}
});
});
</script>
}