Передача формы с помощью AJAX в ASP.NET Core
Подскажите как передать данные формы через ajax. Мне нужно передать форму из представления в это же представление без перезагрузки страницы. Во view вводятся параметры и передаются в контроллер для рассчета и мне нужно в этом же view вывести ответ, для этого я использовал PartialView, но в него не передаются параметры. Если я правильно понял для этого подойдет ajax запрос. Я попытался сделать, но пока ничего не выходит. Можете подсказать, что я делаю не так.
Controller:
public class CalculationController: Controller
{
private readonly ICalculationParameters calculationParameters;
public CalculationController(ICalculationParameters calculationParameters)
{
this.calculationParameters = calculationParameters;
}
public IActionResult CalculationParameters()
{
return View();
}
[HttpPost]
public ActionResult CalculationParameters(Parameters pam)
{
return View(pam);
}
public ActionResult CalculationSize(Parameters pam)
{
CalculationOfParameters calPam = new CalculationOfParameters(pam);
return PartialView("_CalculationSize", calPam.parameters);
}
}
View (здесь возможно нужно подругому передать объект по нажатию кнопки <input class="btn btn-success" type="submit" value="Рассчитать" onclick="return Calculation(@Model);" />:
@model Parameters
<div class="content">
<table cellpadding="0" cellspacing="0" width="100%">
<div class="block_content">
<form action="CalculationParameters" method="POST">
<table align="center" class="content_fields" border-spacing: 7px 11px;>
<tbody>
<tr>
<td>
<h3>Параметры</h3>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Напряжение питания инвертора</label>
<div class="col-12">
<input asp-for="En" class="form-control" />
<span asp-validation-for="En" class="text-danger"></span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label>Внешняя нагрузка</label>
<div class="col-12">
<input asp-for="Cn" class="form-control" />
<span asp-validation-for="Cn" class="text-danger"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Высокий уровень входного напряжения</label>
<div class="col-12">
<input asp-for="Uvh1" class="form-control" />
<span asp-validation-for="Uvh1" class="text-danger"></span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label>Толщина диэлектрика</label>
<div class="col-12">
<input asp-for="hd" class="form-control" />
<span asp-validation-for="hd" class="text-danger"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Низкий уровень входного напряжения</label>
<div class="col-12">
<input asp-for="Uvh0" class="form-control" />
<span asp-validation-for="Uvh0" class="text-danger"></span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label>Время включения</label>
<div class="col-12">
<input asp-for="t" class="form-control" />
<span asp-validation-for="t" class="text-danger"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Высокий уровень выходного напряжения</label>
<div class="col-12">
<input asp-for="Uvyh1" class="form-control" />
<span asp-validation-for="Uvyh1" class="text-danger"></span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label>Диэлектрическая проницаемость диэлектрика</label>
<div class="col-12">
<input asp-for="Ed" class="form-control" />
<span asp-validation-for="Ed" class="text-danger"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Низкий уровень выходного напряжения</label>
<div class="col-12">
<input asp-for="Uvyh0" class="form-control" />
<span asp-validation-for="Uvyh0" class="text-danger"></span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label>Подвижность электронов</label>
<div class="col-12">
<input asp-for="u" class="form-control" />
<span asp-validation-for="u" class="text-danger"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label>Пороговое напряжение</label>
<div class="col-12">
<input asp-for="U0" class="form-control" />
<span asp-validation-for="U0" class="text-danger"></span>
</div>
</div>
</td>
<td>
<input class="btn btn-success" type="submit" value="Рассчитать" onclick="return Calculation(@Model);" />
</td>
</tr>
</tbody>
</table>
<table align="center" class="content_fields" border-spacing: 7px 11px;>
<tbody>
<div id="calculation"></div>
</tbody>
</table>
</form>
</div>
</table>
</div>
Alax запрос:
function Calculation(parameters) {
$.get("/Calculation/CalculationSize", parameters);
}