CODEWITHSUNDEEP
ajaxasp.net-mvctwitter-bootstrapbootstrap-modal
Rowan Richards
Rowan Richards

Reputation: 399

How to create modal forms in ASP.NET?

At the moment, I have a form in its own view in an ASP MVC application.

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

However, I would like to render this form in a Bootstrap modal above the Students table (in the Students view).

I have an API under api/students, and I'm guessing I need to use AJAX in order to submit the form.

The modal form should then close upon submission without refreshing the page (with the new student appearing in the DataTable).

UPDATE:
I understand how to create modals in the View, however, I'm not sure how to build a form correctly using AJAX (as the form will need a new Student object each time).

Upvotes: 0

Views: 331

Answers (1)

Johny
Johny

Reputation: 387

You should change the form to Ajax as Ajax.BeginForm() - see https://www.c-sharpcorner.com/UploadFile/0c1bb2/ajax-beginform-in-Asp-Net-mvc-5/

This way - you can use events like "OnComplete" to do after form POST logic such as hiding the modal etc (not always necessary but helpful)

Create your modal as:

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

use a hyperlink or a button to load the modal:

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

Since you already have data-toggle and data-target as attributes in button tag - you won't need any additional script.

There are other ways to load/upload modal content. If you do not wish to prerender modal body with students Create view... you can use jQyery .get to retrieve the view from your controller's action method. Something like:

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

Alternatively, you can also code the view load part in modal event:

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

Upvotes: 1

Related Questions