2011年12月18日 星期日

jQuery csscody confirm整合GridView的刪除提示

一般若要在GridView按下刪除鈕時出現提示訊息的話
 <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:Button ID="btn_Delete" runat="server" CausesValidation="False" CommandArgument='<%# Eval("CategoryID") %>'
                        OnClientClick="return confirm('您確定要刪除？');" CommandName="Delete" Text="刪除" />
                </ItemTemplate>
 </asp:TemplateField>




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewDemo.aspx.cs" Inherits="GridViewDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--引用jQuery核心函式庫--%>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <%--csscody相關--%>
    <script src="js/alertbox.js" type="text/javascript"></script>
    <link href="js/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <%--自己寫的jQuery--%>
    <script type="text/javascript">

        function deleteConfirm(lnkUniqueID) {


            csscody.confirm('Delete.Are you sure you want to delete this?',
        {

            onComplete: function (arg) {
                //arg is the value of true or false
                if (arg) {//Or arguments[0] is also ok 
                    __doPostBack(lnkUniqueID, '');
                         }

            } //End onComplete
        }); //End csscody.confirm

        //無條件return false，讓onComplete此callback function執行完成
        return false;
        }
     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:SqlDataSource runat="server" ID="sds_Categories" ConnectionString="<%$ ConnectionStrings:NorthwindChineseConnectionString %>"
        SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories] Order by CategoryID ASC"
        DeleteCommand="Delete From Categories Where CategoryID=@CategoryID">
        <DeleteParameters>
            <asp:Parameter Name="CategoryID" />
        </DeleteParameters>
    </asp:SqlDataSource>
    <asp:GridView runat="server" AutoGenerateColumns="False" ID="GridView1" DataKeyNames="CategoryID"
        DataSourceID="sds_Categories" onrowdatabound="GridView1_RowDataBound">
        <Columns>
            <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" InsertVisible="False"
                ReadOnly="True" SortExpression="CategoryID" />
            <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
            <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:Button ID="btn_Delete" runat="server" CausesValidation="False" CommandArgument='<%# Eval("CategoryID") %>'
                        OnClientClick="return confirm('您確定要刪除？');" CommandName="Delete" Text="刪除" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:LinkButton ID="lnk_Delete" runat="server" CausesValidation="False"  
                        CommandName="Delete" Text="刪除" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>
 
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class GridViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)//Get Method
        {

        }
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType==DataControlRowType.DataRow)
        {
            LinkButton lnk_Delete = (LinkButton)e.Row.FindControl("lnk_Delete");
            string UniqueID = lnk_Delete.UniqueID;
            //要有return 來讓伺服器端是否要繼續執行下去
            lnk_Delete.Attributes["onclick"] = "return deleteConfirm('"+UniqueID+"');";
        }
    }
}


下載範例檔案


其他相關資訊請看原始文章

於

沒有留言:

張貼留言