好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没有实战web项目的机会。大D也辞职了,去搞web app了。自己也该闲暇时间多学习学习,每天进步一点点。
OK,不多说了,看一下Solution的截图
基本上一看就明白了,控制器调用Biz层,Biz层调用DAL层,DAL层进行数据的CURD。Utility是一些公用的类库。ok,为什么程序集的命名都是以Bruce开头呢,因为我在公司的英文名叫这个。废话不多说,我们先看一下页面
我们引入了BootStrap,主要是为了页面布局。在Views中Partial下面放的都是部分页。
我们先看一下运行效果,今天主要是讲页面初始化部分。
其实查询条件就是婚否,出生日期,姓名的模糊查询。我们先看一下页面Index.cshtml的代码
Compare data between Solr and DB
@*@Styles.Render("~/css")*@
@Scripts.Render("~/bundles/BootStrap")
@Scripts.Render("~/bundles/Scripts")
我们使用html5+BootStrap布局,这里用到了BootStrap的网格系统,将浏览器平分为12份,即12列,很容易构造出响应式布局系统。那么什么是BootStrap的网格系统,看如下的解释
OK,我们怎么看是否是响应式的布局呢,我们打开谷歌浏览器,现将浏览器缩小到一定程度。
看到了吧,即使设备浏览器这么小,我们还是能用。那我们在手机模拟器中测试一下,打开谷歌浏览器,按F12,点击手机模拟器样的东西,然后Device选择iphone6。
我们看到iphone6下面的效果是这样的。说到这里我最近很讨厌两个广告,一个是“这个是iphone6,这个是iphone6 plus,它们都有一个叫健康的东西.....但是好吃啊”,还有一个是“当牛魔王变成一个饺子,我愿意变成一双筷子”。看到这两个广告,我想砸电视。
那为什么不同的设备不同的浏览器都是可以正常浏览的呢,原因就在于这段代码
这段代码的意思是网页宽度默认等于屏幕宽度,缩放比例默认为1(网页初始比例占屏幕的100%)。
ok,我们接下来看head部分css和js的引用,这里有个新东西叫Bundle,用来打包压缩js或者css的。通过它打包压缩的js或者css客户端只需要下载一次包即可,而且可以在客户端缓存起来,当检测到有更新时,才会重新下载。
下面是Bundle.cs的代码
using System.Web; using System.Web.Optimization; namespace Brue.GRLC.Web { public class BundleConfig { // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/BootStrap").Include( "~/Scripts/jquery-1.11.1.js","~/BootStrap/js/bootstrap.js")); bundles.Add(new ScriptBundle("~/bundles/Scripts").Include("~/Js/Index.js")); bundles.Add(new StyleBundle("~/css").Include("~/BootStrap/css/bootstrap-theme.css" , "~/BootStrap/css/bootstrap.css")); } } }
注意,在这里引用js的时候不要引用压缩过的js,比如xxx.min.js。当Bundle在遇到这种js命名文件的时候,直接就忽略掉了。那么我们在Head中只需要使用如下代码来引用即可。
@Scripts.Render("~/bundles/BootStrap") @Scripts.Render("~/bundles/Scripts")
OK,在这我碰到一个问题,就是我的css通过这种方式引用,始终提示Index out of range。如果哪位大牛知道原因的话麻烦留个言,谢谢!
OK,我们接下来看一下控制器代码,页面刚进来,会走Home/Index。
public ActionResult Index() { List
首先我们构造了一个SelectList用于下拉列表,Biz层的代码很简单
public dynamic GetMarriedList() { IList
用匿名类去构造一个List。接下来就是DataReponse的获取,Biz层的代码如下
public DataResponseGetUserInfoEntityList(UserInfoRequest request = null) { if(request==null) { request = new UserInfoRequest(); request.PageIndex = ConstValues.CONN_DefaultPageIndex; request.PageSize = ConstValues.CONN_DefaultPageSize; } int totalCount=0; List userDBEntityList = GRLCDAL.GetInstance().GetUserInfoEntityList(request, out totalCount); DataResponse dataResponse = new DataResponse (); dataResponse.DataList = userDBEntityList; dataResponse.TotalCount = totalCount; return dataResponse; }
没什么可说的,ConstValues类中是一些静态只读属性
public class ConstValues { public static readonly string CON_DBConnection = ConfigurationManager.ConnectionStrings["DB_ConnectionStr"].ToString(); public static readonly string CON_DbScriptXmlFolder = ConfigurationManager.AppSettings["DbScriptXmlFolder"]; public static readonly int CONN_DefaultPageSize = int.Parse(ConfigurationManager.AppSettings["DefaultPageSize"]); public static readonly int CONN_DefaultPageIndex = 1; public static readonly int CONN_PagerDisplayCount = int.Parse(ConfigurationManager.AppSettings["PagerDisplayCount"]); }
看一下DAL层。
public ListGetUserInfoEntityList(UserInfoRequest request, out int totalCount) { totalCount = 0; string sqlScript = string.Empty; try { sqlScript = DBScriptManager.GetScript(this.GetType(), "GetUserInfo"); SqlParameter[] sqlParameters = { new SqlParameter("@IsMarried",SqlDbType.Char,1), new SqlParameter("@StartDate",SqlDbType.DateTime), new SqlParameter("@EndDate",SqlDbType.DateTime), new SqlParameter("@UserName",SqlDbType.NVarChar,20), new SqlParameter("@PageIndex",SqlDbType.Int), new SqlParameter("@PageSize",SqlDbType.Int), new SqlParameter("@TotalCount",SqlDbType.Int) }; sqlParameters[0].Value = request.IsMarried; sqlParameters[1].Value = request.StartDate; sqlParameters[2].Value = request.EndDate; sqlParameters[3].Value = request.UserName; sqlParameters[4].Value = request.PageIndex; sqlParameters[5].Value = request.PageSize; sqlParameters[6].Direction = ParameterDirection.Output; DataSet ds = SqlHelper.ExecuteDataset(ConstValues.CON_DBConnection, CommandType.Text, sqlScript, sqlParameters); if (ds != null && ds.Tables.Count > 0) { totalCount = Convert.ToInt32(sqlParameters[6].Value); return ds.Tables[0].ToEntityList (); } return new List (); } catch (Exception ex) { LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(), ex); return null; } }
OK,我们看一下这个GetUserInfo脚本,在Bruce.GRLC.DbScriptXml程序集下。
脚本很简单,就是传入参数查分页数据。
在DAL层我们将DataTable通过ToEntityList转化为了实体List,在Utility中我们定义了一个扩展用来转化。
public static class DataTableToEntityExtension { public static ListToEntityList (this DataTable dt) where T : class,new() { List entityList = new List (); Type entityType = typeof(T); PropertyInfo[] propertys = entityType.GetProperties(); DataMappingAttribute mappingAttribute = null; foreach (DataRow dr in dt.Rows) { T tEntity = new T(); foreach (PropertyInfo pi in propertys) { mappingAttribute = pi.GetCustomAttribute(typeof(DataMappingAttribute)) as DataMappingAttribute; if (mappingAttribute != null && dt.Columns.Contains(mappingAttribute.mappingName)) { if (!pi.CanWrite) continue; object value = dr[mappingAttribute.mappingName]; if (value != DBNull.Value) pi.SetValue(tEntity, value, null); } } entityList.Add(tEntity); } return entityList; } }
值那么转化的时候是怎么让DataTable的列和实体匹配起来,你可以将列别名和实体定义成一样的,还有一种你可以使用Attribute。那我们使用后者,因为后者更灵活。
[AttributeUsage(AttributeTargets.Property)] public class DataMappingAttribute : Attribute { public string mappingName; public DbType dbType; public DataMappingAttribute() { } public DataMappingAttribute(string mappingName, DbType dbType) { this.mappingName = mappingName; this.dbType = dbType; } }
定义好Attribute之后,我们设置其能使用的目标只能是Property。然后我们在实体类里面的属性上加上这个Attribute。
namespace Bruce.GRLC.Model.Entity { public class UserDBEntity { [DataMapping("UseNo", DbType.AnsiString)] public string UserID { get; set; } [DataMapping("Name", DbType.AnsiString)] public string UserName { get; set; } [DataMapping("Age", DbType.Int32)] public int Age { get; set; } [DataMapping("Married", DbType.String)] public string Married { get; set; } } }
在DataTableToEntityExtension这个扩展中我们得到属性的Attribute去和DataTable的列名去匹配,反射赋值。
OK,拿到数据后,我们在控制器构造viewModel,传递给界面来绑定。我们看一下部分页UserInfoPartial.cshtml的代码
@using Bruce.GRLC.Model.ViewModel;
@model UserInfoViewModel
帐号
姓名
年龄
婚否
@if (Model != null && Model.DataResponse != null && Model.DataResponse.DataList != null)
{
foreach (var userEntity in Model.DataResponse.DataList)
{
@userEntity.UserID
@userEntity.UserName
@userEntity.Age
@userEntity.Married
}
}
@{Html.RenderPartial("~/Views/Partial/PaginationPartial.cshtml", Model.DataResponse);}
其实也就是一个应用了BoootStrap样式的表格,有边框和鼠标经过的样式。关于BootStrap的样式的使用,请参考BootStrap官网。代码很简单,就是循环遍历,展示数据。