Как я могу изменить текст кнопки на каждом клике моей строки Gridview?

Question

Я использую ASP.NET C#.У меня есть Gridview (пример показан ниже) и Button.Когда я щелкаю по строкам вида сетки, текст моей кнопки должен меняться в зависимости от информации вида сетки.

Например: если я нажму на первую строку, текст моей кнопки должен быть Alpha (название операции).Если я нажму на третий ряд, он должен иметь Charlie и так далее.Пользователь может щелкнуть любую строку любое количество раз.

Я научился использовать события onRowDataBound и SelectedIndexChanged в виде сетки, чтобы поиграться со значением в виде сетки.Я был в состоянии распечатать каждую строку вида сетки, используя метки.Однако я не понимаю, как я могу изменить текст кнопки, используя этот метод.

Любая помощь в Javascript / JQuery будет принята с благодарностью.Пожалуйста, дайте мне знать, если вопрос неясен в любом случае.

Answer 1

Использование SelectedIndexChanged позволяет изменить метку кнопки на основе выбранной строки в виде сетки.Установите 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>