本文目的是帮助您升级现有的ASP.NET项目,以满足当前的HTML5响应式设计需求,并通过消除所有服务器往返行为
使其加快响应速度。 我们试着从页面中消除ViewState,使其在客户端轻量化,并且仅通过服务(Web API)
与后台进行的所有交互。
Part I 步骤
A)创建简单的ASP.NET Forms 应用程序使用bootstrap模板
首先在ASP.NET中创建新的Visual C#项目,并从“新建项目”对话框中选择 “空的Web应用程序”。 单击确定创建新项目。 (VS 2012)
现在是这样:
继续在这个项目中创建Global.asax 文件
右击项目选择"Manage NuGet Package..." 安装JQuery 和 Bootstrap。接下来会创建三个文件Content for CSS ,"fonts" 和 "Scripts" 。
笔记:我喜欢删除所有的.min.* 和.map 文件 在新创建的文件夹,并使用绑定技术来优化web资源(Bundle稍后创建)。另外,在项目中创建一个新的文件"packages.config",我们可以找到所有安装的NuGet软件包及其版本。
警告:如果安装的软件包的版本与package.config文件中指定的软件包版本不匹配,Nuget将无法正常工作。
现在,我们将创建一个主页面(Main.Master),在主体中的"ContentSection"和"关闭"主体标签之前的"ScriptSection"中分别放置了三个"StyleSection"部分。 对于本示例,我们将使用引导模板中的"Navbar"模板。 从浏览器"查看页面源"获取源HTML,并将其放在底部的母版页面中。 使用下载的源替换所需的HTML,并保留HTML以保留其主页面行为。
笔记:这里我们评论了表单标签; 如果需要,我们可以在我们的内容页面中创建表单部分。 现在,我们的主页面如下所示:
创建一个新的内容页面"ContentPage.aspx"。 将Bootstrap模板中的HTML代码(div类别为“jumbotron”)添加到“ContentSection”中。 我们的代码应该是这样的:
设置"ContentPage.aspx"作为起始页;创建并运行这应用程序
Laptop/Tablet View
Mobile View
笔记:如果您查看页面的源代码,则会单独引用.css和.js文件。 当网页上添加大量文件时,这将影响我们的页面加载时间。 要解决这个问题,我们需要为Style和Script类型创建一个bundle。
B) 创建bundle 来优化web 资源
首先,我们需要创建一个新的文件夹“App_Start”到项目的根目录。
使用静态RegisterBundles方法向文件夹添加一个新类“BundleConfig.cs”。 每个脚本或样式包位于从根(〜/ bundles /)指定的虚拟路径。
将文件添加到包中的顺序很重要;检查依赖关系。
修复BundleCollection错过的引用; 从NuGet安装软件包"Microsoft.AspNet.Web优化"。
笔记:将“System.Web.Optimization;”命名空间添加到“BundleConfig.cs”文件中。 用指向虚拟路径的软件包脚本替换现有的样式和脚本标签。 现在,您的主页应该如下所示:
接下来,我们需要注册我们的bundle 在Global.asax文件中的Application_Start
protected void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
运行应用程序检查一切是否正常。 现在,如果我们查看页面源,即使在创建捆绑包之后,仍然会显示每个资源的各个链接,如下所示:
要查看bundle的效果,我们需要使用语句明确地启用bundle优化:
// Enable bundle optimization.
BundleTable.EnableOptimizations = true;
启用包优化后,运行应用程序查看页面源。 所有三个脚本文件组合成一个最小化的文件。
C) 将具有JSON格式的服务层(Web API)添加到现有应用程序
我们需要在项目根目录下创建一个新的文件夹“Controller”。 默认情况下,Web表单不具有Web API功能。
我们需要依靠NuGet软件包管理器来搜索“Microsoft ASP.NET Web API 2.2”并安装软件包。
笔记:这也将安装“Newtonsoft.Json”库来序列化和反序列化对象。 如果没有,您可以随时在NuGet找到该软件包。
右击这Controller 文件夹并增加一个新项目。从模板中选择Web API Controller Class并创建“ProductController”。
笔记:您将看到基本的Get,Post,Put和Delete操作方法。 评论所有的代码或扩展它。 我更喜欢删除所有的动作,并添加新的动作方法“GetHelloWorld”来测试API。
public class ProductController : ApiController
{
[HttpGet]
[ActionName("GetHelloWorld")]
public string GetHelloWorld()
{
ArrayList al = new ArrayList { "Hello", "World",
"From", "Sample", "Application" };
return JsonConvert.SerializeObject(al);
}
}
为了访问API方法,我们需要设置正确的路由机制。 所以让我们这样做
在“App_Start”文件夹中添加一个新类“WebApiConfig.cs”,代码如下:
public static void Register(HttpConfiguration config)
{
config.EnableCors();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{Action}/{id}",
defaults: new { Controller = "Product",
Action = "GetHelloWorld", id = RouteParameter.Optional }
);
}
添加对这个命名空间“System.Web.Http”的引用。 如果您的代码在“config.EnableCors()”中引发错误,请转到NuGet并安装Cors(Cross Origin Resource Sharing)包(Microsoft.AspNet.WebAPI.Cors)以从其他域访问Web API。 (这在我们的示例项目中不是必需的)
现在,将我们的API路由器注册到Global.asax文件中的“Application_Start”方法中:
WebApiConfig.Register(GlobalConfiguration.Configuration);
现在,尝试使用链接访问API:
http://localhost:7656/api/
在上述链接中没有指定控制器和操作名称。
这些值在WebAPIConfig文件中设置为默认值(如“ProductController”和“GetHelloWorld”)。 结果以XML格式出现,这是默认的Web API行为。 以JSON(JavaScript Object Notation)格式获取结果; 我们需要使用WebAPIConfig寄存器方法中的以下语句设置媒体类型标头来接受“text / html”。
// To return json return
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
现在,再次运行API链接,此时您将看到JSON格式的结果:
要更好地了解JSON,请检查这些示例。 点击这里继续阅读第二部分。
如果您喜欢使用Asp.Net MVC开始实施流行的AngularJS,请检查这篇文章
检查这篇文章了解更多关于ASP.NET 5和C#6中的新功能
我希望你有一个美好的时光学习新知识。 如果您有任何建议,请告诉我们 随意评价这篇文章,留下更好的意见。
作者: Sreekanth Mothukuru
本文出处:https://www.codeproject.com/Articles/815916/Create-an-ASP-NET-Web-Forms-Application-using-Boot
原文有源码可以下载