.Netaspires: 2016-07-17

Creating First ASP.NET Website with Visual C# Programming Language in Visual Studio IDE-

In Order to create an ASP.NET Web Application follows these steps:

Steps to Create ASP.Net Web Application:

1. Open Visual Studio 2010/2012/2013

2. Click on Main Menu i.e. File->New->Web Site, It Opens Automatically "New Web Site Templates Window"

3. Select "ASP.Net Empty Web Site" from Templates Section

4. Select appropriate .Net Framework Version such as 4.5.1/4.5/4.0/3.5/3.0/2.0 from top of Window.

5. Select Language as "Visual C#" or "Visual Basic"

6. Select Location as "File System" or "HTTP" or "FTP", and Specify the Web Site Name with Specified path

7. Finally Click Ok Button.

After Clicking Ok button, it creates automatically New Empty Web Site with following Contents (Items):

1. Web.config (Application’s Configuration File) Types of Web Site Project Creation in Visual Studio IDE: Describes different methods Visual Studio can use to access files for Web site projects. Visual Studio can access the files of a Web site project directly in a computer's file system, through IIS on the local computer or a remote computer, or through FTP on a remote computer. The names of Web site project types identify the method used: file-system sites, local or remote IIS sites, and File Transfer Protocol (FTP)–deployed sites.

It describes how files are stored on your Web site, using either file-system based Web sites or those that require Internet Information Services (IIS).You can use Visual Studio to create and work with ASP.NET Web sites (which are also known as Web applications) in a variety of configurations:

1. File-System Sites,

2. HTTP (Local IIS Sites)

3. FTP (File Transfer Protocol) Sites.

File-System Web Site Projects:

In a file-system Web site project, you can create and edit files in any folder, whether on your local computer or in a folder on another computer that you access over a network. You are not required to run IIS on your computer. Instead, you can test pages by using the Visual Studio Development Server. You can create a file-system Web site project and later create an IIS virtual directory that points to the folder containing your pages.

HTTP (Local IIS Sites):

You test local IIS Web site projects using a copy of IIS that is installed on your computer. When you create a local IIS Web site project, the pages and folders for your site are stored in a folder under the default IIS folder for Web sites, which is located at [drive]:\Inetpub\wwwroot. Visual Studio also creates the appropriate IIS configuration so that the Web site is recognized by IIS as an application.

Note: To create a local IIS Web site project, you need to have administrative privileges on the computer.

For Example:

1. Web Location: File System

Physical Path:

C:\Users\Rakesh\Documents\Visual Studio 2012\WebSites\WebSiteFileSystemsample

2. Web Location: HTTP

Virtual Path:

http://localhost/WebSiteHttpsample

Physical Path:

C: /Inetpub/wwwroot/WebSiteHttpsample

Creating a New Web Form:

To create a new web form, Open solution explorer, right click application root, select Add -> Add New Item,it opens automatically new window i.e. “Add New Template”, in which select Language as "Visual C#" at the left side, and choose Template as "Web Form, and accept the default name i.e. "Default.aspx" or change it as per need, and then finally click Add Button.

A Web Form will be created with following two files:

Note: By Default ASP.Net supports separation of UI and Code for any Web Form (.aspx page), it is called "Code-Behind Model".Default.aspx or we can say any of the Web Form by default created with following markup in the source view.

Default.aspx:

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

<!DOCTYPE html>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Defaults.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace newasp

{

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

The ASP.NET Page Structure Options:

ASP.NET provides two paths for structuring the code of our ASP.NET pages.The first path utilizes the code-inline model. This model should be familiar to classic ASP 2.0/3.0 developers because all the code is contained within a single .aspx page. The second path uses ASP.NET’s code-behind model, which allows for code separation of the page’s business logic from its presentation logic. In this model, the presentation logic for the page is stored in an .aspx page, whereas the business logic piece is stored in a separate class file: .aspx.vb or .aspx.cs.

Using the code-behind model is considered the best practice because it provides a clean model in separation of pure UI elements from code that manipulates these elements. It is also seen as a better means in maintaining code.

Code Inline Model:

Inline Code refers to the code that is written inside an ASP.NET Web Page that has an extension of .aspx.It allows the code to be written along with the HTML source code using a <script runat=”server”> tag. Its major point is that since it's physically in the .aspx file it's deployed with the Web Form page whenever the Web Page is deployed.

You can say, In-line code is code that is embedded directly within the ASP.NET page (.aspx page).To build an ASP.NET page inline instead of using the code-behind model, we simply select the page type from the Add New Item dialog and make sure that the “Place Code in Separate File” check box is not selected. You can get at this dialog by right clicking the project or the solution in the Solution Explorer and selecting Add -> Add New Item.

From here (Add New Item dialog), we can see the check box, we need to unselect if we want to build our ASP.NET pages inline code model.

Example: The following code represents a simple page that uses the inline coding model:

Default.aspx:

Design view:

<%@ Page Language="C#" %>

<!DOCTYPE html>

protected void Page_Load(object sender, EventArgs e)

{

txtValue1.Focus();

}

void Calc(string op)

{

lblStatus.Text = string.Empty;

txtResult.Text = string.Empty;

try

{

float value1 = float.Parse(txtValue1.Text.Trim());

float value2 = float.Parse(txtValue2.Text.Trim());

float result = 0;

switch (op)

{

case "+":

result = value1 + value2;

break;

case "-":

result = value1 - value2;

break;

case "*":

result = value1 * value2;

break;

case "/":

if (value2 == 0)

throw new DivideByZeroException("You can't divide by zero!!!");

result = value1 / value2;

break;

}

txtResult.Text = result.ToString();

}

catch (FormatException ex1)

{

lblStatus.Text = ex1.Message;

}

catch (OverflowException ex2)

{

lblStatus.Text = ex2.Message;

}

catch (DivideByZeroException ex3)

{

lblStatus.Text = ex3.Message;

}

protected void btnAdd_Click(object sender, EventArgs e)

{

Calc("+");

}

protected void btnSub_Click(object sender, EventArgs e)

{

Calc("-");

}

protected void btnMul_Click(object sender, EventArgs e)

{

Calc("*");

}

protected void btnDiv_Click(object sender, EventArgs e)

{

Calc("/");

}

</script>

function validate() {

var value1 = document.getElementById("txtValue1").value;

var value2 = document.getElementById("txtValue2").value;

var error = "";

if (value1 == "")

error += "Please Enter Value1" + "\n";

if (value2 == "")

error += "Please Enter Value2" + "\n";

if (error != "") {

alert(error);

return false;

}

</script>

</head>

<body>

<h3 style="text-align: center; color: maroon">Inline Code Model Example

</h3>

<b>Enter Value1:</b><asp:TextBox ID="txtValue1" runat="server" />

<br />

<b>Enter Value2:</b><asp:TextBox ID="txtValue2" runat="server" />

<br />

<asp:Button ID="btnAdd" runat="server" Text="Add" OnClientClick="return validate();"

OnClick="btnAdd_Click" />

<asp:Button ID="btnSub" runat="server" Text="Sub" OnClientClick="return validate();"

OnClick="btnSub_Click" />

<asp:Button ID="btnMul" runat="server" Text="Mul" OnClientClick="return validate();"

OnClick="btnMul_Click" />

<asp:Button ID="btnDiv" runat="server" Text="Div" OnClientClick="return validate();" OnClick="btnDiv_Click" />

<br />

<b>Result:</b><asp:TextBox ID="txtResult" runat="server" ReadOnly="true" />

<br />

<asp:Label ID="lblStatus" runat="server" ForeColor="Red" />

</div>

</form>

</body>

</html>

Output: To run the Page on server Press Ctrl+f5 or F5,you will see the below output

Step1: now Click on any one button it validates the inputs by showing an alert..

Step3: Enter the value1 and value2 with out fail .

Step4: click on addbutton ,then observe the result below ..

Step5: click on subbutton ,then observe the result below ..

Step6: click on Mulbutton ,then observe the result below ..

Step7: click on Divbutton ,then observe the result below ..

Step8: enter the values like shown in below and cliks on div button see the ouput.

...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.

Menu

Wednesday, 20 July 2016

Creating First ASP.NET Website with Visual studio in Inline code model