Working With User Interface of ASP.Net Web Forms

Introduction

Today, you'll learn to work with the User Interface of an ASP.NET Web Forms Application. As I mentioned in Working with DAL you can create the DAL for your Web Forms Application, therefore here I am working on my application home page.

You can create dynamic content in ASP.NET Web Forms applications. It is as similar to static web pages but here you will find that there are extra elements added in the application page.

When a static HTML page runs, the server fulfills the requirement and after reading the file it is sent to the browser and in the case of an ASP.NET Web Page, the page runs as a program on the web server. You can perform various tasks such as calculating values, reading or writing a database or calling methods while running the web page.

Modifying the UI

Step 1:  Open your Default.aspx page.

Step 2: Modify the @Page directive as follows:

<%@ Page Title="Welcome Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsApplication._Default" %>

 

Step 3: Modify the content in the Content Place Holder as follows:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

 

    <div class="jumbotron">

        <h1>Best Cricketers</h1>

        <p class="lead">Here you will find the best cricketers from around the world of all time.</p>

    </div>

 

    <div class="row">

        <div class="col-md-4">

            <h2>Sacnhin Tendulkar</h2>

            <p>

                Sachin Tendulkar full name is Sachin Ramesh Tendulkar. He was play generally for Team India. Sachin was known as Master Blaster.

            </p>

           

        </div>

        <div class="col-md-4">

            <h2>Saurav Ganduly</h2>

            <p>

Saurav Gabguly full name is Sachin Chandidas Ganguly. He was play generally for Team India. Saurav was known as Bangal Tiger (Dada).</p>

           

        </div>

        <div class="col-md-4">

            <h2>Rahul Dravid</h2>

            <p>

Rahul Dravid full Rahul Sharad Dravid. He was play generally for Team India. Rahul was known as The Wall.</p>

           

        </div>

    </div>

 

</asp:Content>

Step 4: Save the Default.aspx page from the File menu.

Modifying Master Page

Step 1: Open the Site.Master page.

Step 2: Modify the title as follows:

<title><%: Page.Title %> - Best Cricketers</title>

Step 3: Modify the link elements as follows:

<ul class="nav navbar-nav">

    <li><a runat="server" href="~/">Home</a></li>

    <li><a runat="server" href="~/About">About</a></li>

    <li><a runat="server" href="~/Contact">Contact</a></li>

    <li><a runat="server" href="Cricketer.aspx">Cricketer</a></li>

</ul>

Step 4: Modify the footer element.

<footer>

    <p>&copy; <%: DateTime.Now.Year %> - My Best Cricketers</p>

</footer>

Step 5: See the changes in the screenshot below:

Summary

This article will help you to edit the Web Forms application home page, master page. You can also see the navigation to other web pages . Thanks for reading.