系列开始使用

上传人：5*** IP属地：湖北上传时间：2021-11-11 格式：DOCX 页数：16 大小：413.74KB 积分：30 举报 版权申诉

已阅读5页，还剩11页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、【博文推荐】ASP.NET MVC4+BootStrap实战2015-03-03 10:23 BruceAndLee 51CTO博客字号：T | T好久没有写关于web开发的文章了，进到这个公司一直就是winform和Silverlight，实在是没有实战web项目的机会。大D也辞职了，去搞web app了。自己也该闲暇时间多学习学习，每天进步一点点。AD：本博文出自51CTO博客BruceAndLee博主，有任何问题请进入博主页面互动讨论!博文地址：OK，不多说了，看一下Solution的截图基本上一看就明白了，控制器调用Biz层，Biz层调用DAL层，DAL层进行数据

2、的CURD。Utility是一些公用的类库。ok，为什么程序集的命名都是以Bruce开头呢，因为我在公司的英文名叫这个。废话不多说，我们先看一下页面我们引入了BootStrap，主要是为了页面布局。在Views中Partial下面放的都是部分页。我们先看一下运行效果，今天主要是讲页面初始化部分。其实查询条件就是婚否，出生日期，姓名的模糊查询。我们先看一下页面Index.cshtml的代码1. <!DOCTYPE html> 2. <html> 3. <head> 4. &

3、lt;meta charset="utf-8" /> 5. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6. <meta name="viewport" content="width=device-width;initial-sca

4、le=1" /> 7. <title>Compare data between Solr and DB</title> 8. <link rel="stylesheet" type="text/css" href="/BootStrap/css/bootstrap-theme.css"&

5、#160;/> 9. <link rel="stylesheet" type="text/css" href="/BootStrap/css/bootstrap.css" /> 10. *Styles.Render("/css")* 11.

6、; Scripts.Render("/bundles/BootStrap") 12. Scripts.Render("/bundles/Scripts") 13. <style type="text/css"> 14.

7、60; .pre-Scrollable 15. max-height: 700px; 16. overflow-y: scroll; 17. &

8、#160; 18. </style> 19. </head> 20. <body> 21. <div class="container"> 22. <form id="formsync"

9、;> 23. <div class="row"> 24. <div class="col-md-12"> 25.

10、60; <h1 style="color:red"><b>Compare Data Between Solr and DB</b></h1> 26. &

11、#160; </div> 27. </div> 28. <div class="row" id="divloding" s

12、tyle="display:none;text-align:center"> 29. <div class="col-md-6"> 30.

13、 <img src="/Images/ajaxLoading.gif" alt="load failed" /> 31. <label>getting,please wait.&

14、lt;/label> 32. </div> 33. </div> 34.

15、; <div class="row" id="divcompare" style="display:none;text-align:center"> 35. <div class="col-md-6"> 36.

16、; <img src="/Images/ajaxLoading.gif" alt="load failed" /> 37. &#

17、160; <label>comparing,please wait.</label> 38. </div> 39. </d

18、iv> 40. <div class="row" id="divfix" style="display:none;text-align:center"> 41.

19、; <div class="col-md-6"> 42. <img src="/Images/ajaxLoading.gif" alt="load failed" /> 43.

20、60; <label>fixing,please wait.</label> 44. </div> 45.

21、0; </div> 46. <div class="row" style="margin-top:10px"> 47.

22、60; <div class="col-md-12 form-inline"> 48. <div class="form-group input-group">&#

23、160;49. <span class="input-group-addon">IsMarried:</span> 50. &#

24、160; Html.DropDownList("ddlMarried", ViewBag.MarriedList as SelectList, null, new id = "ddlMarried", class = "form-control" )&#

25、160;51. </div> 52. <div class="form-

26、group" style="margin-left:10px"> 53. <label class="control-label">BirthDay:</label> 54. &#

27、160; <input type="date" id="txtdatestart" class="form-control"> 55.

28、60; <label class="control-label">-</label> 56.

29、 <input type="date" id="txtdateend" class="form-control"> 57. </div> 58.

30、; <div class="form-group input-group" style="margin-left:10px"> 59. &

31、#160; <span class="input-group-addon">Name:</span> 60. <input id=&quo

32、t;txtusername" type="text" class="form-control" placeholder="input name." style="width:120px" /> 61. &#

33、160;</div> 62. <div class="form-group" style="margin-left:10px"> 63.

34、; <input id="btnsearch" type="button" class="btn btn-info" value="Get" style="width:70px" /> 64.

35、 </div> 65. </div> 66.

36、0; </div> 67. <div class="row" style="margin-top:10px"> 68. <div id

37、="divresult" class="col-md-7 form-inline pre-Scrollable"> 69. Html.RenderPartial("/Views/Partial/UserInfoPartial.cshtml")

38、; 70. </div> 71. <div class="col-md-5"> 72.

39、0; Html.RenderPartial("/Views/Partial/DiffAndSameWithSolrPartial.cshtml"); 73. </div>

40、60;74. </div> 75. </form> 76. </div> 77. </body> 78. </html> 我们使用html5+BootStrap布局，这里用到了BootStrap的网格系

41、统，将浏览器平分为12份，即12列，很容易构造出响应式布局系统。那么什么是BootStrap的网格系统，看如下的解释OK，我们怎么看是否是响应式的布局呢，我们打开谷歌浏览器，现将浏览器缩小到一定程度。看到了吧，即使设备浏览器这么小，我们还是能用。那我们在手机模拟器中测试一下，打开谷歌浏览器，按F12，点击手机模拟器样的东西，然后Device选择iphone6。我们看到iphone6下面的效果是这样的。说到这里我最近很讨厌两个广告，一个是“这个是iphone6，这个是iphone6 plus，它们都有一个叫健康的东西.但是好吃啊”，还有一个是“当牛魔王变成一个饺子，我愿意变成一双筷子

42、”。看到这两个广告，我想砸电视。那为什么不同的设备不同的浏览器都是可以正常浏览的呢，原因就在于这段代码1. <meta name="viewport" content="width=device-width;initial-scale=1" /> 这段代码的意思是网页宽度默认等于屏幕宽度，缩放比例默认为1(网页初始比例占屏幕的100%)。ok，我们接下来看head部分css和js的引用，这里有个新东西叫Bundle，用来打包压缩js或者css的。通过它打包压缩的js或者css客户端只需要下载一次包即可，

43、而且可以在客户端缓存起来，当检测到有更新时，才会重新下载。下面是Bundle.cs的代码1. using System.Web; 2. using System.Web.Optimization; 3. 4. namespace Brue.GRLC.Web 5. 6. public class BundleConfig 7. 8.

44、0; / 有关 Bundling 的详细信息，请访问 9. public static void RegisterBundles(BundleCollection bundles) 10. 11. &

45、#160; bundles.Add(new ScriptBundle("/bundles/BootStrap").Include( 12. "/Scripts/jquery-1.1

46、1.1.js","/BootStrap/js/bootstrap.js"); 13. 14. bundles.Add(new ScriptBundle("/bundles/Scripts").Include("/Js/Index.js"); 15. 16. &

47、#160; bundles.Add(new StyleBundle("/css").Include("/BootStrap/css/bootstrap-theme.css" 17. , "/BootStrap/css/bootstrap.css&

48、quot;); 18. 19. 20. 注意，在这里引用js的时候不要引用压缩过的js，比如xxx.min.js。当Bundle在遇到这种js命名文件的时候，直接就忽略掉了。那么我们在Head中只需要使用如下代码来引用即可。1. Scripts.Render("/bundles/BootStrap") 2. Scripts.Render("/bundles/Scrip

49、ts") OK，在这我碰到一个问题，就是我的css通过这种方式引用，始终提示Index out of range。如果哪位大牛知道原因的话麻烦留个言，谢谢!OK，我们接下来看一下控制器代码，页面刚进来，会走Home/Index。1. public ActionResult Index() 2. 3.

50、0;List<object> marriedList = GRLCBiz.GetInstance().GetMarriedList(); 4. SelectList selectList = new SelectList(marriedList, "MarriedID", "DisplayContent"

51、;, "-1"); 5. ViewBag.MarriedList = selectList; 6. 7. DataResponse<UserDBEntity> dataResponse

52、= GRLCBiz.GetInstance().GetUserInfoEntityList(); 8. UserInfoViewModel userInfoViewModel = new UserInfoViewModel(); 9. use

53、rInfoViewModel.DataResponse = dataResponse; 10. userInfoViewModel.DataResponse.PageIndex = ConstValues.CONN_DefaultPageIndex; 11. &#

54、160;userInfoViewModel.DataResponse.PageSize = ConstValues.CONN_DefaultPageSize; 12. userInfoViewModel.DataResponse.StartPageIndex = 1; 13.

55、; return View(userInfoViewModel); 14. 首先我们构造了一个SelectList用于下拉列表，Biz层的代码很简单1. public dynamic GetMarriedList() 2. 3.

56、; IList<object> marriedList = new List<object>(); 4. marriedList.Add(new MarriedID = -1, DisplayContent = "No Select

57、ion" ); 5. marriedList.Add(new MarriedID = 0, DisplayContent = "Married" ); 6. marrie

58、dList.Add(new MarriedID = 1, DisplayContent = "UnMarried" ); 7. 8. return marriedList; 9. 用匿名类去构

59、造一个List。接下来就是DataReponse的获取，Biz层的代码如下1. public DataResponse<UserDBEntity> GetUserInfoEntityList(UserInfoRequest request = null) 2. 3. if(r

60、equest=null) 4. 5. request = new UserInfoRequest(); 6.

61、0; request.PageIndex = ConstValues.CONN_DefaultPageIndex; 7. request.PageSize = ConstValues.CONN_DefaultPageSize; 8.

62、0; 9. 10. int totalCount=0; 11. 12.

63、60; List<UserDBEntity> userDBEntityList = GRLCDAL.GetInstance().GetUserInfoEntityList(request, out totalCount); 13. DataResponse<UserDBEntity> dat

64、aResponse = new DataResponse<UserDBEntity>(); 14. dataResponse.DataList = userDBEntityList; 15. dataResponse.TotalC

65、ount = totalCount; 16. return dataResponse; 17. 没什么可说的，ConstValues类中是一些静态只读属性1. public class ConstValues 2. &#

66、160;3. public static readonly string CON_DBConnection = ConfigurationManager.ConnectionStrings"DB_ConnectionStr".ToString(); 4. public static readonl

67、y string CON_DbScriptXmlFolder = ConfigurationManager.AppSettings"DbScriptXmlFolder" 5. public static readonly int CONN_DefaultPageSize = int.Parse(ConfigurationManager.AppSettings"D

68、efaultPageSize"); 6. public static readonly int CONN_DefaultPageIndex = 1; 7. public static readonly int CONN_PagerDisplayCount =

69、;int.Parse(ConfigurationManager.AppSettings"PagerDisplayCount"); 8. 看一下DAL层。1. public List<UserDBEntity> GetUserInfoEntityList(UserInfoRequest request, out int totalCount) 2.

70、60; 3. totalCount = 0; 4. string sqlScript = string.Empty; 5.

71、 try 6. 7. sqlScript = DBScriptManager.GetScript(this.GetType(), "GetUserInfo&

72、quot;); 8. SqlParameter sqlParameters = 9. 10.

73、; new SqlParameter("IsMarried",SqlDbType.Char,1), 11. new SqlParam

74、eter("StartDate",SqlDbType.DateTime), 12. new SqlParameter("EndDate",SqlDbType.DateTime), 13.

75、60; new SqlParameter("UserName",SqlDbType.NVarChar,20), 14. new SqlParameter("PageInd

76、ex",SqlDbType.Int), 15. new SqlParameter("PageSize",SqlDbType.Int), 16.

77、 new SqlParameter("TotalCount",SqlDbType.Int) 17. 18. 19. &

78、#160; sqlParameters0.Value = request.IsMarried; 20. sqlParameters1.Value = request.StartDate; 21.

79、; sqlParameters2.Value = request.EndDate; 22. sqlParameters3.Value = request.UserName; 23.

80、 sqlParameters4.Value = request.PageIndex; 24. sqlParameters5.Value = request.PageSize; 25.

81、; sqlParameters6.Direction = ParameterDirection.Output; 26. 27. DataSet ds = SqlHelper.ExecuteDat

82、aset(ConstValues.CON_DBConnection, CommandType.Text, sqlScript, sqlParameters); 28. if (ds != null && ds.Tables.Count > 0) 29.

83、 30. totalCount = Convert.ToInt32(sqlParameters6.Value); 31.

84、60; return ds.Tables0.ToEntityList<UserDBEntity>(); 32. 33. 34.

85、 return new List<UserDBEntity>(); 35. 36.

86、60; catch (Exception ex) 37. 38. LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(), ex);

87、;39. return null; 40. 41. OK，我们看一下这个GetUserInfo脚本，在Bruce.GRLC.

88、DbScriptXml程序集下。1. <?xml version="1.0" encoding="utf-8" ?> 2. <Scripts> 3. <Script Key="GetUserInfo"> 4. <!CDATA 5. DECLARE UserTempTable TABLE 6. (

89、0; 7. ID INT IDENTITY(1,1) NOT NULL, 8. UserNo CHAR(25) NOT NULL 9. ) 10. 11. INSERT INTO UserTempTable 12. ( 13. UserNo 14. ) 15.

90、SELECT 16. A.UseNo 17. FROM Bonus.dbo.User A WITH(NOLOCK) 18. LEFT JOIN Bonus.dbo.UerInfo B WITH(NOLOCK) 19. ON A.UseNo = B.UseNo 20. WHERE (IsMarried IS NULL

91、0;OR IsMarried = '' OR B.Temper = IsMarried) 21. AND 22. ( 23. StartDate IS NULL 24.

92、0; OR EndDate IS NULL 25. OR B.BirthDay BETWEEN StartDate AND EndDate 26. ) 27. AND 28. ( 29.

93、0; UserName IS NULL 30. OR UserName = '' 31. OR B.Name LIKE '%' + UserName&

94、#160;+ '%' 32. ) 33. ORDER BY A.UseNo ASC 34. 35. SELECT TotalCount = COUNT(1) FROM UserTempTable 36. 37. SELECT 38. UseNo,

95、60;39. Name, 40. Age, 41. Married 42. FROM( 43. SELECT 44. ID = ROW_NUMBER() OVER(ORDER BY UseNo ASC)

96、, 45. A.UseNo, 46. B.Name, 47. B.Age, 48. Married = CASE WHEN B.Temp

97、er = '1' 49. THEN '已婚' 50.

98、0; ELSE '未婚' 51. END 52. FROM Bonus.dbo.User A WITH(NOLOCK)

99、 53. LEFT JOIN Bonus.dbo.UerInfo B WITH(NOLOCK) 54. ON A.UseNo = B.UseNo 55. INNER JOIN UserTempTable C 56. &#

100、160; ON C.UserNo = A.UseNo 57. ) N 58. WHERE ID BETWEEN (PageIndex - 1)* PageSize + 1 AND PageIndex * PageSize 59. > 60. </Script> 61. <

101、/Scripts> 脚本很简单，就是传入参数查分页数据。在DAL层我们将DataTable通过ToEntityList转化为了实体List，在Utility中我们定义了一个扩展用来转化。1. public static class DataTableToEntityExtension 2. 3. public static List<T> To

102、EntityList<T>(this DataTable dt) where T : class,new() 4. 5. List<T> entityList = new List<T>();

103、;6. 7. Type entityType = typeof(T); 8. PropertyInfo propertys = entityType.GetProperties(); 9.

104、60; DataMappingAttribute mappingAttribute = null; 10. 11. foreach (DataRow dr in dt.Rows) 12.

105、 13. T tEntity = new T(); 14. 15. &#

106、160; foreach (PropertyInfo pi in propertys) 16. 17. &#

107、160; mappingAttribute = pi.GetCustomAttribute(typeof(DataMappingAttribute) as DataMappingAttribute; 18. 19. if (mappingAttribut

108、e != null && dt.Columns.Contains(mappingAttribute.mappingName) 20. 21.

109、0; if (!pi.CanWrite) continue; 22. 23. object v

110、alue = drmappingAttribute.mappingName; 24. if (value != DBNull.Value) 25.

111、; pi.SetValue(tEntity, value, null); 26.

112、;27. 28. entityList.Add(tEntity); 29.

113、; 30. return entityList; 31. 32. 值那么转化的时候是怎么让DataTable的列和实体匹配起来，你可以将列别名和实体定义成一样的，还有一种你可以使用Attribute。那我们使用后者，因为后者更灵活。1

114、. AttributeUsage(AttributeTargets.Property) 2. public class DataMappingAttribute : Attribute 3. 4. public string mappingName; 5.

115、 public DbType dbType; 6. public DataMappingAttribute() 7. 8. 9. public DataMap

116、pingAttribute(string mappingName, DbType dbType) 10. 11. this.mappingName = mappingName; 12.

117、0; this.dbType = dbType; 13. 14. 定义好Attribute之后，我们设置其能使用的目标只能是Property。然后我们在实体类里面的属性上加上这个Attribute。1. namespace Bruce.GRLC.Model.Entity 2. 3. &#

118、160;public class UserDBEntity 4. 5. DataMapping("UseNo", DbType.AnsiString) 6. public string UserID get; set;

119、0; 7. 8. DataMapping("Name", DbType.AnsiString) 9. public string UserName get; set; 10. 11. &#

120、160; DataMapping("Age", DbType.Int32) 12. public int Age get; set; 13. 14. DataMapping("Married", DbTyp

121、e.String) 15. public string Married get; set; 16. 17. 在DataTableToEntityExtension这个扩展中我们得到属性的Attribute去和DataTable的列名去匹配，反射赋值。OK，拿到数据后，我们在控制器构造viewModel，传递给界面来绑定。我们看一下部分页UserInfoPartial.c

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

系列开始使用

文档简介

温馨提示

最新文档

评论

系列开始使用

文档简介

温馨提示

最新文档

评论

相关文档