While doing deletion of records in the list view of the MVC project you need to perform it using the modal popup which will make this task easy and efficient.
No need to go for another action and view for deletion just delete it after giving a message.
EmployeeRepository EmpRep = null;
EmployeeModel EmpMod = null;
public ActionResult Index()
{
EmpRep = new EmployeeRepository();
List<EmployeeModel> EmpMod = new List<EmployeeModel>();
EmpMod = EmpRep.GetDetails().ToList();
return View(EmpMod);
}
We just need to make a popup in which the div is being invoked to display the confirmation message.
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script>
$(document).ready(function () {
var url = "";
$("#dialog-alert").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
if ('@TempData["msg"]' != "") {
$("#dialog-alert").dialog('open');
}
$("#dialog-edit").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = url;
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-detail").dialog({
title: 'View User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#lnkCreate").live("click", function (e) {
//e.preventDefault(); //use this or return false
// url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
$(".lnkEdit").live("click", function (e) {
var id = $(this).attr('id');
url = '@Url.Content("~/Home/_Edit")/' + id;
$("#dialog-edit").dialog('open');
$.get(url,function (result) {
alert(result);
$("#dialog-edit").html(result);
});
// e.preventDefault(); use this or return false
$(".ui-dialog-title").html("Update User");
$("#dialog-edit").dialog('open');
return false;
});
$(".lnkDelete").live("click", function (e) {
// e.preventDefault(); use this or return false
url = $(this).attr('href');
$("#dialog-confirm").dialog('open');
return false;
});
$(".lnkDetail").live("click", function (e) {
// e.preventDefault(); use this or return false
url = $(this).attr('href');
$("#dialog-detail").dialog('open');
return false;
});
$("#btncancel").live("click", function (e) {
$("#dialog-edit").dialog("close");
return false;
});
});
</script>
This is our javascript which we have written in my view.
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete?
</p>
</div>
This is the confirmation which we will use to display the alert message for deletion.
0 Comment(s)