Menu

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Friday, 15 July 2016

Creating First sample WebPage Using Asp.net in Text Editor


"First of all I would like to say thank you for your response and cooperation in regards to commenting and following my tutorials,keep going on every one should be rock in Programming filed and a step ahead to reach your goals".
Now I am Going to Create a first web page on text editor in asp.net using C# i.e.Notepad environment with following resources and setup this website in IIS .
Example:
D:\ - Physical Location on the Server Machine

SampleWebSite – Website Folder

Images - Folder-->place a image for header

firstpage.aspx- UI

firstpage.aspx.cs– Code File

let's see the UI design using server controls,

Firstpage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="firstpage.aspx.cs" Inherits="aspsample.firstpage" %>

<!DOCTYPE html>

<html>

<head runat="server">

    <title>ASP.NET Web Site</title>

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css' />
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 12px;
        }

        .content {
            width: 65%;
            margin: 0 auto;
            padding: 5%;
        }

        .maincontent {
            width: 90%;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        function validate() {

            var firstName = document.getElementById("TextBox1").value;

            var lastName = document.getElementById("TextBox2").value;

            var error = "";

            if (firstName == "")

                error += "Please Enter First Name" + "\n";

            if (lastName == "")

                error += "Please Enter Last Name" + "\n";

            if (error != "") {

                alert(error);

                return false;

            }

        }

    </script>
</head>
<body style="background-color: Azure">

    <form id="form1" runat="server">

        <div class="maincontent">

            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/aspire_new.png" Width="100%"
                Height="150" AlternateText=".Net Aspires" ToolTip="Image Banner" BorderStyle="Solid"
                BorderWidth="2" BorderColor="Blue" />

            <marquee direction="right" style="background-color: #003366; color: #c08041; font-size: 23px; border: 2px solid #0c1823">

<h1>Welcome to ASP.NET Web Site</h1>

</marquee>

            <hr />

            <div class="content">

                <asp:Label ID="Label1" runat="server" Text="Enter First Name: " Font-Size="15"
                    ForeColor="#003366" />

                <asp:TextBox ID="TextBox1" runat="server" />

                <br />

                <br />

                <asp:Label ID="Label2" runat="server" Text="Enter Last Name: " Font-Size="15" ForeColor="#003366" />

                <asp:TextBox ID="TextBox2" runat="server" />

                <br />

                <br />

                <asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="return validate();"
                    OnClick="Button1_Click" />

                <br />

                <asp:Label ID="Label3" runat="server" />

            </div>

        </div>

    </form>

</body>

</html>
firstpage.aspx.cs

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

namespace aspsample
{
    public partial class firstpage : System.Web.UI.Page
    {


        protected void Page_Load(object sender, EventArgs e)
        {

            TextBox1.Focus();

        }

        protected void Button1_Click(object sender, EventArgs e)
        {

            string firstName = TextBox1.Text.Trim();

            string lastName = TextBox2.Text.Trim();

            string fullName = firstName + " " + lastName;

            Label3.Text = "<b>Your Name Is: </b>" + fullName;

        }

    }
}

Output:

Now run the page in browser or right click on page --> open with-->any browser . it seems like below image
designview

 Step 1:  click on submit on button with out entering  required fields and see the output.

validating input fileds

 Step 2 :Now  fill the input fields and click on submit button it will display's your firstname and lastname in label field

displaying output


...for more information about previous tutorial please visit this link  ASP.Net Tutorials and
Thank you for visiting my blog ,don't forget to comment on post or else if you want daily updates please follow in Google Plus.

No comments:

Post a Comment