Как открыть всплывающее диалоговое окно windows и сохранить данные. net core mvc через ajax

Question

Я новичок в. NET и я хочу открыть модальное всплывающее окно и затем сохранить эти данные в БД без перезагрузки страницы.

Прежде всего, пользователь должен нажать на кнопку. Модал загружается через 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"); }
}

Как правильно открыть это всплывающее диалоговое окно, а затем сохранить заполненные строки в БД (через ajax) без перезагрузки страницы?

Answer 1

Чтобы страница не ссылалась на sh при добавлении данных в дб, вам нужно использовать ajax для отображения модальных данных и передачи данных в метод Create.

И вам также нужно поместить содержимое данных вам нужно переосмыслить sh (часть, а не всю страницу) до partial view, чтобы убедиться, что страница не переосчитает sh, и вы сможете увидеть самые новые данные, добавленные на страницу.

Index.cs html:

@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>

Create.cs html:

@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.cs html (частичное представление):

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

Вот результат: