Model Popup In ASP.NET Core 3.1

Khushbu Saini

17 Comments

Join the conversation! Your thoughts help the community grow.

Mohamed eraqaty4y ago
Is this worked for Bootstrap 5
Paata Peikrishvili4y ago
Hello, I have one question, if an error occurred while editing in method public ActionResult CreateEdit(UserDto model), is it possible to not close the dialog box, report the error and allow re-editing?
mahenthiran5y ago
Can you share the code i am getting some issue in that code. I need code for my refrence asp.net core mvc.5 no
francesco dangelo5y ago
Hello, i have a problem with this code when a try, i have this error "InvalidOperationException: The partial view '_Modal' was not found. The following locations were searched: /Views/Home/_Modal.cshtml /Views/Shared/_Modal.cshtml", here am I doing wrong?
Chetan Raj Singh5y ago
Thanks for sharing valuable code, How to get Id to show data in modal popup?, This is only for add new record.
- Khushbu Saini5y ago
  Hello @CHETAN SINGH you can bind id in data-id attribute like this <a class="btn btn-primary popup" data-url="User/CreateEdit" data-toggle="modal" data-target="#modal-create-edit-user" id="UserModel" data-id="@Model.Id"> and can get from this- var id = $(reff).data('id'); or if you want to get this on your action then pass this with your URL like $.get(url+"/"+id)
greenglass5y ago
Well, but UserDto, PopupExample.Models - where they are?
- Khushbu Saini5y ago
  UserDto is a class in which you can bind your properties which you want to display on view. public class UserDto{public int Id {get;set} public bool IsActive{get;set} public string Name{get;set} }
Paata Peikrishvili5y ago
After click, Can't Call CreateEdit(int? id)
- Khushbu Saini5y ago
  Please make sure you have performed all the steps properly and use the above bootstrap version..
Nalin Jayasuriya5y ago
Thanks so much Khushbu, easy to follow. Great article! Some quick feedback. In the JavaScript code, a simplification is possible: This line: $('#modal-create-edit-user > .modal', data).modal("show"); I think can be simplified to: $('#modal-create-edit-user').modal("show"); This is because the 'modal' class is in the same 'modal-create-edit-user' element in your example . The second parameter to set the select 'data' is not needed because the HTML was set earlier line of code with: .html(data); Thanks!
- Khushbu Saini5y ago
  Thanks ):-
Joyab Khan6y ago
Very Nice article ):-
john s6y ago
This is working for me ...nice
kamal majeed6y ago
It didn't work for me, first the name of the partial is _Modal and not _Model.cs as you mentioned in your article (Create _Model.cs Partial view in shared folder). Second, it doesn't bring the footer .. I don't know much about javascripts but maybe there is something wrong with user.js ?
- joh4nn_bragi5y ago
  Thanks for this code sample. To get the footer right >> <textarea asp-for="@Model.MessageText" class="form-control" placeholder=""></textarea>
- Khushbu Saini6y ago
  Hello !- Kamal majeed , thanks for reviewing but you are wrong First one the I had created _Model.cshtml partial view, yeah it's .cshtml not the .cs. the second one is model header and the footer will be added in _CreateEdit.cshtml partial view , please check I have also written in a comment there. and your last doubt is in user.js which is wrong because I have created this js like a jquery plugin. so, this is the working code.

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

Step 2

Create _Model.cs Partial view in shared folder.

<div aria-hidden="true" aria-labelledby="modal-create-edit-user-label" role="dialog" tabindex="-1" id="modal-create-edit-user" class="modal fade">
<div class="modal-dialog">
</div>
</div>

Step 3

Create index.cshtml page where you'll create an Add button for clicking to popup.

@{
ViewData["Title"] = "Index";
}
<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>
<partial name="_Modal" />
@section Scripts{
<script src="~/js/user.js" asp-append-version="true"></script>
}

Step 4

UserController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using PopupExample.Models;
namespace PopupExample.Controllers
{
public class UserController : Controller
{
public IActionResult Index()
{
return View();
}
public ActionResult CreateEdit(int? id)
{
UserDto model = new UserDto();
model.IsActive = true;
if (id.HasValue)
{
//Write your get user details code here.
}
return PartialView("_CreateEdit", model);
}
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(UserDto model)
{
//validate user
if (!ModelState.IsValid)
return PartialView("_CreateEdit", model);
//save user into database
return RedirectToAction("index");
}
}
}

Step 5

_CreateEdit.cshtml Partial view which you want to render in popup

@model UserDto
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form asp-action="CreateEdit" asp-controller="User" method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="modal-body form-horizontal">
<div class="form-group row">
@Html.HiddenFor(model => model.Id)
@Html.LabelFor(model => model.Name, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<input asp-for="@Model.Name" placeholder = "Enter Name" class="form-control" />
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.Address, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<textarea asp-for="@Model.Address" class="form-control" placeholder="Please enter your address here" />
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="form-check">
@Html.CheckBoxFor(model => model.IsActive, new { @class = "form-check-input" })
@Html.LabelFor(model => model.IsActive, new { @class = "form-check-label" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success relative" id="btnSubmit" type="submit">
<i class="loader"></i>
Submit
</button>
</div>
</form>
</div>

Step 6

User.js renders the partial view in popup model

(function ($) {
function Index() {
var $this = this;
function initialize() {
$(".popup").on('click', function (e) {
modelPopup(this);
});
function modelPopup(reff) {
var url = $(reff).data('url');
$.get(url).done(function (data) {
debugger;
$('#modal-create-edit-user').find(".modal-dialog").html(data);
$('#modal-create-edit-user > .modal', data).modal("show");
});
}
}
$this.init = function () {
initialize();
};
}
$(function () {
var self = new Index();
self.init();
});
}(jQuery));

Here we render partial view......

Output

Now click on AddUser button and add partial view popup in model.