How to show confirmation message in MVC

In this article I am going to explain how to show confirmation message in MVC.

Description:

I want to show a confirmation message before perform any task like submit, update or delete the data. To implement this functionality you have to set onclick action of button or actionlink.

Implementation:

You have two different ways to implement this. First simply on button or actionlink use confirm as shown below:

<input type="submit" value="Create" onclick="return confirm('Are you sure want to create user?')" />  
   

Second using Jquery. Create Jquery function and call that on Onclick event as shown below:

<script>

    function Confirmmessage() {

        var alert = confirm("Are you sure want to create user?");

        if (alert) {

            return true;

        } else {

            return false;

        }

    }

</script>

Button:

<input type="submit" value="Create" onclick="return Confirmmessage()" />

I have create working example of create users for application.

Model (Login.cs)

     using System;

    using System.Collections.Generic;

    using System.ComponentModel.DataAnnotations;

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

    }

Controller:

Add empty controller to project. Create Actionresult to insert data.

Complete Code of Controller:

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>";

            ModelState.Clear();

            return View();

        }

    }

}

Add View

Add view for create user action.

Complete code of View:

@model mvctest2017.Models.Login

@{

    ViewBag.Title = "Show confirmation message in MVC";

}

<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" onclick="return confirm('Are you sure want to create user?')" />        </p>

    </fieldset>

}

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

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

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

Using Jquery

Create a Jquery function and call it on Onclick event of button or actionlink.

<script>

    function Confirmmessage() {

        var alert = confirm("Are you sure want to create user?");

        if (alert) {

            return true;

        } else {

            return false;

        }

    }

</script>

<input type="submit" value="Create" onclick="return Confirmmessage()" />