无风kiseki

博客园 首页 新随笔 联系 订阅 管理

原文地址: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();
            }

        }
    }

[下载地址]

posted on 2009-05-31 23:05  无风kiseki  阅读(2945)  评论(0编辑  收藏  举报