ASP.NET Core MVC 在提交表单后更新部分视图

Question

这是在 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")");
});

这从 controller 调用 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>

它工作正常，获取数据并将其显示在桌面上。

当我想创建一个新人时，我单击“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");
    }
});

我不得不这样做，因为它是通过部分视图加载的，而不是在页面加载时加载。

验证表单后，它会调用 controller 女巫的“创建”方法，如下所示。

[HttpPost]
public IActionResult Create(Person model)
{

if (ModelState.IsValid)
    {
        this._dbContext.People.Add(model);
        this._dbContext.SaveChanges();
        return NoContent();
    }
    return NoContent();
}

现在我想这就是我的问题所在。 如果“ModelState.IsValid”有效，则新人将被保存到数据库中，并将返回 NoContent。 我没有放任何内容，所以页面不会刷新，但是如果我放了return RedirectToAction(nameof(IndexAjax)); 就像我在开始时所做的那样，它只是将 partila 视图加载到这样的新页面中。

我不希望这种情况发生，我只希望在停留在页面上的同时用新人刷新表格。

Answer 1

Ajax 允许网站在不刷新页面的情况下将内容加载到屏幕上。

这是一个您可以检查的工作演示：

Model：

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>

Controller：

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);
    }
}

结果：