How to show message in popup in asp.net MVC

In this article I am going to explain how to show message in popup in asp.net MVC.

Description:

I want to show success message in popup after submit the data. We can show message in popup using jquery or HTML raw.

Implementation:

I have create a class Login to create users. When user created successfully show success message in popup.

Model (Login.cs)

public partial class Login

    {

        public int Id { get; set; }

        [Required(ErrorMessage = "Please enter username")]

        public string Username { get; set; }

        [Required(ErrorMessage = "Please enter password")]

        [DataType(DataType.Password)]

        [StringLength(100, ErrorMessage = "Password \"{0}\" must have {2} character", MinimumLength = 8)]

        [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,}$", ErrorMessage = "Password must contain: Minimum 8 characters atleast 1 UpperCase Alphabet, 1 LowerCase Alphabet, 1 Number and 1 Special Character")]

        public string Password { get; set; }

        [Display(Name = "Confirm password")]

        [Required(ErrorMessage = "Please enter confirm password")]

        [Compare("Password", ErrorMessage = "Confirm password doesn't match, Type again !")]

        [DataType(DataType.Password)]

        public string Confirmpwd { get; set; }

        public Nullable<bool> Is_Deleted { get; set; }

    }

Method 1 using Raw HTML:

Controller

Complete code of controller (LoginController.cs)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using mvctest2017.Models;

using System.Security.Cryptography;

namespace mvctest2017.Controllers

{

  

    public class LoginController : Controller

    {

        //

        // GET: /Login/

        DemoEntities db = new DemoEntities();

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult Createuser()

        {

           

            return View();

        }

        [HttpPost]

        public ActionResult Createuser(Login objlogin)

        {

            if (ModelState.IsValid)

            {

                db.Logins.Add(objlogin);

                db.SaveChanges();

            }

            TempData["Success"] = "<script>alert('User created successfully');</script>";

            // ViewData["Test"] = "<script>alert('Test');</script>";

            ModelState.Clear();

            return View();

        }

    }

}

View

Complete source of View (Create.cshtml)

@model mvctest2017.Models.Login

@{

    ViewBag.Title = "Create user";

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="~/Scripts/passwordscheck.js"></script>

<link href="~/Scripts/passwordscheck.css" rel="stylesheet" />

<h2>Create user</h2>

@using (Html.BeginForm()) {

    @*@Html.AntiForgeryToken()*@

    @Html.ValidationSummary(true)

    <fieldset id="register">

        <legend>Create user</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.Username)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Username)

            @Html.ValidationMessageFor(model => model.Username)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Password)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Password, new { id = "password" })

           <span id="result"></span>

            @Html.ValidationMessageFor(model => model.Password)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Confirmpwd)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Confirmpwd)

            @Html.ValidationMessageFor(model => model.Confirmpwd)

        </div>

        <p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

}

@Html.Raw(TempData["Success"])

@*@Html.Raw(ViewData["Test"])*@

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Method 2 using Jquery:

Controller

Complete code of controller (LoginController.cs)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using mvctest2017.Models;

using System.Security.Cryptography;

namespace mvctest2017.Controllers

{

  

    public class LoginController : Controller

    {

        //

        // GET: /Login/

        DemoEntities db = new DemoEntities();

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult Createuser()

        {

           

            return View();

        }

        [HttpPost]

        public ActionResult Createuser(Login objlogin)

        {

            if (ModelState.IsValid)

            {

                db.Logins.Add(objlogin);

                db.SaveChanges();

            }

            //TempData["Success"] = "<script>alert('User created successfully');</script>";

            //ViewData["Test"] = "<script>alert('Test');</script>";

            ModelState.Clear();

            ViewBag.message = "User created successfully";

            return View();

        }

    }

}

View

Complete source of View(Create.cshtml)

@model mvctest2017.Models.Login

@{

    ViewBag.Title = "Create user";

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="~/Scripts/passwordscheck.js"></script>

<link href="~/Scripts/passwordscheck.css" rel="stylesheet" />

<h2>Create user</h2>

@using (Html.BeginForm()) {

    @*@Html.AntiForgeryToken()*@

    @Html.ValidationSummary(true)

    <fieldset id="register">

        <legend>Create user</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.Username)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Username)

            @Html.ValidationMessageFor(model => model.Username)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Password)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Password, new { id = "password" })

           <span id="result"></span>

            @Html.ValidationMessageFor(model => model.Password)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Confirmpwd)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Confirmpwd)

            @Html.ValidationMessageFor(model => model.Confirmpwd)

        </div>

        <p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

}

@*@Html.Raw(TempData["Success"])*@

@*@Html.Raw(ViewData["Test"])*@

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

@if (ViewBag.message != null)

{

    <script type="text/javascript">

       $(function () {

            alert("@ViewBag.message");

        });

    </script>

}

}