ASP.NET 核心 MVC 在提交表单后更新部分视图
ASP.NET Core MVC update partial view after submitig a form
这是在 ASP.NET 核心 MVC 2.1 中。
我拥有的是 上的主索引页面 我加载了所有局部视图。
<button type="button" id="CreateButton" class="btn btn-success" style="margin-top: 20px;">Nova osoba</button>
<button type="button" id="LoadDataButton" class="btn btn-info" style="margin-top: 20px;">Ucitati podatke</button>
<div id="CreateEditView">
</div>
<div id="TablePeopleView">
</div>
我将数据加载到“TablePeopleView”的方式是这样的。
function AjaxCall(url) {
$("#TablePeople").replaceWith(
$.ajax({
url: url,
method: "POST",
success: function (html) {
$("#TablePeopleView").html(html);
}
}));
}
$(document).ready(function () {
AjaxCall("@Url.Action("IndexAjax")");
});
这会从控制器调用 IndexAjax 方法并在“TablePeopleView”中创建此部分视图
@model List<Person>
<table style="margin-top: 20px;" class="table table-condensed" id="TablePeople">
<thead>
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
<th>Grad</th>
<th>Postanski broj</th>
<th>Broj mobitela</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.FirstName</td>
<td>@item.LastName</td>
<td>@item.CityName</td>
<td>@item.PostalCode</td>
<td>@item.MobileNumber</td>
<td>
<button type="button" class="btn btn-toolbar EditButton" data-url="@Url.Action("Edit","Zadatak")/@item.ID">
Uredi osobu
</button>
</td>
<td>
<button type="submit" class="btn btn-danger DeleteButton" data-url="@Url.Action("Delete","Zadatak")/@item.ID">
Obriši osobu
</button>
</td>
</tr>
}
</tbody>
</table>
它工作正常,获取数据并在 table 上显示。
当我想创建一个新人时,我单击“CreateButton”并在“CreateEditView”中获得一个新的局部视图。部分视图如下所示。
@model Person
<div class="modal fade" id="CreateOrEditModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
@if (Model == null)
{
<h4 class="modal-title">Nova osoba</h4>
}
else
{
<h4 class="modal-title">Uredi osobu</h4>
}
</div>
<div class="modal-body">
<form asp-controller="Zadatak" id="CreateOrEditModalForm">
<div class="form-group">
<label class="control-label">Ime osobe</label>
<input asp-for="FirstName" class="form-control" id="FirstName" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Prezime osobe</label>
<input asp-for="LastName" class="form-control" id="LastName" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Naziv grada</label>
<input asp-for="CityName" class="form-control" id="CityName" />
<span asp-validation-for="CityName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Poštanski broj</label>
<input asp-for="PostalCode" class="form-control" id="PostalCode" onkeypress="return isNumberKey(event)" />
<span asp-validation-for="PostalCode" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Mobilni broj</label>
<input asp-for="MobileNumber" class="form-control" id="MobileNumber" onkeypress="return isNumberKey(event)" />
<span asp-validation-for="MobileNumber" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Pospremi osobu" class="btn btn-default" id="SavePerson" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="ClosePerson" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
我在“CreateEditView”中获取局部视图的方式是这样的。
$('#CreateButton').click(function () {
var url = "@Url.Action("Create","Zadatak")";
$("#CreateEditView").load(url, function () {
$("#CreateOrEditModal").modal("show");
});
});
我从“CreateOrEditModalForm”表单中保存日期的方式就是这样。
$("#CreateEditView").on("click", "#SavePerson", function (event) {
$("#CreateOrEditModalForm").removeData('validator');
$("#CreateOrEditModalForm").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse("#CreateOrEditModalForm");
$("#CreateOrEditModalForm").validate();
if ($("#CreateOrEditModalForm").valid()) {
$("#CreateOrEditModal").modal("hide");
}
});
我必须这样做,因为它是通过局部视图加载的 未在页面加载时加载。
验证表单后,它会从控制器调用“创建”方法 如下所示。
[HttpPost]
public IActionResult Create(Person model)
{
if (ModelState.IsValid)
{
this._dbContext.People.Add(model);
this._dbContext.SaveChanges();
return NoContent();
}
return NoContent();
}
现在我想这就是我的问题所在。如果“ModelState.IsValid”有效,新人将被保存到数据库中,并且它将 return NoContent。我没有放置任何内容,因此页面不会刷新,但是如果我像在 begginig 中那样放置 return RedirectToAction(nameof(IndexAjax));
,它只会在新页面中加载 partila 视图,例如 this.
我不希望发生这种情况,我只希望 table 在停留在页面上时与新人一起刷新。
Ajax 允许网站在不刷新页面的情况下将内容加载到屏幕上。
这是一个您可以检查的工作演示:
型号:
public class Person
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CityName { get; set; }
public string PostalCode { get; set; }
public string MobileNumber { get; set; }
}
视图(Views/Zadatak/Index.cshtml
):
<button type="button" id="CreateButton" class="btn btn-success" style="margin-top: 20px;">Nova osoba</button>
<button type="button" id="LoadDataButton" class="btn btn-info" style="margin-top: 20px;">Ucitati podatke</button>
<div id="CreateEditView">
</div>
<div id="TablePeopleView">
</div>
@section Scripts
{ //be sure add _ValidationScriptsPartial....
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
function AjaxCall(url) {
//the same as yours..
}
$(document).ready(function () {
AjaxCall("@Url.Action("IndexAjax")");
});
$('#CreateButton').click(function () {
//the same as yours..
});
$("#CreateEditView").on("click", "#SavePerson", function (event) {
$("#CreateOrEditModalForm").removeData('validator');
$("#CreateOrEditModalForm").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse("#CreateOrEditModalForm");
$("#CreateOrEditModalForm").validate();
if ($("#CreateOrEditModalForm").valid()) {
$("#CreateOrEditModal").modal("hide");
//add the following code....
$("#TablePeople").replaceWith(
$.ajax({
url:"@Url.Action("Create", "Zadatak")",
method: "POST",
data: $("#CreateOrEditModalForm").serialize(),
success: function (html) {
$("#TablePeopleView").html(html);
}
}));
}
});
</script>
}
一定要修改你的CreateEditView.cshtml
:
@model Person
<div class="modal fade" id="CreateOrEditModal" role="dialog">
//...
<div class="form-group">
@*change type="submit" to type="button"*@
<input type="button" value="Pospremi osobu" class="btn btn-default" id="SavePerson" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="ClosePerson" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
控制器:
public class ZadatakController : Controller
{
private readonly YourContext _context;
public ZadatakController(YourContext context)
{
_context = context;
}
[HttpGet]
public async Task<IActionResult> Index()
{
return View();
}
[HttpPost]
public async Task<IActionResult> IndexAjax()
{
//change here....
return PartialView("_IndexTable", await _context.Person.ToListAsync());
}
public IActionResult Create()
{
return PartialView("CreateEditView");
}
[HttpPost]
public async Task<IActionResult> Create(Person person)
{
if (ModelState.IsValid)
{
_context.Add(person);
await _context.SaveChangesAsync();
//change here....
return PartialView("_IndexTable", await _context.Person.ToListAsync());
}
return View(person);
}
}
结果:
这是在 ASP.NET 核心 MVC 2.1 中。
我拥有的是 上的主索引页面 我加载了所有局部视图。
<button type="button" id="CreateButton" class="btn btn-success" style="margin-top: 20px;">Nova osoba</button>
<button type="button" id="LoadDataButton" class="btn btn-info" style="margin-top: 20px;">Ucitati podatke</button>
<div id="CreateEditView">
</div>
<div id="TablePeopleView">
</div>
我将数据加载到“TablePeopleView”的方式是这样的。
function AjaxCall(url) {
$("#TablePeople").replaceWith(
$.ajax({
url: url,
method: "POST",
success: function (html) {
$("#TablePeopleView").html(html);
}
}));
}
$(document).ready(function () {
AjaxCall("@Url.Action("IndexAjax")");
});
这会从控制器调用 IndexAjax 方法并在“TablePeopleView”中创建此部分视图
@model List<Person>
<table style="margin-top: 20px;" class="table table-condensed" id="TablePeople">
<thead>
<tr>
<th>ID</th>
<th>Ime</th>
<th>Prezime</th>
<th>Grad</th>
<th>Postanski broj</th>
<th>Broj mobitela</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.FirstName</td>
<td>@item.LastName</td>
<td>@item.CityName</td>
<td>@item.PostalCode</td>
<td>@item.MobileNumber</td>
<td>
<button type="button" class="btn btn-toolbar EditButton" data-url="@Url.Action("Edit","Zadatak")/@item.ID">
Uredi osobu
</button>
</td>
<td>
<button type="submit" class="btn btn-danger DeleteButton" data-url="@Url.Action("Delete","Zadatak")/@item.ID">
Obriši osobu
</button>
</td>
</tr>
}
</tbody>
</table>
它工作正常,获取数据并在 table 上显示。
当我想创建一个新人时,我单击“CreateButton”并在“CreateEditView”中获得一个新的局部视图。部分视图如下所示。
@model Person
<div class="modal fade" id="CreateOrEditModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
@if (Model == null)
{
<h4 class="modal-title">Nova osoba</h4>
}
else
{
<h4 class="modal-title">Uredi osobu</h4>
}
</div>
<div class="modal-body">
<form asp-controller="Zadatak" id="CreateOrEditModalForm">
<div class="form-group">
<label class="control-label">Ime osobe</label>
<input asp-for="FirstName" class="form-control" id="FirstName" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Prezime osobe</label>
<input asp-for="LastName" class="form-control" id="LastName" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Naziv grada</label>
<input asp-for="CityName" class="form-control" id="CityName" />
<span asp-validation-for="CityName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Poštanski broj</label>
<input asp-for="PostalCode" class="form-control" id="PostalCode" onkeypress="return isNumberKey(event)" />
<span asp-validation-for="PostalCode" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Mobilni broj</label>
<input asp-for="MobileNumber" class="form-control" id="MobileNumber" onkeypress="return isNumberKey(event)" />
<span asp-validation-for="MobileNumber" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Pospremi osobu" class="btn btn-default" id="SavePerson" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="ClosePerson" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
我在“CreateEditView”中获取局部视图的方式是这样的。
$('#CreateButton').click(function () {
var url = "@Url.Action("Create","Zadatak")";
$("#CreateEditView").load(url, function () {
$("#CreateOrEditModal").modal("show");
});
});
我从“CreateOrEditModalForm”表单中保存日期的方式就是这样。
$("#CreateEditView").on("click", "#SavePerson", function (event) {
$("#CreateOrEditModalForm").removeData('validator');
$("#CreateOrEditModalForm").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse("#CreateOrEditModalForm");
$("#CreateOrEditModalForm").validate();
if ($("#CreateOrEditModalForm").valid()) {
$("#CreateOrEditModal").modal("hide");
}
});
我必须这样做,因为它是通过局部视图加载的 未在页面加载时加载。
验证表单后,它会从控制器调用“创建”方法 如下所示。
[HttpPost]
public IActionResult Create(Person model)
{
if (ModelState.IsValid)
{
this._dbContext.People.Add(model);
this._dbContext.SaveChanges();
return NoContent();
}
return NoContent();
}
现在我想这就是我的问题所在。如果“ModelState.IsValid”有效,新人将被保存到数据库中,并且它将 return NoContent。我没有放置任何内容,因此页面不会刷新,但是如果我像在 begginig 中那样放置 return RedirectToAction(nameof(IndexAjax));
,它只会在新页面中加载 partila 视图,例如 this.
我不希望发生这种情况,我只希望 table 在停留在页面上时与新人一起刷新。
Ajax 允许网站在不刷新页面的情况下将内容加载到屏幕上。
这是一个您可以检查的工作演示:
型号:
public class Person
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CityName { get; set; }
public string PostalCode { get; set; }
public string MobileNumber { get; set; }
}
视图(Views/Zadatak/Index.cshtml
):
<button type="button" id="CreateButton" class="btn btn-success" style="margin-top: 20px;">Nova osoba</button>
<button type="button" id="LoadDataButton" class="btn btn-info" style="margin-top: 20px;">Ucitati podatke</button>
<div id="CreateEditView">
</div>
<div id="TablePeopleView">
</div>
@section Scripts
{ //be sure add _ValidationScriptsPartial....
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
function AjaxCall(url) {
//the same as yours..
}
$(document).ready(function () {
AjaxCall("@Url.Action("IndexAjax")");
});
$('#CreateButton').click(function () {
//the same as yours..
});
$("#CreateEditView").on("click", "#SavePerson", function (event) {
$("#CreateOrEditModalForm").removeData('validator');
$("#CreateOrEditModalForm").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse("#CreateOrEditModalForm");
$("#CreateOrEditModalForm").validate();
if ($("#CreateOrEditModalForm").valid()) {
$("#CreateOrEditModal").modal("hide");
//add the following code....
$("#TablePeople").replaceWith(
$.ajax({
url:"@Url.Action("Create", "Zadatak")",
method: "POST",
data: $("#CreateOrEditModalForm").serialize(),
success: function (html) {
$("#TablePeopleView").html(html);
}
}));
}
});
</script>
}
一定要修改你的CreateEditView.cshtml
:
@model Person
<div class="modal fade" id="CreateOrEditModal" role="dialog">
//...
<div class="form-group">
@*change type="submit" to type="button"*@
<input type="button" value="Pospremi osobu" class="btn btn-default" id="SavePerson" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="ClosePerson" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
控制器:
public class ZadatakController : Controller
{
private readonly YourContext _context;
public ZadatakController(YourContext context)
{
_context = context;
}
[HttpGet]
public async Task<IActionResult> Index()
{
return View();
}
[HttpPost]
public async Task<IActionResult> IndexAjax()
{
//change here....
return PartialView("_IndexTable", await _context.Person.ToListAsync());
}
public IActionResult Create()
{
return PartialView("CreateEditView");
}
[HttpPost]
public async Task<IActionResult> Create(Person person)
{
if (ModelState.IsValid)
{
_context.Add(person);
await _context.SaveChangesAsync();
//change here....
return PartialView("_IndexTable", await _context.Person.ToListAsync());
}
return View(person);
}
}
结果: