How to show message in popup in asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon