使用ajax将@Model从视图发送到控制器
Posted
技术标签:
【中文标题】使用ajax将@Model从视图发送到控制器【英文标题】：send @Model from view to controller with ajax 【发布时间】：2021-04-16 00:47:09 【问题描述】： 我有预订表格，其中一个选择选项卡中的值取决于其他选择选项卡中的值。 在一个选项卡中更改值时，调用 ajax 并将模型发送到控制器而不提交表单。 在控制器操作中，我无法获得 @Model 值。 我该怎么做才能解决它？ （代码只需在控制器中获取 @Model 的值即可操作） 感谢您的帮助！这是我的表格
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="poslovnice">Odabir poslovnice</label>
<select asp-for="PoslovnicaID" asp-items="Model.poslovnice" class="form-control ">
<option selected disabled>Odabir poslovnice</option>
</select>
<span asp-validation-for="PoslovnicaID" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="Ime">Ime</label>
<input type="text" class="form-control" asp-for="Ime">
<span asp-validation-for="Ime" class="text-danger"></span>
</div>
<div class="col-md-6 form-group">
<label asp-for="Prezime">Prezime</label>
<input type="text" class="form-control" asp-for="Prezime">
<span asp-validation-for="Prezime" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Email">Email</label>
<input type="email" class="form-control" asp-for="Email">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="brojOsoba">Broj osoba</label>
<select asp-for="brojOsobaID" asp-items="Model.brojOsoba" class="form-control">
<option selected disabled>Odabir</option>
</select>
<span asp-validation-for="brojOsobaID" class="text-danger"></span>
</div>
<div class="col-md-6 form-group">
<label asp-for="BrojTelefona">Telefon</label>
<input type="text" class="form-control" asp-for="BrojTelefona">
<span asp-validation-for="BrojTelefona" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="DatumRezervacije">Datum rezervacije</label>
<input type="date" class="form-control" asp-for="DatumRezervacije" onkeypress="return false;">
<span asp-validation-for="DatumRezervacije" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="TerminRezervacije">Termin</label>
<select asp-for="TerminRezervacijeID" asp-items="Model.TerminRezervacije" class="form-control">
<option selected disabled>Termin</option>
</select>
<span asp-validation-for="TerminRezervacijeID" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Napomena">Message</label>
<textarea class="form-control" asp-for="Napomena" cols="30" rows="7"></textarea>
<span asp-validation-for="Napomena" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Reserve Now" data-save="modal">
</div>
</div>
</form>
我的 js 代码
<script>
$("select, #DatumRezervacije").change(function ()
//window.alert("aa");
$.get("/Rezervacija/RezervacijaPartial?mod=@Model", function (data)
$("#rezervacijaPlaceholder").html(data)
)
)
和我的控制器操作
public IActionResult RezervacijaPartial(RezervacijaVM mod)
RezervacijaVM model = new RezervacijaVM();
//logic
return PartialView(model);
【问题讨论】：
您好@sasko,@Model是服务器端操作，当您在客户端进行任何更改时，它不会更改值。您需要避免使用这种方式。
嗨@Rena！感谢回复！您有什么建议我如何在不提交该表单的情况下将值从表单发送到控制器中的操作？
嗨@sasko，请在下面查看我的答案。
【参考方案1】：
这是一个完整的工作演示：
型号：
public class RezervacijaVM
public int PoslovnicaID get; set;
public int brojOsobaID get; set;
public int TerminRezervacijeID get; set;
public IEnumerable<SelectListItem> poslovnice get; set;
public IEnumerable<SelectListItem> brojOsoba get; set;
public IEnumerable<SelectListItem> TerminRezervacije get; set;
public string Ime get; set;
public string Prezime get; set;
public string Email get; set;
public string BrojTelefona get; set;
public string Napomena get; set;
public DateTime DatumRezervacije get; set;
查看：
@model RezervacijaVM
<form id="form1">
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="poslovnice">Odabir poslovnice</label>
<select asp-for="PoslovnicaID" asp-items="Model.poslovnice" class="form-control ">
<option selected disabled>Odabir poslovnice</option>
</select>
<span asp-validation-for="PoslovnicaID" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="Ime">Ime</label>
<input type="text" class="form-control" asp-for="Ime">
<span asp-validation-for="Ime" class="text-danger"></span>
</div>
<div class="col-md-6 form-group">
<label asp-for="Prezime">Prezime</label>
<input type="text" class="form-control" asp-for="Prezime">
<span asp-validation-for="Prezime" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Email">Email</label>
<input type="email" class="form-control" asp-for="Email">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="brojOsoba">Broj osoba</label>
<select asp-for="brojOsobaID" asp-items="Model.brojOsoba" class="form-control">
<option selected disabled>Odabir</option>
</select>
<span asp-validation-for="brojOsobaID" class="text-danger"></span>
</div>
<div class="col-md-6 form-group">
<label asp-for="BrojTelefona">Telefon</label>
<input type="text" class="form-control" asp-for="BrojTelefona">
<span asp-validation-for="BrojTelefona" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="DatumRezervacije">Datum rezervacije</label>
<input type="date" class="form-control" asp-for="DatumRezervacije" onkeypress="return false;">
<span asp-validation-for="DatumRezervacije" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label asp-for="TerminRezervacije">Termin</label>
<select asp-for="TerminRezervacijeID" asp-items="Model.TerminRezervacije" class="form-control">
<option selected disabled>Termin</option>
</select>
<span asp-validation-for="TerminRezervacijeID" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label asp-for="Napomena">Message</label>
<textarea class="form-control" asp-for="Napomena" cols="30" rows="7"></textarea>
<span asp-validation-for="Napomena" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Reserve Now" data-save="modal">
</div>
</div>
</form>
JS：
@section scripts
@await Html.RenderPartialAsync("_ValidationScriptsPartial");
<script>
$("select, #DatumRezervacije").change(function ()
var data = $("#form1").serialize();
console.log(data);
$.get("/Rezervacija/RezervacijaPartial?"+data, function (data)
$("#rezervacijaPlaceholder").html(data)
)
)
</script>
结果：
【讨论】：
谢谢@Rena 这正是我所需要的【参考方案2】：@Model 在从服务器请求页面时编译和评估。客户端对模型的任何更改都不会反映。
您还尝试将整个对象作为查询参数传递。在将模型传递给控制器之前，您应该展平模型。所以你会有
$.get("/Rezervacija/RezervacijaPartial?poslovnice=value&Ime=value&Prezime=value&Email=value&brojOsoba=value&BrojTelefona=value&DatumRezervacije=value&TerminRezervacije=value&Napomena=value", function(data)...
您应该使用 javascript 获取此处的值，因为这已经是客户端操作。考虑：Flatten a javascript object to pass as querystring
【讨论】：
以上是关于使用ajax将@Model从视图发送到控制器的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Ajax 以数组格式将多个图像从 MVC 视图发送到控制器？
尝试使用 ajax 调用将 urdu 字符串视图发送到控制器，但它在控制时始终为空