[ASP.NET][C#]資料繫結Eval結合Javascript 變成動態 call function

2014-06-10

3892
0
2014-06-28

摘要:資料繫結Eval結合Javascript 變成動態 call function

如標題透過資料繫結(Eval方法、Bind方法) 讓call javascript function能成為動態，能隨著不同資料列帶入不同引數。

假設如果我想要每列的'Show Data'欄位能動態call javascript function依著每列而有所不同，
其引數為同列Student ID欄位值與 schoolName成員(Member)值、 schoolNumber成員(Member)值。

關鍵程式碼:

onclick='<%# "javascript:doSomething(" + DataBinder.Eval(Container.DataItem,"StudentID") +
         ",\"" + schoolName + "\"," + schoolNumber.ToString() + ");" %>'

//(PS:如要多個Eval時)
onclick='<%# "javascript:doSomething(" + DataBinder.Eval(Container.DataItem,"StudentID") +
         ",\"" + DataBinder.Eval(Container.DataItem,"StudentID")  + ");" %>'

實作如下:

Default.aspx.cs 檔案內容

using System;
using System.Collections.Generic;

public partial class Default : System.Web.UI.Page
{
    public string schoolName = "test school";

    public int schoolNumber = 120;

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    //....
}

Default.aspx 檔案內容

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <script>
                function doSomething(studentID, schoolName, schoolNumber) {
                    //doSomething...
                }
            </script>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField HeaderText="Student ID" DataField="StudentID" />
                    <asp:TemplateField HeaderText="Show Data">
                        <ItemTemplate>
                            <input id="Button1" type="button" value="執行"
onclick='<%# "javascript:doSomething(" +  DataBinder.Eval(Container.DataItem,"StudentID") + ",\"" +
         schoolName + "\"," + schoolNumber.ToString() + ");" %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

最後呈現於瀏覽器 HTML原始碼結果

<div>
    <script>
        function doSomething(studentID, schoolName, schoolNumber) {
            //doSomething...
        }
    </script>
    <div>
        <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
            <tr>
                <th scope="col">Student ID</th>
                <th scope="col">Show Data</th>
            </tr>
            <tr>
                <td>1</td>
                <td>
                    <input id="Button1" type="button" value="執行" 
                        onclick='javascript:doSomething(1,"test school",120);' />
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>
                    <input id="Button2" type="button" value="執行" 
                        onclick='javascript:doSomething(2,"test school",120);' />
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>
                    <input id="Button3" type="button" value="執行" 
                        onclick='javascript:doSomething(3,"test school",120);' />
                </td>
            </tr>
        </table>
    </div>
</div>

補充:

上面的問題也能透過GridView1 RowDataBound事件去完成，動態call javascript function。

※在此感謝所有的幫助者，感謝~

回首頁