代码之家 › 专栏 › 技术社区 › Rowan Richards DevExpress Team

如何在ASP中创建模态表单。网络?

bootstrap-modal twitter-bootstrap asp.net-mvc ajax

Rowan Richards DevExpress Team · 技术社区 · 7 年前

目前,我在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 视图)。

我有一个API api/students ,我想我需要使用AJAX才能提交表单。

然后,模式表单应在提交时关闭,而不刷新页面(新学生出现在数据表中)。

更新时间:
我了解如何在视图中创建modals,但是我不确定如何使用AJAX正确构建表单(因为表单需要一个新的 Student 对象)。

1 回复 | 直到 7 年前

Johny 7 年前

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

这样,您可以使用“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>

由于在按钮标记中已经有数据切换和数据目标作为属性,所以不需要任何其他脚本。

还有其他加载/上载模式内容的方法。如果您不希望使用学生创建视图预渲染模态体。。。您可以使用jQyery。获取以从控制器的操作方法检索视图。类似于:

$('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);
    });
})