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