Saturday, November 25, 2017

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()" />


No comments:

Post a Comment