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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.