如何打开弹出对话框窗口并通过 ajax 保存数据 .net core mvc

Question

我是 .NET 的新手，我想打开一个模式弹出窗口，然后将此数据保存到 db 而不重新加载页面。

首先，用户需要点击一个按钮。模态是通过 ajax 加载的。用户填写表单，然后验证内容并将其发布到数据库。

这是按钮的代码：

<button class="btn btn-primary" asp-controller="Positions" asp-action="Create" 
        data-toggle="ajax-modal" data-target="#add-contact">Add new Positions</button>

这是控制器：

// GET: Positions/Create
public IActionResult Create()
{
    return View();
}

// POST: Positions/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("PositionId,PositionName")] Position position)
{
    if (ModelState.IsValid)
    {
        _context.Add(position);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(position);
}

这是模型（很简单）

public class Position
{
    [Key]
    public int PositionId { get; set; }
    public string PositionName { get; set; }
}

这是我观点的代码：

@model Models.Position

@{
    ViewData["Title"] = "Create";
}

<h3>Create Position</h3>
<hr/>
<div class="modal fade" id="add-contact" tabindex="-1" role="dialog" aria-labelledby="addPositionsLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addPositionsLabel">Add positions</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-action="Create">
                    <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                    <div class="form-group">
                        <label asp-for="PositionName"></label>
                        <input asp-for="PositionName" class="form-control" />
                        <span asp-validation-for="PositionName" class="text-danger"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-save="modal">Save</button>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

如何正确打开此弹出对话框窗口，然后将填充的行保存到 db（通过 ajax）而不重新加载页面？

Answer 1

为防止向db添加数据时页面引用，您需要使用ajax显示模态并将数据传递给Create方法。

而且你还需要把需要刷新的数据内容（一部分，不是整个页面）放到partial view，保证页面不会刷新，并且可以看到最新的数据添加到页面.

Index.cshtml：

@model IEnumerable<Models.Position>

@{
    ViewData["Title"] = "Index";
}
@section Scripts{

    <script type="text/javascript">
        $("#addBtn").click(function () {
            $.ajax({
                url: $(this).attr("formaction"),
            }).done(function (msg) {
                $("#AddContent").html(msg);
                $("#add-contact").modal("show");
            })
        });
        $("body").on("click", "#save", function () {
            var form = $('form');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
            $.ajax({
                type: "post",
                url: form.attr('action'),
                data: {
                    __RequestVerificationToken: token,
                    position: {
                        PositionName: $("#PositionName").val()
                    }
                },
                dataType: "html",
                success: function (result) {
                    $("#add-contact").modal("hide");
                    $("#partial").html(result);
                }
            });
            return false;
        });
    </script>

}

<button class="btn btn-primary" asp-controller="Positions" asp-action="Create"
        data-toggle="ajax-modal" data-target="#add-contact" id="addBtn">
    Add new Positions
</button>
<br />
<div class="modal fade" id="add-contact" tabindex="-1" role="dialog" aria-labelledby="addPositionsLabel" aria-hidden="true">
    <div id="AddContent">
    </div>
</div>
<div id="partial">
    @Html.Partial("_PositionList", Model)
</div>

创建.cshtml：

@model Models.Position

@{
    ViewData["Title"] = "Create";
    Layout = null;
}

<h3>Create Position</h3>
<hr />
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="addPositionsLabel">Add positions</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form asp-action="Create">
                <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                <div class="form-group">
                    <label asp-for="PositionName"></label>
                    <input asp-for="PositionName" class="form-control" />
                    <span asp-validation-for="PositionName" class="text-danger"></span>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-save="modal" id="save">Save</button>
        </div>
    </div>
</div> 

_PositionList.cshtml（部分视图）：

@model IEnumerable<Models.Position>
<table class="table-bordered">
    <tr>
        <th>
            PositionId
        </th>
        <th>
            PositionName
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @item.PositionId
            </td>
            <td>
                @item.PositionName
            </td>

        </tr>
    }
</table>

PositionsController.cs：

public IActionResult Index()
    {
        return View( _context.Position.ToList());
    }
    public IActionResult Create()
    {
        return View();
    }

    // POST: Positions/Create
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("PositionId,PositionName")] Position position)
    {
        if (ModelState.IsValid)
        {
            _context.Add(position);
            await _context.SaveChangesAsync();
            return  PartialView("_PositionList", _context.Position.ToList());
        }
        return View(position);
    }

结果如下：