如何更改“我的Gridview行的每次单击”上按钮的文本？

Question

我正在使用 ASP.NET C# 。我有一个 Gridview （如下所示的示例）和一个 Button 。当我单击表格视图的行时，我的按钮文本需要根据表格视图的信息进行更改。

例如：如果我单击第一行，则我的Button的文本应为 Alpha （操作名称）。如果我单击第三行，它上面应该有 Charlie ，依此类推。用户可以多次单击任何行。

我了解了如何使用gridview的onRowDataBound和SelectedIndexChanged事件来处理gridview中的值。我能够使用标签打印出gridview的每一行。但是，我不明白如何使用这种方法来更改按钮的文本。

任何使用Javascript / JQuery的帮助将不胜感激。如果问题仍然不清楚，请告诉我。

Answer 1

使用SelectedIndexChanged可以根据gridview上的选定行更改按钮标签。将AutoGenerateSelectButton设置为true并创建一个事件OnSelectedIndexChanged。

public class MyModel
{
    public int Id { get; set; }
    public string Operation { get; set; }
    public string Month { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{

    var data = new List<MyModel>()
    {
        new MyModel() { Id = 101, Operation = "Alpha", Month = "Jan" },
        new MyModel() { Id = 102, Operation = "Beta", Month = "Feb" },
        new MyModel() { Id = 103, Operation = "Charlie", Month = "Mar" }
    };

    myGridView.DataSource = data;
    myGridView.DataBind();
}

protected void myGridView_SelectedIndexChanged(object sender, EventArgs e)
{
    var data = myGridView.DataSource as List<MyModel>;
    if (data == null) return;

    myButton.Text = data[myGridView.SelectedIndex].Operation;
}

aspx：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="myGridView" runat="server"  AutoGenerateSelectButton="true" AutoGenerateColumns="true" OnSelectedIndexChanged="myGridView_SelectedIndexChanged">
        <SelectedRowStyle BackColor="Red" />
    </asp:GridView>
    <asp:Button ID="myButton" runat="server" Text="---" />
</asp:Content>

您也可以在客户端使用Javascript：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="myGridView" ClientIDMode="Static" runat="server" AutoGenerateColumns="true"></asp:GridView>
    <asp:Button ID="myButton" runat="server" Text="---" ClientIDMode="Static" />
    <script>
        // Add event onclick on rows
        document.querySelectorAll("#myGridView tbody tr").forEach(a => a.addEventListener("click", _ => {
            document.querySelector("#myButton").value = a.children[1].innerText;
        }));
    </script>
</asp:Content>