MVC : Show confirmation message before submit, update or delete record - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

MVC : Show confirmation message before submit, update or delete record

In this article I am going to explain how to show confirmation message before submit, update or delete record 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()" />


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