如何在 ASP.NET 中创建模态表单？

Question

目前，我在一个 ASP MVC 应用程序的视图中有一个表单。

@model MyPortal.ViewModels.NewStudentViewModel
@{
    ViewBag.Title = "NewStudent";
    Layout = "~/Views/Shared/_LayoutStaff.cshtml";
}

<h2>New Student</h2>

@using (Html.BeginForm("CreateStudent", "Staff"))
{
<div class="form-group">
    @Html.LabelFor(s => s.Student.Id)
    @Html.TextBoxFor(s => s.Student.Id, new { @class = "form-control" })
    @Html.ValidationMessageFor(s => s.Student.Id)
</div>
    <div class="form-group">
        @Html.LabelFor(s => s.Student.FirstName)
        @Html.TextBoxFor(s => s.Student.FirstName, new { @class = "form-control" })
        @Html.ValidationMessageFor(s => s.Student.FirstName)
    </div>
    <div class="form-group">
        @Html.LabelFor(s => s.Student.LastName)
        @Html.TextBoxFor(s => s.Student.LastName, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(s => s.Student.YearGroup)
        @Html.DropDownListFor(s => s.Student.YearGroup, new SelectList(Model.YearGroups,"Id","Name"),"" ,new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(s => s.Student.RegGroup)
        @Html.DropDownListFor(s => s.Student.RegGroup, new SelectList(Model.RegGroups,"Id","Name"),"" ,new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(s => s.Student.FourMId)
        @Html.TextBoxFor(s => s.Student.FourMId, new { @class = "form-control" })
    </div>
    @Html.HiddenFor(s => s.Student.AccountBalance, new {Value = 0.00})
    @Html.AntiForgeryToken()
    <button type="submit" class="btn btn-primary">Save</button>
}

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

但是，我想在 Student 表上方的 Bootstrap 模式 中呈现此表单（在 Students 视图中）。

我在api/students 下有一个 API，我猜我需要使用 AJAX 来提交表单。

模态表单应在提交时关闭而不刷新页面（新学生出现在数据表中）。

更新：
我了解如何在视图中创建模式，但是，我不确定如何使用 AJAX 正确构建表单（因为表单每次都需要一个新的 Student 对象）。

Answer 1

您应该将表单更改为 Ajax as Ajax.BeginForm() - 请参阅 https://www.c-sharpcorner.com/UploadFile/0c1bb2/ajax-beginform-in-Asp-Net-mvc-5/

这种方式 - 您可以在表单 POST 逻辑之后使用“OnComplete”之类的事件，例如隐藏模式等（并非总是必要但很有帮助）

将您的模态创建为：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          @Html.RenderAction("Your Student GET action method", "Controller")
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使用超链接或按钮加载模式：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

由于您已经将 data-toggle 和 data-target 作为按钮标记中的属性 - 您不需要任何额外的脚本。

---

还有其他加载/上传模态内容的方法。如果您不希望与学生一起预渲染模态体 Create view... 您可以使用 jQyery .get 从控制器的操作方法中检索视图。比如：

$('button').on('click', function() {
    $.get(url).done(function(res) {
        $('.modal-body').html(res); // this will append View html to Modal body div.
        $('#myModal').modal('show'); // this will trigger show event.
    });
})

或者，您也可以在模态事件中编写视图加载部分：

$('#myModal').on('show.bs.modal', function (e) {
   $.get(url).done(function(res) {
        $('.modal-body').html(res);
    });
})