ASP.Net build in codes such as drag and drop from the toolbox to web form or even from the opening is complicated for the first time user. However, as we go along and focus what’s behind the code in every line it makes you think how you are going to align every label, text box, button, etc. that comes from the toolbox. There are different ways how you are going to work with, such as table. However, Cascading Style Sheet (CSS) is most interesting way to align, emphasize your text, label, background, and a lot more. Visit w3shcools.com for more information about CSS.
Now, let’s look how to align label and text box in ASP.Net using C Sharp (C#) 2010.
Open your Visual Studio 2010 – New Project >select Visual C# language > Web and choose ASP.NET Empty Web Application and name it My First Web Site.
Next, in your solution explore right click My First Web Site which is the name of your website and click Add new item, Select Web Form and name it Home.aspx.
Here is the code generated of your Home.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="My_First_Web_Site.Home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
We are going to split. Your form looks like this.
Add the following CSS code after the </title> closing tag until closing tag </head>
<style type="text/css">
.Main
{
background-color: white;
margin-left: auto; /* Center mainTable for >= IE6 */
margin-right: auto; /* Center mainTable for >= IE6 */
}
.LeftLabelColumn
{
display: block;
margin-left: 10px;
margin-right: 10px;
height: 22px;
padding-top: 5px;
}
.LeftValueColumn
{
display: block;
margin-left: 10px;
margin-right: 10px;
}
</style>
Your output looks like the following screenshots:
Next, we are going to delete open <div> and close </div>
Delete the highlighted <div> </div> and paste this code.
<div class="Main">
<!-- This label where my output firstname, lastname, middlename, and address are being displayed -->
<asp:Label ID="lblshowmyname" runat="server" CssClass="LeftLabelColumn"
Font-Size="Larger"></asp:Label>
<div style="float: left; border-top: solid 10px white;">
<asp:Label ID="Label1" CssClass="LeftLabelColumn" runat="server"
Text="Firstname"></asp:Label>
<asp:Label ID="Label2" CssClass="LeftLabelColumn" runat="server"
Text="Lastname"></asp:Label>
<asp:Label ID="Label3" CssClass="LeftLabelColumn" runat="server"
Text="Middlename"></asp:Label>
<asp:Label ID="Label4" CssClass="LeftLabelColumn" runat="server" Text="Address"></asp:Label>
</div>
<!-- Because we can't use border-top, margin-top or padding-top on a textbox, we surround the textboxes with div tags -->
<div class ="LeftLabelColumn">
<div style="padding-top: 5px;"><asp:TextBox ID="TextBox1"
CssClass="LeftValueColumn" runat="server"></asp:TextBox></div>
<div style="padding-top: 5px;"><asp:TextBox ID="TextBox2"
CssClass="LeftValueColumn" runat="server"></asp:TextBox></div>
<div style="padding-top: 5px;"><asp:TextBox ID="TextBox3"
CssClass="LeftValueColumn" runat="server"></asp:TextBox></div>
<div style="padding-top: 5px;"><asp:TextBox ID="TextBox4"
CssClass="LeftValueColumn" runat="server" Width="459px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show me"
onclick="Button1_Click" />
</div>
</div>
</div>
Note: make sure paste the code above after this code <form id="form1" runat="server"> and closing </form>
After you paste the code, the final output looks like the following.
The label above displays your firstname, lastname, middlename, and address when your click Show me
Now, we are going to put code in order to display the result in the label. Double click the show me button. The code should looks like the following.
Copy this code:
string fname;
string lname;
string mname;
string address;
fname = TextBox1.Text;
lname = TextBox2.Text;
mname = TextBox3.Text;
address = TextBox4.Text;
lblshowmyname.Text = "Name: " + fname + " " + mname +
". " + lname + " From: " + address;
Finally, your final code looks like:
So, now we are done! Press F5 to run your program. The output runs your browser.
That’s the final output!
great thanks !!!
ReplyDeleteYour welcome, thanks for visiting my sites and I am happy with all you guys for some knowledge you gained at this site. Hope this blog helps you.
ReplyDeleteyes it's very helpful thanks very very thanks sir :'(
ReplyDeleteAlign label and text box details more helpful for me.
ReplyDeleteConvert ASP to ASP.Net