使用Visual Studio 2013 从头构建Web表单

在这篇文章中，我将采取VS 2013中特定的模板，也就是没有身份验证的Web表单模板，并说明如何构建这个项目从头开始。在本教程的最后，你会最终有一个模板，内容几乎是一样的使用Web表单模板没有认证（文件>新建项目> ASP.NET Web应用程序（Visual C＃中创建一个新的VS 2013项目）> Web窗体>无身份验证）。

步骤来创建Web窗体（无验证）项目从头开始

1.新建空项目

我们先从最简单的网页模板：打开Visual Studio，文件>新建项目> ASP.NET Web应用程序（Visual C＃中），并为您的项目名称（例如：WebFormsNoAuth）。 在ASP.NET项目创建对话框中，选择“空”模板，无需任何额外的选项并点击OK。

2.添加基本的主内容页

一。 安装的NuGet包：引导

· 打开的NuGet包管理器UI或控制台窗口，安装包“引导”。

· 需要注意的是，因为这会自动拉低其依赖的NuGet包：jQuery的

· 你可以点击这里阅读有关造型和使用引导主题化网站的优势 。

B。 加入基本的母版页和内容页到您的网站

· 接下来我们添加的基本母版页的Site.Master和内容页： Default.aspx的 ， About.aspx 和Contact.aspx

Ç。 添加Site.css和风格使用引导和Site.css页面

· 请注意，这是很容易做到的造型与引导 - 你只需要引导文件在您的项目（由引导的NuGet包安装），然后引用bootstrap.css和jQuery / bootstrap.js中的Site.Master。

· 然后，我们使用许多引导CSS类做类似的Site.Master页面样式（如：导航栏，导航栏崩溃）和Default.aspx的（如：COL-MD-4，BTN）。

· 我们还增加了一个Site.css添加一些自定义样式。 您也可以在Site.css添加样式覆盖引导已经定义的样式。这样一来，如果在未来的更新引导版本，在Site.css您的覆盖仍然存在。

ð。 添加的favicon.ico

· 我们增加了一个文件的favicon.ico许多浏览器将使用在地址栏或浏览器选项卡显示下一到您的网站的URL。

在这个阶段结束时，你可以试着F5您的项目，看到你有一个全功能的Web应用程序的基本页面。 该页面风格与引导，并响应不同的浏览器大小。 该项目是用干净的相当简单的Web.config文件 ，并在短短2的NuGet包packages.config ：引导和jQuery。

您可以在此阶段，在Git的回购查看完整的代码在这里 。

3.添加友好的URL

当您在浏览器中查看喜欢Contact.aspx一个页面，你可以看到扩展名“的.aspx”仍然显示在URL的结尾（例如：HTTP：//本地主机：14480 / Contact.aspx）。 我们可以改变这个生成无扩展友好的URL，并通过ASP.NET友好的URL路由添加到您的Web应用程序（类似于MVC项目）。

ASP.NET友好的URL也添加视图切换功能的移动视图和桌面视图之间让您轻松。

为了使我们的应用友好的URL：

一。 安装的NuGet包：Microsoft.AspNet.FriendlyUrls

· 打开的NuGet包管理器UI或控制台窗口，安装包“Microsoft.AspNet.FriendlyUrls”

· 请注意，这个自动拉低其依赖的NuGet包：Microsoft.AspNet.FriendlyUrls.Core

· 如果你没有一个现有的RouteConfig类（比如在我们的项目），新RouteConfig.cs文件将得到为您添加。如果你已经有一个现成RouteConfig类在你的项目，你应该叫EnableFriendlyUrls（）在你的RegisterRoutes方法* *前的任何现有路由注册。

· 它会自动添加一个Site.Mobile.Master和ViewSwitcher.ascx用户的控制，以帮助您轻松添加移动视图用于Web窗体项目。

·

B。 添加Global.asax中并调用RouteConfig.RegisterRoutes方法

现在，您可以再次F5项目，看到的网站使用ASP.NET路由和网址显示没有.aspx扩展名（如：HTTP：//本地主机：14480 /联系方式）。 您也可以修正内容中的Site.Master的链接，引用友好的URL来代替。

您可以在此阶段，在Git的回购查看完整的代码在这里 。

4.缩小网页优化技巧

捆绑和缩小两种网络优化技术，您可以在ASP.NET 4.5使用改善的要求加载时间。 捆绑和缩小 ，减少请求到服务器的数量，减少请求的资产（如CSS和JavaScript的规模提高了加载时间）。 您还可以了解更多关于加入捆绑和缩小到Web窗体 。

为使捆绑和缩小在我们的应用程序：

一。 安装的NuGet包：Microsoft.AspNet.Web.Optimization.WebForms

· 打开的NuGet包管理器UI或控制台窗口，安装包“Microsoft.AspNet.Web.Optimization.WebForms”

· 请注意，这个自动拉下几个相关的NuGet包：Microsoft.Web.Infrastructure，ANTLR的，Newtonsoft.Json，WebGrease，Microsoft.AspNet.Web.Optimization，

· Web.config文件被更新到新的组件添加到您的应用程序

B。 在CSS文件中设置捆绑

· 添加Bundle.config文件到您的项目，并定义CSS捆绑

· 在System.Web.Optimization命名空间添加到web.config中

· 替换的Site.Master的CSS引用与webopt：BundleReference控制

在这个阶段，如果F5查看网页在浏览器，并使用F12工具来检查HTTP请求，你会看到，CSS文件没有捆绑呢。

Ç。 打开捆绑和缩小

· 要打开捆绑和缩小，你可以简单地通过调试属性设置为false在web.config中这样做

· 另外，您也可以通过在BundleTable类EnableOptimizations属性设置覆盖Web.config文件。 所以，如果你想打开捆绑和缩小与调试= true，那么一加BundleConfig.cs文件，用下面的代码到你的App_Start文件夹。

· 然后，您需要更新Global.asax中调用BundleConfig.RegisterBundles 

在这个阶段，如果F5查看网页在浏览器，并使用F12工具来检查HTTP请求，你会看到，CSS文件现在捆绑和缩小的。

您可以在此阶段，在Git的回购查看完整的代码在这里 。

5.使用ScriptManager控件与网络优化

该ScriptManger控制在ASP.NET 4.5使得它更容易注册，管理和使用ASP.NET WebOptimization功能相结合的脚本。

使用jQuery和Bootstrap易于集成

随着ScriptManager控件，您可以享受各种福利，如：

• 调试/发布支持
• CDN支持
• 覆盖脚本映射
• 轻松升级的Jquery /引导库

下面是步骤ScriptManager控件添加到应用程序：

一。 安装的NuGet包：AspNet.ScriptManager.jQuery

· 打开的NuGet包管理器UI或控制台窗口，安装包“AspNet.ScriptManager.jQuery”

· 请注意，此更新jQuery来匹配的版本

B。 安装的NuGet包：AspNet.ScriptManager.bootstrap

· 打开的NuGet包管理器UI或控制台窗口，安装包“AspNet.ScriptManager.bootstrap”

Ç。 在更新的Site.Master参考使用ScriptManager控件

·

重映射框架脚本

在ASP.NET 4.5的一个特点是“微软的Ajax脚本文件（MicrosoftAjaxCore等）”等的WebForms脚本（GridView.js等）的脱钩。 你可以为这些脚本从应用程序文件夹中的脚本，而不是负载，然后从System.Web程序。 这使得脚本很容易可再分发和更新。

按照以下步骤重新映射框架脚本。 参见“重映射框架脚本”部分在这里查找有关此功能的更多详细信息。

一。 安装的NuGet包：AspNet.ScriptManager.MSAjax

· 打开的NuGet包管理器UI或控制台窗口，安装包“AspNet.ScriptManager.MSAjax”

· 这在本地安装的应用程序的Scrips \的WebForms \ MSAjax文件夹中的脚本

B。 安装的NuGet包：AspNet.ScriptManager.WebForms

· 打开的NuGet包管理器UI或控制台窗口，安装包“AspNet.ScriptManager.WebForms”

· 这在本地安装的应用程序的Scrips \文件夹中的WebForms脚本

Ç。 已安装的js文件添加到BundleConfig.cs捆绑，然后从引用的的Site.Master捆绑。

您可以在此阶段，在Git的回购查看完整的代码在这里 。

6.添加Modernizr的HTML和CSS功能检测

Modernizr的是特征检测HTML5 / CSS3的一个小的JavaScript库。

一。 安装的NuGet包：Modernizr的

· 打开的NuGet包管理器UI或控制台窗口，安装包“Modernizr的”

· 这增加了Modernizr的 - *。js文件在应用程序的脚本文件夹中

B。 已安装的js文件添加到BundleConfig.cs捆绑，然后从引用的的Site.Master捆绑。

·

7.对于像IE8这样旧的浏览器添加更好的支持

您可以使用Respond.js提供HTML5元素和CSS 3媒体查询提供更好的支持在旧的浏览器如IE 8及以下。

一。 安装的NuGet包：响应

· 打开的NuGet包管理器UI或控制台窗口，安装包“响应”

· 这增加了respond.js和respond.min.js文件在应用程序的脚本文件夹中

B。 已安装的js文件添加到BundleConfig.cs捆绑，然后从引用的的Site.Master捆绑。

·

8.添加_references.js更好的智能感知

最后，你可以添加一个_references.js在脚本文件夹中。 这使得VS提供JS智能感知，当你在编辑这些文件。 用VS 2013年，我们增加了一个叫做自动同步的新功能。 启用此功能（如下图所示），当你一个新的JS文件添加到您的项目，它会自动添加在_references.js文件给你一个条目。

总结

好了，这篇文章有点长，但我希望这篇文章是非常有用的，你了解一些不同的技术，你可以利用使用ASP.NET。