Build a Web Form from scratch using Visual Studio 2013

In this article, I'll take the specific template in VS 2013, which is the Web Form template without authentication, and explain how to build this project from scratch. At the end of the tutorial, you will end up with a template that has almost the same content as the Web Form template without authentication (File > New Project > ASP. Create a new VS 2013 Project in Visual C #) > Web Forms > No authentication).

Steps to create Web form (no validation) project starts from scratch

1. Create a new empty project

Let's start with the simplest page template: Open visual Studio, File > New Project > ASP. NET Web application (in Visual C #), and give your project a name (for example: Webformsnoauth). In the ASP. NET Project Creation dialog box, select the "empty" template, without any additional options and click OK.

2. Add a Basic main content page

One. Installed NuGet Package: Boot

· Open the NuGet Package Manager UI or Console window and install the package "boot".

· It is important to note that because this automatically pulls down its dependent nuget packages: jquery's

· You can click here to read about styling and the advantages of using a guided themed website.

B. Add basic master Pages and content pages to your site

· Next we add the Site.master and content pages of the basic Master page: Default.aspx, About.aspx and contact.aspx

C. Add site.css and styles using the boot and SITE.CSS pages

· Please note that it is easy to do styling with boot-you just need to boot the files in your project (installed by the boot NuGet package) and then refer to the Site.master in Bootstrap.css and Jquery/bootstrap.js.

· We then use many of the bootstrap CSS classes to do similar Site.master page styles (e.g. navigation bar, navigation bar crashes) and default.aspx (e.g. COL-MD-4,BTN).

· We also added a site.css to add some custom styles. You can also add style overrides in Site.css to boot a style that has already been defined. This way, if the updated boot version is in the future, your overlay still exists in site.css.

D. The added Favicon.ico

· We have added a file for Favicon.ico many browsers will use the URL in the Address bar or browser tab to display the next to your site.

At the end of this phase, you can try to F5 your project and see that you have a full-featured Web application on the basic page. The page is styled with a boot and responds to different browser sizes. The project is a fairly simple Web. config file with clean, and in just 2 NuGet packages packages.config: Boot and jquery.

You can view the full code here at this stage in Git repo.

3. Add a friendly URL

When you view a page in the browser like contact.aspx, you can see that the extension ". aspx" is still displayed at the end of the URL (for example://Local Host: 14480/contact.aspx). We can change this. Generate a non-extensible URL and add it to your Web application (similar to an MVC project) via ASP. Net-friendly URL routing.

Asp. The net-friendly URL also adds the view switch feature between the mobile view and the desktop view to make it easy for you.

In order to make our app friendly URLs:

One. Installed NuGet Package: Microsoft.AspNet.FriendlyUrls

· Open the NuGet Package Manager UI or Console window, install package "Microsoft.AspNet.FriendlyUrls"

· Please note that this automatically pulls down its dependent NuGet package: Microsoft.AspNet.FriendlyUrls.Core

· If you do not have an existing routeconfig class (such as in our project), the new RouteConfig.cs file will get added for you. If you already have a ready-made Routeconfig class in your project, you should call Enablefriendlyurls () to register any existing routes before your RegisterRoutes method * *.

· It automatically adds a Site.Mobile.Master and Viewswitcher.ascx user control to help you easily add mobile views for Web Forms projects.

·

B. Add Global.asax and call the Routeconfig.registerroutes method

Now that you can F5 the project again, see that the Web site uses ASP. aspx extension (e.g. http://Local Host: 14480/Contact). You can also fix the Site.master link in the content, referring to the friendly URL instead.

You can view the full code here at this stage in Git repo.

4. reduce web optimization tips

Bundling and narrowing two network optimization techniques, you can use the improved demand load time in ASP. NET 4.5. Bundling and shrinking, reducing the number of requests to the server, reducing the size of requested assets (such as CSS and JavaScript increases load time). You can also learn more about joining bundles and narrowing down to Web forms.

For the bundling and shrinking in our application:

One. Installed NuGet Package: Microsoft.AspNet.Web.Optimization.WebForms

· Open the NuGet Package Manager UI or Console window, install package "Microsoft.AspNet.Web.Optimization.WebForms"

· Please note that This automatically pulls down a couple of related nuget packages: MICROSOFT.WEB.INFRASTRUCTURE,ANTLR, Newtonsoft.json,webgrease,microsoft.aspnet.web.optimization,

· The Web. config file is updated to add new components to your application

B. To set a bundle in a CSS file

· Add a Bundle.config file to your project and define a CSS bundle

· Add a System.Web.Optimization namespace to Web. config

· Replace the Site.master CSS reference with the Webopt:bundlereference control

At this stage, if F5 view the Web page in the browser and use the F12 tool to check the HTTP request, you will see that the CSS file is not bundled.

C. Turn on bundling and shrinking

· To turn on bundling and shrinking, you can simply set the Debug property to False in Web. config to do this

· Alternatively, you can override the Web. config file by setting the Bundletable Class Enableoptimizations property. So if you want to open bundle and zoom out with debug = True, then add the BundleConfig.cs file to your App_start folder with the following code.

· Then, you need to update Global.asax in call Bundleconfig.registerbundles

At this stage, if F5 view the Web page in the browser and use the F12 tool to check the HTTP request, you will see that the CSS file is now bundled and shrunk.

You can view the full code here at this stage in Git repo.

5. using ScriptManager controls and network optimization

The Scriptmanger control in ASP. NET 4.5 makes it easier to register, manage and combine scripts with the ASP. NET Weboptimization feature.

Use JQuery and the Bootstrap Easy Integration

With ScriptManager controls, you can enjoy a variety of benefits, such as:

• Debug/Release Support
• CDN Support
• Overwrite Script Mappings
• Easy-to-upgrade jquery/boot Library

Here is the step ScriptManager control to add to the application:

One. Installed NuGet Package: AspNet.ScriptManager.jQuery

· Open the NuGet Package Manager UI or Console window, install package "AspNet.ScriptManager.jQuery"

· Note that this update is jquery to match the version

B. Installed NuGet Package: AspNet.ScriptManager.bootstrap

· Open the NuGet Package Manager UI or Console window, install package "AspNet.ScriptManager.bootstrap"

C. Using the ScriptManager control in the updated Site.master reference

·

Remap Framework Script

One feature in ASP. 4.5 is the decoupling of the WebForms scripts (gridview.js, etc.) such as Microsoft's Ajax script files (microsoftajaxcore, etc.). You can script these scripts from the application folder, not the payload, and then from the system.web program. This makes it easy to redistribute and update scripts.

Follow the steps below to remap the framework script. See the "Remap Framework Scripts" section here for more details on this feature.

One. Installed NuGet Package: AspNet.ScriptManager.MSAjax

· Open the NuGet Package Manager UI or Console window, install package "AspNet.ScriptManager.MSAjax"

· This is a script in the scrips \ WebForms \ Msajax folder of the locally installed application

B. Installed NuGet Package: AspNet.ScriptManager.WebForms

· Open the NuGet Package Manager UI or Console window, install package "AspNet.ScriptManager.WebForms"

· This WebForms script in the scrips \ folder of the locally installed application

C. The installed JS file is added to the BundleConfig.cs bundle and then bundled from the referenced Site.master.

You can view the full code here at this stage in Git repo.

6. Add Modernizr HTML and CSS feature detection

Modernizr is a small JavaScript library of feature detection HTML5/CSS3.

One. Installed NuGet Package: Modernizr

· Open the NuGet Package Manager UI or Console window, install package "Modernizr"

· This adds to the Modernizr-*. JS file in the application's script folder

B. The installed JS file is added to the BundleConfig.cs bundle and then bundled from the referenced Site.master.

·

7. add better support for older browsers like IE8

You can use Respond.js to provide HTML5 elements and CSS 3 media queries to provide better support in older browsers such as IE 8 and below.

One. Installed NuGet Package: Response

· Open the NuGet Package Manager UI or Console window, install package "response"

· This adds the Respond.js and respond.min.js files in the application's script folder

B. The installed JS file is added to the BundleConfig.cs bundle and then bundled from the referenced Site.master.

·

8. Add _references.js for better IntelliSense

Finally, you can add a _references.js in the Scripts folder. This makes vs offers JS IntelliSense when you are editing these files. With VS 2013, we've added a new feature called Auto-sync. With this feature enabled (as shown), when you add a new JS file to your project, it will automatically add an entry in the _references.js file to you.

Summarize

Well, this article is a bit long, but I hope this article is very useful and you understand some of the different techniques that you can take advantage of using ASP.

Build a Web Form from scratch using Visual Studio 2013