将 C# 变量传递给 HTML 按钮答案

【问题标题】：Pass C# Variable to HTML Button将 C# 变量传递给 HTML 按钮
【发布时间】：2019-04-03 02:02:54
【问题描述】：

我正在尝试通过将 C# 变量传递给这些按钮来动态更改网页上 5 个 HTML 按钮的文本/值。我在页面加载中通过 SQL 查询生成变量，但不知道如何将变量传递给按钮。

变量生成：

        DataSet ds= new DataSet();
        DataTable dt= new DataTable();
        connection.Open();
        string commandstring = "SELECT TOP (5) [ButtonVal] FROM Table";
        SqlDataAdapter adptr = new SqlDataAdapter(commandstring, connection);
        adptr.Fill(ds);
        dt = ds.Tables[0];
        Btn1 = System.Convert.ToString(dt.Rows[0][0]);
        Btn2 = System.Convert.ToString(dt.Rows[1][0]);
        Btn3 = System.Convert.ToString(dt.Rows[2][0]);
        Btn4 = System.Convert.ToString(dt.Rows[3][0]);
        Btn5 = System.Convert.ToString(dt.Rows[4][0]);

HTML：

    <table>
<tr>
 <td><asp:Button ID="Button1" text="XXX" value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td> 
 <td><asp:Button ID="Button2" text="XXX" value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>        
 <td><asp:Button ID="Button3" text="XXX" value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>     
 <td><asp:Button ID="Button4" text="XXX" value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>   
 <td><asp:Button ID="Button5" text="XXX" value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>
<tr />

OnClick 函数根据按钮的值重定向到另一个页面。

* 根据 Jim W 的回答进行编辑 *

        1)
          C#:
            public string Btn1
            if (!Page.IsPostBack)
            {
               Btn1 = (dt.Rows[0][0]).ToString();
            }

          HTML:
            <td><asp:Button ID="Button1" Text="<%# Btn1 %>" Value ="<%# Btn1 %>" 
            style="font-size:8px;height:30px;width:60px" runat="server"  
            AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>

          Output:
             Blank Button 

        2)
          C#:

            if (!Page.IsPostBack)
            {
               Button1.Text = (dt.Rows[0][0]).ToString();
            }

          HTML:
            <td><asp:Button ID="Button1" Text="<%# Button1 %>" Value ="<%# Button1 %>" 
            style="font-size:8px;height:30px;width:60px" runat="server"  
            AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>

          Output:
             Button text is "System.Web.UI.WebControls.Button" 

        3)
          C#:
            public string Btn1
            if (!Page.IsPostBack)
            {
               Btn1 = System.Convert.ToString(dt.Rows[0][0]);
            }

          HTML:
            <td><asp:Button ID="Button1" Text="<%# Btn1 %>" Value ="<%# Btn1 %>" 
            style="font-size:8px;height:30px;width:60px" runat="server"  
            AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>

          Output:
             Blank Button             

        4)
          C#:
            public string Btn1
            if (!Page.IsPostBack)
            {
               Btn1 = (dt.Rows[0][0]).ToString();
            }

          HTML:
            <td><asp:Button ID="Button1" Text="<%# Btn1 %>" Value ="<%# Btn1 %>" 
            style="font-size:8px;height:30px;width:60px" runat="server"  
            AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>

          Output:
             Blank Button

【问题讨论】：

至少按钮 'Click' 处理程序 PostBack 会将发起请求的按钮的值公开为 'CommandName'：因此请填写一个合理的值（通过 CommandName 属性）。跨度>
查看我的更新答案，您可能只需要在标记中使用Text= 而不是text=
了解前端总是一个好主意，现在您已经完成了后端。接下来是使用 JS、JQuery 或 Angular 编写脚本，这将处理您的所有后端数据。

标签： javascript c# html asp.net button

【解决方案1】：

您可以通过数据绑定来实现，请参阅https://support.microsoft.com/en-us/help/307860/asp-net-data-binding-overview

例如

 <td><asp:Button ID="Button1" Text="<%# Btn1 %>" Value ="XXX" style="font-size:8px;height:30px;width:60px" runat="server"  AutoPostBack="true"  OnClick="ChangeRedirect_Click" />   </td>

然后您在发布（或之后）的变量生成代码末尾调用Page.DataBind()。

更新：完整示例

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="NS.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="Button1" Text="<%# Btn1 %>" runat="server"/>
    </div>
    </form>
</body>
</html>

代码隐藏

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NS
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected string Btn1;
        protected void Page_Load(object sender, EventArgs e)
        {
            Btn1 = "hello";
            Page.DataBind();
        }
    }
}

【讨论】：

Jim 对此表示感谢 - 这让我更接近，但现在按钮文本显示为“System.Web.UI.WebControls.Button”，而不是实际文本。我尝试输入 Text = "Button1.Value" 和 Text = "Button1.Text" - 但这些都不起作用。
@Is101 该编辑令人困惑，因为您的按钮 ID 与变量 Button1 相同。回到使用Btn1，或者只使用Button1.Text = (dt.Rows[0][0]).ToString(); 并忘记数据绑定。如果您仍然卡住，请更新完整的代码，以便我们在同一页面上。
我认为您实际上是将按钮文本设置为按钮对象本身，这就是我想说的。
@Is101 您可以从您的帖子中执行方法#1，但您必须调用 Page.DataBind()。我将在我的答案中添加一个完整的示例

【解决方案2】：

使用每个按钮的ID名称代替，并包含一个属性.Text，如下所示：

Button1.Text = (dt.Rows[0][0]).ToString();

【讨论】：

@ls101 当您为Button1.Text 赋值时（其中“Button1”是runat=server 按钮的ID），您不需要/不希望任何数据绑定表达式覆盖那些价值观。所以它应该只适用于Text=" "
@Is101，您可能需要使用循环。在将数据插入到相应按钮的正确位置时遍历整个数组。即 Button.text、Button.label 等