Воспользуйтесь следующими методами для отправки данных формы в метод действия:
с использованием метода serialize () для сериализации элементов управления в форме.
@model MVCSample.Models.OrderViewModel
<h4>OrderViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Showsummary" asp-controller="Home" method="post" class="signup-form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderId" class="control-label"></label>
<input asp-for="OrderId" class="form-control" />
<span asp-validation-for="OrderId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OrderName" class="control-label"></label>
<input asp-for="OrderName" class="form-control" />
<span asp-validation-for="OrderName" class="text-danger"></span>
</div>
<div id="packages">
@for (int i = 0; i < Model.Packages.Count; i++)
{
<div class="form-group">
<label asp-for="@Model.Packages[i].Pid" class="control-label"></label>
<input asp-for="@Model.Packages[i].Pid" class="form-control" />
<span asp-validation-for="@Model.Packages[i].Pid" class="text-danger"></span>
<br />
<label asp-for="@Model.Packages[i].PackageTitle" class="control-label"></label>
<input asp-for="@Model.Packages[i].PackageTitle" class="form-control" />
<span asp-validation-for="@Model.Packages[i].PackageTitle" class="text-danger"></span>
</div>
}
</div>
</form>
</div>
</div>
<div>
<input type="button" id="summary" value="Summary" />
<div id="page_3">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
$.ajax({
type: "POST",
url: "/Home/Showsummary", //remember change the controller to your owns.
data: $("form.signup-form").serialize(),
success: function (data) {
console.log(data)
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
});
});
</script>
Закодируйте метод действия:
[HttpPost]
public PartialViewResult Showsummary(OrderViewModel model)
{
try
{
//...
return PartialView("OrderSummary", model);
}
catch
{
return PartialView("OrderSummary", model);
}
}
После нажатия кнопки результат будет примерно таким:
As we can see that, we could get the element's value in the form and even the nested entity.
Note: Only " успешные элементы управления"сериализованы в строку. Значение кнопки отправки не сериализуется, поскольку форма не была отправлена с помощью кнопки. Чтобы значение элемента формы было включено в сериализованную строку, элемент должен иметь атрибут имени . Значения из флажков и переключателей (входы типа «радио» или «флажок») включаются, только если они отмечены. Данные из элементов выбора файла не сериализуются.
Создайте объект JavaScript и разместите его в методе действия.
Измените сценарий JavaScript, как показано ниже:
$(function () {
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
//create a object to store the entered value.
var OrderViewModel = {};
//using jquery to get the entered value.
OrderViewModel.OrderId = $("input[name='OrderId']").val();
OrderViewModel.OrderName = $("input[name='OrderName']").val();
var packages = [];
//var count = $("#packages>.form-group").length; //you could use it to check the package count
$("#packages>.form-group").each(function (index, item) {
var package = {}
package.Pid = $(item).find("input[name='Packages[" + index + "].Pid']").val();
package.PackageTitle = $(item).find("input[name='Packages[" + index + "].PackageTitle']").val();
packages.push(package);
});
//add the nested entity
OrderViewModel.Packages = packages;
$.ajax({
type: "POST",
url: "/Home/Showsummary", //remember change the controller to your owns.
data: OrderViewModel,
success: function (data) {
console.log(data)
$('#page_3').html(data);
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
});
});
Используя приведенный выше код, Я мог бы также получить объект отправки, вы могли бы сослаться на него.