原文地址:http://highoncoding.com/Articles/562_GridView_Confirmation_Box_Using_JQuery_BlockUI.aspx
需要下载BlockUI Plugin插件。效果图:
前台代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqueryblockui.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Delete" onclick="showDeleteConfirmation('<%# Eval("CategoryId") %>')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divConfirmBox" style="display:none">
Are you sure you want to delete this record?
<asp:Button ID="btn_DeleteRecord" OnClientClick="deleteRecord()" OnClick="Btn_DeleteRecord" UseSubmitBehavior="false" runat="server" Text="Yes" />
<input type="button" value="No" onclick="$.unblockUI()" />
</div>
<asp:HiddenField ID="hfCategoryId" runat="server" />
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var categoryId;
function showDeleteConfirmation(cId) {
categoryId = cId
$.blockUI({ message : $('#divConfirmBox') });
}
function deleteRecord() {
$("#hfCategoryId").val(categoryId);
$.unblockUI();
}
</script>
当点击删除按钮时,触发showDeleteConfirmation获得categoryId ,在弹出层中点击YES时首先触发deleteRecord函数,把categoryId 赋值给隐藏控件hfCategoryId,最后服务器端函数Btn_DeleteRecord触发,点击NO时解锁页面,UseSubmitBehavior = false使用ASP.NET的postback机制执行一个回送。
后台代码:
public partial class DeleteConfirmationsGridView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindData();
}
}
private void BindData()
{
using (var northwind = new NorthwindDataContext())
{
gvCategories.DataSource = northwind.Categories;
gvCategories.DataBind();
}
}
protected void Btn_DeleteRecord(object sender, EventArgs e)
{
var categoryId = Int32.Parse(hfCategoryId.Value);
using(var northwind = new NorthwindDataContext())
{
var category = (from c in northwind.Categories
where c.CategoryID == categoryId
select c).SingleOrDefault();
northwind.Categories.DeleteOnSubmit(category);
northwind.SubmitChanges();
BindData();
}
}
}
[下载地址]