Pass C# Variable to HTML Button

Question

I'm trying to dynamically change the text/value of 5 HTML buttons on a web page, via passing C# variables to those buttons. I'm generating the variables via a SQL query in the page load but can't figure out how to pass the variables to the buttons.

Variable generation:

        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 />

The OnClick function is redirecting to another paged based on the button's value.

* EDIT BASED ON Jim W's ANSWER *

        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

At a minimum the button 'Click' handler PostBack will expose the value of the button that initiated the request as the 'CommandName': so fill in a sensible value (via the CommandName property). — user2864740
– user2864740, Commented Oct 30, 2018 at 4:24
See my updated answer, you probably just need to use Text= in your markup instead of text= — Jim W
– Jim W, Commented Oct 30, 2018 at 16:36
It's always a good idea to understand the Front end, now that you are done with the Back end. Scripting with JS, JQuery or Angular comes next from here and this will handle all your Back end Data. — Juniar
– Juniar, Commented Oct 30, 2018 at 18:58

Jim W · Accepted Answer · 2018-10-30 18:49:50Z

1

You do it with databinding, see https://support.microsoft.com/en-us/help/307860/asp-net-data-binding-overview

eg

 <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>

And then you call Page.DataBind() at the end of your variable generation code that you posted (or later).

UPDATE: Complete example

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>

Codebehind

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();
        }
    }
}

edited Oct 30, 2018 at 18:49

answered Oct 30, 2018 at 4:26

Jim W

5,0261 gold badge31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ls101 Over a year ago

Jim thanks for this - this gets me closer but now the button text is showing as 'System.Web.UI.WebControls.Button' as opposed to the actual text. I tried putting Text = "Button1.Value" and Text = "Button1.Text" - but neither of these worked.

Jim W Over a year ago

@Is101 that edit is confusing because your Button ID is the same as the variable Button1. Go back to using Btn1, or just use Button1.Text = (dt.Rows[0][0]).ToString(); and forget about the databinding. If you're still stuck please update with complete code so we're on the same page.

Jim W Over a year ago

I think you're essentially setting the button text to the button object itself, that's what I'm trying to say.

Jim W Over a year ago

@Is101 You can do method #1 from your post, but you must call Page.DataBind(). I will add a full example to my answer

PopGlintz · Accepted Answer · 2018-10-30 09:06:27Z

1

Use the name of the ID of each button instead and include an attribute .Text as shown below:

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

answered Oct 30, 2018 at 9:06

PopGlintz

415 bronze badges

2 Comments

Hans Keﬆing Over a year ago

@ls101 when you assign a value to Button1.Text (where "Button1" is the ID of the runat=server button), you don't need/want any databinding expressions to overwrite those values. So it should work with just Text=" "

Juniar Over a year ago

@Is101, you might need to use a loop. To go through the entire Array while inserting data at the right place to the corresponding buttons. I.e Button.text, Button.label etc.

Collectives™ on Stack Overflow

Pass C# Variable to HTML Button

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related