[ASP.net WebForm] jQuery csscody confirm整合GridView的刪除提示

2011-12-18

6746
0
ASP.net WebForm
2011-12-18

一般若要在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>

剛剛到CSS CODY官網看，還滿多人留言問如何取得confirm的回傳值(true or false)，雖然已經有人回覆了

這邊就來紀錄一下，跟ASP.net GridView Control整合的應用

<%@ 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+"');";
        }
    }
}

先看一般的執行效果：

Css Cody(confirm是掉下來的動畫效果)

點選OK就會刪除資料(截圖沒截好，其實這confirm是在畫面中間)

如果OK、Cancel要改成中文字的話

到alertbox.js裡做修改其實會變亂碼

所以加上以下黃色部份就可以了

<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

        $("#BoxConfirmBtnOk").val("確定"); $("#BoxConfirmBtnCancel").val("取消");
        //無條件return false，讓onComplete此callback function執行完成
        return false;
        }
     
    </script>

2011.12.18 追記

要改變OK、Cancel中文字的話，個人覺得較正統的方式，還是從參數著手

    <%--自己寫的jQuery--%>
    <script type="text/javascript">

        function deleteConfirm(lnkUniqueID) {


            csscody.confirm('Delete.Are you sure you want to delete this?',
        {
            textBoxBtnOk: '確定',
            textBoxBtnCancel:'取消',
            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>

本次Demo包

※另外，此套件單純做提示訊息就好，不方便再嵌太多東西或做太多變化

回首頁