使用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的

· 你可以点击这里阅读有关造型和使用引导主题化网站的优势
使用Visual Studio 2013 从头构建Web表单

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

· 接下来我们添加的基本母版页的Site.Master和内容页: Default.aspx的About.aspxContact.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窗体项目。

· 使用Visual Studio 2013 从头构建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文件被更新到新的组件添加到您的应用程序
使用Visual Studio 2013 从头构建Web表单

B。 在CSS文件中设置捆绑

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

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

· 替换的Site.Master的CSS引用与webopt:BundleReference控制
使用Visual Studio 2013 从头构建Web表单
在这个阶段,如果F5查看网页在浏览器,并使用F12工具来检查HTTP请求,你会看到,CSS文件没有捆绑呢。
使用Visual Studio 2013 从头构建Web表单

Ç。 打开捆绑和缩小

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

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

· 然后,您需要更新Global.asax中调用BundleConfig.RegisterBundles 
使用Visual Studio 2013 从头构建Web表单
在这个阶段,如果F5查看网页在浏览器,并使用F12工具来检查HTTP请求,你会看到,CSS文件现在捆绑和缩小的。
使用Visual Studio 2013 从头构建Web表单

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

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

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

使用jQueryBootstrap易于集成

随着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控件

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

重映射框架脚本

在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捆绑。

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

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

6.添加ModernizrHTMLCSS功能检测

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

一。 安装的NuGet包:Modernizr的

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

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

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

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

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

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

一。 安装的NuGet包:响应

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

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

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

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

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

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

总结

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

上一篇:获取当前路径 ${pageContext.request.contextPath}


下一篇:Android JNI学习之javah命令的正确使用(找了好半天才找到的,汉,网上好多说法都没用)