一起谈.NET技术,ASP.NET MVC功能详解 变身数据展示达人

简介:   作为Web开发者,我们经常面对的任务就是将数据通过表格展现给用户。最简单的情景是比如仅将顾客的订单显示出来。然而,更多的数据表格将提供比如排序,分页等更多的丰富的功能。  在ASP.NET的web表单中,GridView控件提供了一种快速简便的方法显示网格中的记录集,并提供像排序、分页、编辑及删除的功能,所有的这些只需写少量的代码就可以实现。

  作为Web开发者,我们经常面对的任务就是将数据通过表格展现给用户。最简单的情景是比如仅将顾客的订单显示出来。然而,更多的数据表格将提供比如排序,分页等更多的丰富的功能。

  在ASP.NET的web表单中,GridView控件提供了一种快速简便的方法显示网格中的记录集,并提供像排序、分页、编辑及删除的功能,所有的这些只需写少量的代码就可以实现。在页面加载时,GridView自动HTML中的table标记,让你不需要写任何标签,以及不用去考虑如何显示和将数据绑定到GridView控件。在ASP.NET MVC应用中,由于是使用了MVC模式,这对于那些刚接触ASP.NET MVC的新手来说有点挑战,特别是那些已经熟悉了传统的ASP.NET开发的人来说。

  这是一个讲解如何在ASP.NET MVC应用中使用数据控件的系列文章。在该系列文章中,我们首先学习到如何创建ASP.NET MVC应用程序及如何访问数据库。接着是如何在一个简单的表格控件中展示数据记录。最后将会探究如何实现更丰富功能的数据功能,比如排序,分页,过滤以及客户端的脚本功能加强。我们同时也会探究一些目前比较流行的表格控件,比如MvcContrib项目和基于Javascript的表格项目jqGrid。本文将首先指导如何创建一个ASP.NET MVC程序以及如何将数据库中的数据呈现到表格中去。

  步骤1 创建ASP.NET MVC项目

  ASP.NET MVC是微软根据著名的MVC设计模式而专门为ASP.NET开发而实现的一个框架。从本质上说,它允许开发者在网页中使用更强大的控件,并使得程序开发者和页面开发者能更专注于自身领域的开发,使的程序更容易测试,更容易实现SEO。ASP.NET MVC框架最早是在Visual Studio 2008和ASP.NET 3.5 sp1时提出来的。在.NET 4中,ASP.NET MVC已经是作为其中的一个重要组成部分了,如果使用Visual Studio 2010的话,就不需要另外下再ASP.NET MVC框架了。

  下面我们开始建立一个新的ASP.NET MVC应用。首先启动Visual Studio 2010,选择文件—新项目。选择C#语言,并且选择建立一个ASP.NET MVC2 空Web应用程序,将项目命名为GridDemosMVC,之后按确定完成,如下图:

创建ASP.NET MVC项目

   一个新的空的ASP.NET MVC2 应用的目录结构如下:

  Content -这个目录存放的是静态的页面内容,比如CSS文件,图片等。

   Controllers -这个目录存放的是应用的控制器及相关文件。在MVC模式中,控制层负责处理用户的请求并选择模型和产生返回的视图。控制器是以类的形式实现的,其中的方法被称为actions,当以约定的URL形式访问控制器时,这些actions方法就会被调用。

   Models - 这个目录存放的是实体模型文件。

   Scripts -这个目录存放的是包括jQuery和微软的ASP.NET Ajax库的相关Javascript文件。

   Views - 这个目录包含了视图层的文件。视图通常包括HTML、Javascript文件和服务端产生的文件。不象传统的ASP.NET Web应用中服务端代码和页面文件是混在一起的(或者代码是单独以code-behind的方式存放),在ASP.NET MVC中,视图层的文件不应该包含业务逻辑代码。

   Global.asax –这个文件其实是ASP.NET MVC中一个重要的核心文件。 ASP.NET MVC中广泛使用了ASP.NET的的URL路由选择功能(有关介绍参考: http://www.4guysfromrolla.com/articles/012710-1.aspx一文)。ASP.NET MVC 框架中设定了一个默认的URL路由规则如下: {controller}/{action}/{id},当用户比如以www.yoursite.com/Categories/View/Beverages,访问时,ASP.NET会默认执行名为CategoriesContriller这个控制器的其中的view这个方法,并且将Beverages作为id传进去。

  步骤2 增加Northwind数据库支持和创建Linq-TO-SQL类

  在我们开始设计控制器和页面视图前,我们先设置好数据库,本文将以Northwind数据库作为示例,其中的数据库文件在本文的附件中可以下载。在项目中,建立一个App_Data文件夹,将附件中的northwnd.mdf和northwnd.ldf放进去。

  现在可以开始从数据库中读取数据了,本文中采用的是Linq-to-SQL的方法。它是一种微软设计的ORM对象关系映射工具。之所以选择它,是因为它可能是最快最简便的ORM工具了。实际上,Linq-to-SQL在我们的项目工程中增加了相关的文件,指定我们要访问的数据库或表,接着它创建一个叫DataContext的类,这个类用来更新及从数据库中获取数据。Linq-to-sql允许我们使用简洁的可读性强的代码去操作数据库,这使得我们可以暂时不用去浪费时间在编写底层的SQL代码的编写上。我们推荐阅读Scott Guthire编写的关于Linq-SQL的教程<( http://scottonwriting.net/sowblog/archive/2010/07/27/links-to-scott-guthrie-s-using-linq-to-sql-tutorials.aspx)。

  首先,我们鼠标右击Models文件夹,选择新增文件,从对话框中,选择Linq to SQl的类模版,并将其命名为Northwind.dbml,就会创建一个新文件,打开后,可以在Linq-to-SQL设计器中看到。具体步骤见如下图:

  接下来,转到服务资源管理器中,展开northwnd.mdf这个文件,拖拉其表分类下的Categories和Products两个表到设计器中去,并且保存,要做的工作就是这么多,这时系统已经自动为我们构建了数据访问层了。

  步骤3 为项目增加必要的文件

  此外,我们要将文中附件解压缩后,将其中的一些文件复制到项目工程中,因为这些是我们项目中要用到的一些资源文件。首先将附件中的工程的rContent目录下的所有内容复制到当前项目的Content目录下,并把附件工程中的Views/Shared目录复制到当前项目中的相同目录中去。注意的是并不需要复制其他文件到当前项目中去,因为其他文件是在今后的教程中有用到的。

  步骤4 增加ProductsController控制器

  对于本文,所有的数据展示都是通过一个简单的控制器ProductsController去实现,其中所有的用户请求都会被派发到Products控制器中的Index.action去处理,即比如用户通过URL http://www.yoursite.com/Products/Index,或者www.yoursite.com/Products(因为Index是默认访问的action名,可以省略),同样象排序或者分页的功能,访问的形式是www.yoursite.com/Products/Sortable和www.yoursite.com/Products/Paged.

  创建控制器时,在Controllers文件夹中右击,在弹出的菜单中选择新增—控制器ji 即可,将控制器命名为ProductsController,这样将创建一个ProductsController的类和一个Index的方法。

  当用户访问www.yoursite.com/Products/Index时,我们希望显示产品的名称,分类、数量、单价和折扣。因此我们需要使用NorthwindDataContext这个辅助类,它是由Linq-to-SQL工具自动产生的一个类,辅助我们对数据库的存取。因为我们要在控制器的所有action方法中都要用到这个辅助类,因此可以增加一个叫DataContext的属性去返回这个类的实例。此外,这个属性将对NorthwindDataContext实例进行一些属性的设置,以实现在加载产品的时候同步加载产品所属的目录(注意:Linq-to-SQL默认是使用延迟加载的,所谓的延迟加载,就是比如我们在显示每个产品的时候,并不希望ORM框架同步加载产品所属的分类,因为同步加载的话当数据量大的时候是会很耗费资源的)。代码实现如下:

 
 
public class ProductsController : Controller
  {
private NorthwindDataContext _DataContext = null ;
  
protected NorthwindDataContext DataContext
  {
get
  {
if (_DataContext == null )
  _DataContext
= new NorthwindDataContext(); // Eager load Category info
    var options = new DataLoadOptions();
  options.LoadWith(p
= p.Category);
  _DataContext.LoadOptions
= options;
  
return _DataContext;
  }
  }
// GET: /Products/ public ActionResult Index()
  {
  
return View();
  }
  }

  控制器实际的工作是两件事:接受用户的请求,访问数据库并将返回的数据决定用什么视图去返回给用户。我们这里仅是简单去对实体模型Product进行ORM操作,因此只需要如下代码就可以访问数据库的Product表了:

 
 
var model = this .DataContext.Products;

  但如何将结果返回给视图呢?控制器有两种方法返回结果给视图:通过弱类型的ViewData集合或使用强类型的视图。我们这里使用的是后一种方法:

 
 
public class ProductsController : Controller
  {
  ...
// GET: /Products/ public ActionResult Index()
  {
  var model
= this .DataContext.Products;
  
return View(model);
  }
  }

  看到了么?这里我们直接将model作为参数传递给View层了。

  步骤 5 创建视图

  我们将鼠标移到Index 这个方法上,然后右击鼠标,在弹出的菜单中选择“增加视图”,这就会显示如下图的菜单,我们保持视图的名为Index不变,但选择”创建强类型视图”的复选框,并且在下拉框中选择Web.Models.Product作为返回填充的模型类。然后点“选择master模版页”的复选框,选/Views/Shared/Site.Master作为我们的模版页。

  完成后,会在Views目录下多了一个名为Products的子目录和一个Index.aspx 的文件。打开Index.aspx文件的代码,观察@Page的部分,由于我们是要在页面中获得产品记录的一个集合再呈现出来,因此需要这里修改一下,修改为:

 
 
<% @ Page Title = "" Language = " C# " MasterPageFile = " ~/Views/Shared/Site.Master "
Inherits
= " System.Web.Mvc.ViewPage<IEnumerable<Web.Models.Product " %

  接下来的工作就简单了,我们就设计HTML的表格头,如下所示:

 
 
< table class = " grid " < tr < th Product </ th < th Category </ th
< th Qty / Unit </ th < th Price </ th < th Discontinued </ th </ tr

  接下来就是遍历获得的数据集合了,可以使用foreach去实现。其中注意学习String.Format的用法,它在这里格式化了单价,而对于如果产品没折扣的话则,折扣列不显示任何东西,而如果是有折扣的话则显示一张小图片。最后,我们通过www.yoursite.com/Products 或者www.yoursite.com/Products/Index就可以看到我们简单的从数据库表中展示的数据记录了。

 
 
<% foreach (var item in Model) {
%< tr < td class = " left " <% : item.ProductName %</ td
<
td class = " left " <% : item.Category.CategoryName %</ td
<
td class = " left " <% : item.QuantityPerUnit %</ td < td class = " right "
<%
: String.Format( " {0:C} " , item.UnitPrice) %</ td < td <%
if (item.Discontinued) { % < img src = " <%=Url.Content( " ~/ Content / cancel.png " ) % "
alt
= " Discontinued " title = " Discontinued " / <% } % </ td </ tr <% } %

  在接下来的几讲中,将会教大家如何对表格功能进行优化,比如增加排序,分页,筛选等功能,请密切期待。

目录
相关文章
|
1月前
|
自然语言处理 物联网 图形学
.NET 技术凭借其独特的优势和特性,为开发者们提供了一种高效、可靠且富有创造力的开发体验
本文深入探讨了.NET技术的独特优势及其在多个领域的应用,包括企业级应用、Web应用、桌面应用、移动应用和游戏开发。通过强大的工具集、高效的代码管理、跨平台支持及稳定的性能,.NET为开发者提供了高效、可靠的开发体验,并面对技术更新和竞争压力,不断创新发展。
54 7
|
1月前
|
开发框架 安全 .NET
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱。它不仅加速了应用开发进程,提升了开发质量和可靠性,还促进了创新和业务发展,培养了专业人才和技术社区,为软件开发和数字化转型做出了重要贡献。
27 5
|
1月前
|
传感器 人工智能 供应链
.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。
本文深入探讨了.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。通过企业级应用、Web应用及移动应用的创新案例,展示了.NET在各领域的广泛应用和巨大潜力。展望未来,.NET将与新兴技术深度融合,拓展跨平台开发,推动云原生应用发展,持续创新。
35 4
|
1月前
|
开发框架 .NET C#
.NET 技术凭借高效开发环境、强大框架支持及跨平台特性,在软件开发中占据重要地位
.NET 技术凭借高效开发环境、强大框架支持及跨平台特性,在软件开发中占据重要地位。从企业应用到电子商务,再到移动开发,.NET 均展现出卓越性能,助力开发者提升效率与项目质量,推动行业持续发展。
32 4
|
1月前
|
机器学习/深度学习 人工智能 Cloud Native
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台。本文深入解析 .NET 的核心优势,探讨其在企业级应用、Web 开发及移动应用等领域的应用案例,并展望未来在人工智能、云原生等方面的发展趋势。
39 3
|
1月前
|
敏捷开发 缓存 中间件
.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素
本文深入探讨了.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素,并通过企业级应用和Web应用开发的实践案例,展示了如何在实际项目中应用这些模式,旨在为开发者提供有益的参考和指导。
25 3
|
1月前
|
开发框架 安全 Java
.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力
本文深入探讨了.NET技术的独特魅力与优势,涵盖高效的开发体验、强大的性能表现、高度的可扩展性及丰富的生态系统等方面,展示了其在软件开发领域的核心竞争力。.NET不仅支持跨平台开发,具备出色的安全性和稳定性,还能与多种技术无缝集成,为企业级应用提供全面支持。
36 3
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
60 0
|
7月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
214 0
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
87 0

相关实验场景

更多