Model Popup In ASP.NET Core 3.1

model popup on button click event in asp.net core 3.1

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.

<!--Modal-->
<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
<!--Modal Body Start-->

    <div class="modal-content">

        <!--Modal Header Start-->
        <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>
        <!--Modal Header End-->


        <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>
                <!--Modal Footer Start-->
                <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>
                <!--Modal Footer End-->
           </form>

    </div>


<!--Modal Body End-->

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.