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

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

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

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

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

Answer 1

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

这种方式 - 您可以使用＆＃34; OnComplete＆＃34;等事件。在表单POST逻辑之后执行操作，例如隐藏模态等（并非总是必要但有用）

将您的模态创建为：

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

由于您已经将数据切换和数据目标作为按钮标记中的属性 - 您不再需要任何其他脚本。

还有其他方法可以加载/上传模态内容。如果您不希望与学生创建视图预呈现模态主体...您可以使用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);
    });
})

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

1 个答案: