Friday, 4 August 2017

How to design a web forms in ASP.Net?

This is the continue part of the previous post because we are learning about how to perform CRUD operations ASP.Net.
In previous part we create the database table and in this post we design a web form and write the code for save the data into SQL Server.

Open the visual studio 2015 and Click on File => New => website  as shown in fig below.


Select ASP.Net Empty Website and write the name for website like here we used name as ExampleASp and click ok.


Go to Tools => Solution explorer and wright click on it and Add new Item like the fig. below.
Select Web Forms and Click on Add button.


New web form frmRegistration.aspx  is open. Now design the forms by which we can save the records.

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="First Name"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtFirstName" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label2" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
              <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" Text="Last Name"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtLastName" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label4" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>

             <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" Text="User Name"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtUserName" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label6" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
             <tr>
                <td>
                    <asp:Label ID="Label7" runat="server" Text="Password"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtPassword" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label8" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
             <tr>
                <td>
                    <asp:Label ID="Label13" runat="server" Text="Gender"></asp:Label>
                </td>
                 <td>
                     <asp:RadioButton ID="rbMale" Text="Male" GroupName="xyz" runat="server" />
                     <asp:RadioButton ID="rbFemale" Text="Female" GroupName="xyz" runat="server" />
                </td>
                <td>
                    <asp:Label ID="Label14" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label15" runat="server" Text="DOB"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtDob" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label16" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
               <tr>
                <td>
                    <asp:Label ID="Label9" runat="server" Text="Email Address"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtEmailAddress" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label10" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label11" runat="server" Text="Phone"></asp:Label>
                </td>
                 <td>
                     <asp:TextBox ID="txtPhone" Width="200px" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label12" runat="server" Text="*" style="color:red"></asp:Label>
                </td>
            </tr>

            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Register" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body> 

Note :- In radio button Define the group name whatever you need but group name should be same for both radio buttons ... Here we use xyz for group name...

The design view is given Below.


You can Apply more CSS on it for look and feel.


No comments:

Post a Comment

Creating First WEB API Project from scratch ?

  For creating Web API project open your Visual Studio Editor and Create New Project as shown in below figure. Now you have to select  ASP.N...