binding asp.net web forms textbox and drop down list to label

I'm using Visual Studio 2013.

I have a regular ASP.NET Web Forms page.

This is my code I have currently:

TestPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>

    <style type="text/css">
        /*********** Wizard Style ***********/
        body{
            background-color: #0c5750;
            color: #ffffff;
            font-family: Arial;
        }
        .ContainerDiv {
            background-color: #dbdbdb;
            width: 600px;
            height: 300px;
            margin: 130px auto 0 auto;
        }

        .StepDiv {
            background-color: #ffffff;
            width: 550px;
            height: 100px;
        }

        .TableStep1Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .TableStep2Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .TableStep3Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .StepTitleText {
            font-family: Arial;
            font-weight: bold;
            font-size: 16px;
            color: #000000;
        }
        .TextBlueStyle {
            font-family: Arial;
            font-weight: normal;
            font-size: 16px;
            color: #0000ff;
        }
        .CompletedText {
            font-family: Arial;
            font-weight: normal;
            font-size: 12px;
            color: #000000;
        }
        .col1{
            width: 10%;
            /*border: 1px solid #4800ff;*/
        }
        .col2{
            width: 40%;
            /*border: 1px solid #11e50f;*/
            text-align: center;
        }
        .col3{
            width: 40%;
            /*border: 1px solid #ff00dc;*/
            text-align: center;
        }
        .col4{
            width: 10%;
            /*border: 1px solid #00ffff;*/
            text-align: center;
        }
        /*********** Wizard Style ***********/

    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $().ready(InitializeWizard);
        function InitializeWizard() {
            $(".StepDiv").hide();
            $("#Step1").show();
        }
        function Step1OK() {
            $("#Step1").hide();
            $("#Step2").show();
        }
        function Step2OK() {
            $("#Step2").hide();
            $("#StepComplete").show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ContainerDiv">
        <!-- *********** step 1 *********** -->
        <div id="Step1" class="StepDiv">
            <table id="TableStep1" class="TableStep1Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Step 1</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2">
                        <asp:Label ID="LabelStep1" runat="server" Text="Type your First Name:" CssClass="TextBlueStyle"></asp:Label>
                    </td>
                    <td class="col3">
                        <asp:TextBox ID="TextBoxFirstName" runat="server"></asp:TextBox>
                    </td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2"></td>                    
                    <td class="col3">
                        <%--call function Step10K--%>
                        <asp:Button ID="ButtonNext" runat="server" Text="Next" OnClientClick="Step1OK(); return false;" />
                    </td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
        <!-- *********** step 2 *********** -->
        <div id="Step2" class="StepDiv">
            <table id="TableStep2" class="TableStep2Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Step 2</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><asp:Label ID="LabelStep2" runat="server" Text="Pick your favorite language:" CssClass="TextBlueStyle"></asp:Label></td>                    
                    <td class="col3">
                        <asp:DropDownList ID="DDLFavorite" runat="server">
                            <asp:ListItem>C#</asp:ListItem>
                            <asp:ListItem>Visual Basic</asp:ListItem>
                            <asp:ListItem>CSS</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2">
                        <%-- call function InitializeWizard --%>
                        <asp:Button ID="Button1" runat="server" Text="Back" OnClientClick="InitializeWizard(); return false;" />
                    </td>
                    <td class="col3">
                        <%-- call function Step2OK --%>
                        <asp:Button ID="ButtonFinish" runat="server" Text="Finish" OnClientClick="Step2OK(); return false;" OnClick="ButtonFinish_Click" />
                    </td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
        <!-- *********** step 3 *********** -->
        <div id="StepComplete" class="StepDiv">
            <table id="TableStep3" class="TableStep3Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Thank You</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"> </td>                        
                    <td class="col2"><span class="CompletedText">Your first name is:</span></td>
                    <td class="col3"><asp:Label ID="LabelResultFirstName" runat="server" Text="Label"></asp:Label></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"> </td>
                    <td class="col2"><span class="CompletedText">Your favorite language is:</span></td>
                    <td class="col3"><asp:Label ID="LabelResultLanguage" runat="server" Text="Label"></asp:Label></td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
    
    </div>
    </form>
</body>
</html>

Open in new window


TestPage.aspx.cs

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

public partial class TestPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void ButtonFinish_Click(object sender, EventArgs e)
    {
        // set value of the FirstName TextBox to Label on Completed Page
        LabelResultFirstName.Text = TextBoxFirstName.Text;

        // set value of the Favorite Language DDL to Label on Completed Page
        LabelResultLanguage.Text = DDLFavorite.SelectedValue;
    }
}

Open in new window


When I run my page I get this:

step 1
After I type my next and then click Next I get this:

step 2
So then in step 2 if I select an item from the drop down and click Finish I get this:

completed div
On this last section I have two red labels.
I want the labels to display the value from the FirstName textbox I chose in step 1 and  the value of the DropDownList that I chose in step 2.

I did the binding in the C# code.
But I don't think I did it correctly. Because it's not working.
Is it better to do it with JavaScript or C#? How would i do it either way?

Any ideas of what I'm doing wrong?

So if I chose the items in the pictures above then my labels on the thank you div should show this:

Your first name is:         Joe
Your favorite language is:   Visual Basic
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Russ SuterCommented:
The issue is the page lifecycle is getting in your way.

Alter your page_Load method as follows:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                // set value of the FirstName TextBox to Label on Completed Page
                LabelResultFirstName.Text = TextBoxFirstName.Text;

                // set value of the Favorite Language DDL to Label on Completed Page
                LabelResultLanguage.Text = DDLFavorite.SelectedValue;
            }
        }

Open in new window

0
 
maqskywalkerAuthor Commented:
I revised my code to the following

TestPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>

    <style type="text/css">
        /*********** Wizard Style ***********/
        body{
            background-color: #0c5750;
            color: #ffffff;
            font-family: Arial;
        }
        .ContainerDiv {
            background-color: #dbdbdb;
            width: 600px;
            height: 300px;
            margin: 130px auto 0 auto;
        }

        .StepDiv {
            background-color: #ffffff;
            width: 550px;
            height: 100px;
        }

        .TableStep1Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .TableStep2Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .TableStep3Style {
            width: 100%;
            height: 100%;
            border: 1px solid;
            color: #ff0000;
        }

        .StepTitleText {
            font-family: Arial;
            font-weight: bold;
            font-size: 16px;
            color: #000000;
        }
        .TextBlueStyle {
            font-family: Arial;
            font-weight: normal;
            font-size: 16px;
            color: #0000ff;
        }
        .CompletedText {
            font-family: Arial;
            font-weight: normal;
            font-size: 12px;
            color: #000000;
        }
        .col1{
            width: 10%;
            /*border: 1px solid #4800ff;*/
        }
        .col2{
            width: 40%;
            /*border: 1px solid #11e50f;*/
            text-align: center;
        }
        .col3{
            width: 40%;
            /*border: 1px solid #ff00dc;*/
            text-align: center;
        }
        .col4{
            width: 10%;
            /*border: 1px solid #00ffff;*/
            text-align: center;
        }
        /*********** Wizard Style ***********/

    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $().ready(InitializeWizard);
        function InitializeWizard() {
            $(".StepDiv").hide();
            $("#Step1").show();
        }
        function Step1OK() {
            $("#Step1").hide();
            $("#Step2").show();
        }
        function Step2OK() {
            $("#Step2").hide();
            $("#StepComplete").show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ContainerDiv">
        <!-- *********** step 1 *********** -->
        <div id="Step1" class="StepDiv">
            <table id="TableStep1" class="TableStep1Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Step 1</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2">
                        <asp:Label ID="LabelStep1" runat="server" Text="Type your First Name:" CssClass="TextBlueStyle"></asp:Label>
                    </td>
                    <td class="col3">
                        <asp:TextBox ID="TextBoxFirstName" runat="server"></asp:TextBox>
                    </td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2"></td>                    
                    <td class="col3">
                        <%--call function Step10K--%>
                        <asp:Button ID="ButtonNext" runat="server" Text="Next" OnClientClick="Step1OK(); return false;" />
                    </td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
        <!-- *********** step 2 *********** -->
        <div id="Step2" class="StepDiv">
            <table id="TableStep2" class="TableStep2Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Step 2</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><asp:Label ID="LabelStep2" runat="server" Text="Pick your favorite language:" CssClass="TextBlueStyle"></asp:Label></td>                    
                    <td class="col3">
                        <asp:DropDownList ID="DDLFavorite" runat="server">
                            <asp:ListItem>C#</asp:ListItem>
                            <asp:ListItem>Visual Basic</asp:ListItem>
                            <asp:ListItem>CSS</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"></td>
                    <td class="col2">
                        <%-- call function InitializeWizard --%>
                        <asp:Button ID="Button1" runat="server" Text="Back" OnClientClick="InitializeWizard(); return false;" />
                    </td>
                    <td class="col3">
                        <%-- call function Step2OK --%>
                        <asp:Button ID="ButtonFinish" runat="server" Text="Finish" OnClientClick="Step2OK(); " OnClick="ButtonFinish_Click" />
                    </td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
        <!-- *********** step 3 *********** -->
        <div id="StepComplete" class="StepDiv">
            <table id="TableStep3" class="TableStep3Style">
                <tr>
                    <td class="col1"></td>
                    <td class="col2"><span class="StepTitleText">Thank You</span></td>
                    <td class="col3"></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"> </td>                        
                    <td class="col2"><span class="CompletedText">Your first name is:</span></td>
                    <td class="col3"><asp:Label ID="LabelResultFirstName" runat="server" Text="Label"></asp:Label></td>
                    <td class="col4"></td>
                </tr>
                <tr>
                    <td class="col1"> </td>
                    <td class="col2"><span class="CompletedText">Your favorite language is:</span></td>
                    <td class="col3"><asp:Label ID="LabelResultLanguage" runat="server" Text="Label"></asp:Label></td>
                    <td class="col4"></td>
                </tr>
            </table>
        </div>
        <!-- ****************************** -->
    
    </div>

        <br /><br /><br /><br />
        <asp:Label ID="TestLabel2" runat="server" Text="Label"></asp:Label>
        <br /><br />
        <asp:Label ID="TestLabel3" runat="server" Text="Label"></asp:Label>
    </form>
</body>
</html>

Open in new window


TestPage.cs

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

public partial class TestPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            // set value of the FirstName TextBox to Label on Completed Page            
            LabelResultFirstName.Text = TextBoxFirstName.Text;
            TestLabel2.Text = TextBoxFirstName.Text;

            // set value of the Favorite Language DDL to Label on Completed Page
            LabelResultLanguage.Text = DDLFavorite.SelectedValue;
            
            TestLabel3.Text = DDLFavorite.SelectedValue;                     
            
        }

    }
    protected void ButtonFinish_Click(object sender, EventArgs e)
    {
        //// set value of the FirstName TextBox to Label on Completed Page
        LabelResultFirstName.Text = TextBoxFirstName.Text;



        //// set value of the Favorite Language DDL to Label on Completed Page
        LabelResultLanguage.Text = DDLFavorite.SelectedValue;
        
    }
}

Open in new window


I think the issue is that when is the click event of the ASP Finish button. I had set the Finish ASP button OnClick property to this in my initial post like this.

OnClick="ButtonFinish_Click return false;"


So now i'm trying it like this:

OnClick="ButtonFinish_Click"


And now I placed 2 test labels on my page outside of my last div that shows the results. Its the div called id="StepComplete"

When I run this page I get this.  When I click finish the labels outside the div called id="StepComplete" show correct values but the div called id="StepComplete" doesn't show up now.

run after revision
Any idea of how to fix my current revision so the div called id="StepComplete" shows after I click Finish and the labels inside this div also show the value just like the labels I placed outside the container div do?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.