Performing ASP.NET ListView Item Delete Confirmation using jQuery Colorbox.
Here I use Google Hosted jQuery Library because it serve jQuery to users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.
Then you need to download jQuery Colorbox from https://github.com/jackmoore/colorbox
You can find jQuery colorbox examples here http://www.jacklmoore.com/colorbox/
Solution
STEP 1: You need to add the jQuery and Colorbox inside the <head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
STEP 2: Write jQuery function for inline dialog box
<script type="text/javascript">
function CBoxClose() {
parent.$.colorbox.close(); return false;
}
$(document).ready(function () {
$('#btnDelete').live('click', function () {
var htmlRes = '<div class="box">'
+'<div class="box-header">'
+' <span class="icon16 info"></span><h1>Delete Confirmation</h1>'
+'</div>'
+'<div class="box-content">'
+' <span class="icon16 info"></span><h1> Are you sure?</h1>'
+' <p>Are you sure you want to delete this Category?</p>'
+' <p><strong>Note:</strong> All the related services will be deleted. And This cannot be undone!</p>'
+'</div>'
+'<div class="action_bar">'
+ ' <a href="#" onclick="' + this.href + ', CBoxClose();" class="button blue">Delete</a>'
+' <a href="#" onclick="parent.$.colorbox.close(); return false;" class="button">Cancel</a>'
+'</div>'
+'</div>';
$.colorbox({
open: true,
//inline: true,
innerWidth: "550px",
innerHeight: "223px",
scrolling: false,
html: htmlRes
});
return false;
});
});
</script>
STEP 3: ASP.NET ListView Item
<asp:ListView ID="lvServiceCategory" ItemPlaceholderID="ItemPlaceholder" runat="server">
<LayoutTemplate>
<table>
<thead>
<tr>
<th>Service Category</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "ServiceCategoryName")%></td>
<td>
<asp:LinkButton
ID="btnDelete"
runat="server"
ClientIDMode="Static"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ServiceCategoryID")%>'
Text="Delete" />
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<p>Sorry! No Service Category Records Found on...Please Try Again..!</p>
</EmptyDataTemplate>
</asp:ListView>
If you want to discuss more about this please visit http://www.MenonOn.Net/
