Introduction

This article explains how to make a popup model inASP.net core 3.1. We've seen so many issues with this in the latest Jquery and Bootstrap.
In this article we will see how to render partial view from controller and toggle it on button click .
So let's start.
Step 1
Embed the following css & js into your project:
  • jQuery v3.4.1
  • Bootstrap v4.3.1
Model Popup In ASP.NET Core 3.1
Model Popup In ASP.NET Core 3.1
Step 2
Create _Model.cs Partial view in shared folder.
  1. <!--Modal-->
  2. <div aria-hidden="true" aria-labelledby="modal-create-edit-user-label" role="dialog" tabindex="-1" id="modal-create-edit-user" class="modal fade">
  3. <div class="modal-dialog">
  4. </div>
  5. </div>
Step 3
Create index.cshtml page where you'll create an Add button for clicking to popup.
  1. @{
  2. ViewData["Title"] = "Index";
  3. }
  6. <a class="btn btn-primary popup" data-url="User/CreateEdit" data-toggle="modal" data-target="#modal-create-edit-user" id="UserModel">Add New User <i class="fa fa-plus"></i></a>
  7. <partial name="_Modal" />
  8. @section Scripts{
  9. <script src="~/js/user.js" asp-append-version="true"></script>
  10. }
Step 4
UserController.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. using Microsoft.AspNetCore.Mvc;
  6. using PopupExample.Models;
  8. namespace PopupExample.Controllers
  9. {
  10. public class UserController : Controller
  11. {
  12. public IActionResult Index()
  13. {
  14. return View();
  15. }
  17. public ActionResult CreateEdit(int? id)
  18. {
  19. UserDto model = new UserDto();
  20. model.IsActive = true;
  21. if (id.HasValue)
  22. {
  23. //Write your get user details code here.
  24. }
  25. return PartialView("_CreateEdit", model);
  27. }
  28. [ValidateAntiForgeryToken]
  29. [HttpPost]
  30. public ActionResult CreateEdit(UserDto model)
  31. {
  32. //validate user
  33. if (!ModelState.IsValid)
  34. return PartialView("_CreateEdit", model);
  37. //save user into database
  38. return RedirectToAction("index");
  39. }
  41. }
  42. }
Step 5
_CreateEdit.cshtml Partial view which you want to render in popup
  1. @model UserDto
  2. <!--Modal Body Start-->
  4. <div class="modal-content">
  6. <!--Modal Header Start-->
  7. <div class="modal-header">
  8. <h4 class="modal-title">Add User</h4>
  9. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  10. </div>
  11. <!--Modal Header End-->
  14. <form asp-action="CreateEdit" asp-controller="User" method="post" enctype="multipart/form-data">
  16. @Html.AntiForgeryToken()
  18. <div class="modal-body form-horizontal">
  19. <div class="form-group row">
  20. @Html.HiddenFor(model => model.Id)
  21. @Html.LabelFor(model => model.Name, new { @class = "col-sm-2 col-form-label" })
  22. <div class="col-sm-10">
  23. <input asp-for="@Model.Name" placeholder = "Enter Name" class="form-control" />
  24. </div>
  25. </div>
  26. <div class="form-group row">
  27. @Html.LabelFor(model => model.Address, new { @class = "col-sm-2 col-form-label" })
  28. <div class="col-sm-10">
  29. <textarea asp-for="@Model.Address" class="form-control" placeholder="Please enter your address here" />
  30. </div>
  31. </div>
  33. <div class="form-group row">
  34. <div class="offset-sm-2 col-sm-10">
  35. <div class="form-check">
  36. @Html.CheckBoxFor(model => model.IsActive, new { @class = "form-check-input" })
  37. @Html.LabelFor(model => model.IsActive, new { @class = "form-check-label" })
  38. </div>
  40. </div>
  41. </div>
  43. </div>
  44. <!--Modal Footer Start-->
  45. <div class="modal-footer">
  46. <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
  47. <button class="btn btn-success relative" id="btnSubmit" type="submit">
  48. <i class="loader"></i>
  49. Submit
  50. </button>
  51. </div>
  52. <!--Modal Footer End-->
  53. </form>
  55. </div>
  58. <!--Modal Body End-->
Step 6
User.js renders the partial view in popup model
  1. (function ($) {
  2. function Index() {
  3. var $this = this;
  4. function initialize() {
  6. $(".popup").on('click', function (e) {
  7. modelPopup(this);
  8. });
  10. function modelPopup(reff) {
  11. var url = $(reff).data('url');
  13. $.get(url).done(function (data) {
  14. debugger;
  15. $('#modal-create-edit-user').find(".modal-dialog").html(data);
  16. $('#modal-create-edit-user > .modal', data).modal("show");
  17. });
  19. }
  20. }
  22. $this.init = function () {
  23. initialize();
  24. };
  25. }
  26. $(function () {
  27. var self = new Index();
  28. self.init();
  29. });
  30. }(jQuery));

Model Popup In ASP.NET Core 3.1

Here we render partial view......
Model Popup In ASP.NET Core 3.1
Model Popup In ASP.NET Core 3.1
Output
Now click on AddUser button and add partial view popup in model.