ASP.NET MVC4+BootStrap實戰

時間  2019-11-10
標籤 asp.net asp mvc4+bootstrap mvc bootstrap 實戰 欄目 ASP 简体版
原文   原文鏈接

進到這個公司一直就是winform和Silverlight，實在是沒有實戰web項目的機會。大D也辭職了，去搞web app了。本身也該閒暇時間多學習學習，天天進步一點點。

AD：【線下活動】三大新銳HTML 5企業匯聚51CTO—大話移動前端技術 css

ASP.NET MVC4+BootStrap實戰 OK，很少說了，看一下Solution的截圖html

基本上一看就明白了，控制器調用Biz層，Biz層調用DAL層，DAL層進行數據的CURD。Utility是一些公用的類庫。ok，爲何程序集的命名都是以Bruce開頭呢，由於我在公司的英文名叫這個。廢話很少說，咱們先看一下頁面前端

ASP.NET MVC4+BootStrap實戰

 

咱們引入了BootStrap，主要是爲了頁面佈局。在Views中Partial下面放的都是部分頁。html5

咱們先看一下運行效果，今天主要是講頁面初始化部分。jquery

ASP.NET MVC4+BootStrap 實戰

其實查詢條件就是婚否，出生日期，姓名的模糊查詢。咱們先看一下頁面Index.cshtml的代碼web

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8" /> 
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  6.     <meta name="viewport" content="width=device-width;initial-scale=1" /> 
  7.     <title>Compare data between Solr and DB</title> 
  8.     <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap-theme.css" /> 
  9.     <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap.css" /> 
  10.           @*@Styles.Render("~/css")*@ 
  11.           @Scripts.Render("~/bundles/BootStrap") 
  12.           @Scripts.Render("~/bundles/Scripts") 
  13.     <style type="text/css"> 
  14.         .pre-Scrollable { 
  15.             max-height: 700px; 
  16.             overflow-y: scroll; 
  17.         } 
  18.     </style> 
  19. </head> 
  20. <body> 
  21.     <div class="container"> 
  22.         <form id="formsync"> 
  23.             <div class="row"> 
  24.                 <div class="col-md-12"> 
  25.                     <h1 style="color:red"><b>Compare Data Between Solr and DB</b></h1> 
  26.                 </div> 
  27.             </div> 
  28.             <div class="row" id="divloding" style="display:none;text-align:center"> 
  29.                 <div class="col-md-6"> 
  30.                     <img src="~/Images/ajaxLoading.gif" alt="load failed" /> 
  31.                     <label>getting,please wait......</label> 
  32.                 </div> 
  33.             </div> 
  34.             <div class="row" id="divcompare" style="display:none;text-align:center"> 
  35.                 <div class="col-md-6"> 
  36.                     <img src="~/Images/ajaxLoading.gif" alt="load failed" /> 
  37.                     <label>comparing,please wait......</label> 
  38.                 </div> 
  39.             </div> 
  40.             <div class="row" id="divfix" style="display:none;text-align:center"> 
  41.                 <div class="col-md-6"> 
  42.                     <img src="~/Images/ajaxLoading.gif" alt="load failed" /> 
  43.                     <label>fixing,please wait......</label> 
  44.                 </div> 
  45.             </div> 
  46.             <div class="row" style="margin-top:10px"> 
  47.                 <div class="col-md-12 form-inline"> 
  48.                     <div class="form-group input-group"> 
  49.                         <span class="input-group-addon">IsMarried:</span> 
  50.                         @Html.DropDownList("ddlMarried", ViewBag.MarriedList as SelectList, null, new { id = "ddlMarried", @class = "form-control" }) 
  51.                     </div> 
  52.                     <div class="form-group" style="margin-left:10px"> 
  53.                         <label class="control-label">BirthDay:</label> 
  54.                         <input type="date" id="txtdatestart" class="form-control"> 
  55.                         <label class="control-label">-</label> 
  56.                         <input type="date" id="txtdateend" class="form-control"> 
  57.                     </div> 
  58.                     <div class="form-group input-group" style="margin-left:10px"> 
  59.                         <span class="input-group-addon">Name:</span> 
  60.                         <input id="txtusername" type="text" class="form-control" placeholder="input name..." style="width:120px" /> 
  61.                     </div> 
  62.                     <div class="form-group" style="margin-left:10px"> 
  63.                         <input id="btnsearch" type="button" class="btn btn-info" value="Get" style="width:70px" /> 
  64.                     </div> 
  65.                 </div> 
  66.             </div> 
  67.             <div class="row" style="margin-top:10px"> 
  68.                 <div id="divresult" class="col-md-7 form-inline  pre-Scrollable"> 
  69.                     @{Html.RenderPartial("~/Views/Partial/UserInfoPartial.cshtml");} 
  70.                 </div> 
  71.                 <div class="col-md-5"> 
  72.                     @{Html.RenderPartial("~/Views/Partial/DiffAndSameWithSolrPartial.cshtml");} 
  73.                 </div> 
  74.             </div> 
  75.         </form> 
  76.     </div> 
  77. </body> 
  78. </html> 

咱們使用html5+BootStrap佈局，這裏用到了BootStrap的網格系統，將瀏覽器平分爲12份，即12列，很容易構造出響應式佈局系統。那麼什麼是BootStrap的網格系統，看以下的解釋ajax

ASP.NET MVC4+BootStrap實戰

OK，咱們怎麼看是不是響應式的佈局呢，咱們打開谷歌瀏覽器，現將瀏覽器縮小到必定程度。sql

ASP.NET MVC4+BootStrap實戰

看到了吧，即便設備瀏覽器這麼小，咱們仍是能用。那咱們在手機模擬器中測試一下，打開谷歌瀏覽器，按F12，點擊手機模擬器樣的東西，而後Device選擇iphone6。 bootstrap

ASP.NET MVC4+BootStrap實戰

咱們看到iphone6下面的效果是這樣的。說到這裏我最近很討厭兩個廣告，一個是「這個是iphone6，這個是iphone6 plus，它們都有一個叫健康的東西.....可是好吃啊」，還有一個是「當牛魔王變成一個餃子，我願意變成一雙筷子」。看到這兩個廣告，我想砸電視。瀏覽器

那爲何不一樣的設備不一樣的瀏覽器都是能夠正常瀏覽的呢，緣由就在於這段代碼

  1. <meta name="viewport" content="width=device-width;initial-scale=1" /> 

這段代碼的意思是網頁寬度默認等於屏幕寬度，縮放比例默認爲1(網頁初始比例佔屏幕的100%)。

ok，咱們接下來看head部分css和js的引用，這裏有個新東西叫Bundle，用來打包壓縮js或者css的。經過它打包壓縮的js或者css客戶端只須要下載一次包便可，並且能夠在客戶端緩存起來，當檢測到有更新時，纔會從新下載。

下面是Bundle.cs的代碼

  1. using System.Web; 
  2. using System.Web.Optimization; 
  3.   
  4. namespace Brue.GRLC.Web 
  5. { 
  6.     public class BundleConfig 
  7.     { 
  8.         // 有關 Bundling 的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725 
  9.         public static void RegisterBundles(BundleCollection bundles) 
  10.         { 
  11.             bundles.Add(new ScriptBundle("~/bundles/BootStrap").Include( 
  12.                         "~/Scripts/jquery-1.11.1.js","~/BootStrap/js/bootstrap.js")); 
  13.   
  14.             bundles.Add(new ScriptBundle("~/bundles/Scripts").Include("~/Js/Index.js")); 
  15.   
  16.             bundles.Add(new StyleBundle("~/css").Include("~/BootStrap/css/bootstrap-theme.css" 
  17.                 , "~/BootStrap/css/bootstrap.css")); 
  18.         } 
  19.     } 
  20. } 

注意，在這裏引用js的時候不要引用壓縮過的js，好比xxx.min.js。當Bundle在遇到這種js命名文件的時候，直接就忽略掉了。那麼咱們在Head中只須要使用以下代碼來引用便可。

  1. @Scripts.Render("~/bundles/BootStrap") 
  2. @Scripts.Render("~/bundles/Scripts") 

OK，在這我碰到一個問題，就是個人css經過這種方式引用，始終提示Index out of range。若是哪位大牛知道緣由的話麻煩留個言，謝謝!

 

OK，咱們接下來看一下控制器代碼，頁面剛進來，會走Home/Index。

  1. public ActionResult Index() 
  2.         { 
  3.             List<object> marriedList = GRLCBiz.GetInstance().GetMarriedList(); 
  4.             SelectList selectList = new SelectList(marriedList, "MarriedID", "DisplayContent", "-1"); 
  5.             ViewBag.MarriedList = selectList; 
  6.   
  7.             DataResponse<UserDBEntity> dataResponse = GRLCBiz.GetInstance().GetUserInfoEntityList(); 
  8.             UserInfoViewModel userInfoViewModel = new UserInfoViewModel(); 
  9.             userInfoViewModel.DataResponse = dataResponse; 
  10.             userInfoViewModel.DataResponse.PageIndex = ConstValues.CONN_DefaultPageIndex; 
  11.             userInfoViewModel.DataResponse.PageSize = ConstValues.CONN_DefaultPageSize; 
  12.             userInfoViewModel.DataResponse.StartPageIndex = 1; 
  13.             return View(userInfoViewModel); 
  14.         } 

首先咱們構造了一個SelectList用於下拉列表，Biz層的代碼很簡單

  1. public dynamic GetMarriedList() 
  2.         { 
  3.             IList<object> marriedList = new List<object>(); 
  4.             marriedList.Add(new { MarriedID = -1, DisplayContent = "No Selection" }); 
  5.             marriedList.Add(new { MarriedID = 0, DisplayContent = "Married" }); 
  6.             marriedList.Add(new { MarriedID = 1, DisplayContent = "UnMarried" }); 
  7.   
  8.             return marriedList; 
  9.         } 

用匿名類去構造一個List。接下來就是DataReponse的獲取，Biz層的代碼以下

  1. public DataResponse<UserDBEntity> GetUserInfoEntityList(UserInfoRequest request = null) 
  2.         { 
  3.             if(request==null) 
  4.             { 
  5.                 request = new UserInfoRequest(); 
  6.                 request.PageIndex = ConstValues.CONN_DefaultPageIndex; 
  7.                 request.PageSize = ConstValues.CONN_DefaultPageSize; 
  8.             } 
  9.             
  10.             int totalCount=0; 
  11.   
  12.             List<UserDBEntity> userDBEntityList = GRLCDAL.GetInstance().GetUserInfoEntityList(request, out totalCount); 
  13.             DataResponse<UserDBEntity> dataResponse = new DataResponse<UserDBEntity>(); 
  14.             dataResponse.DataList = userDBEntityList; 
  15.             dataResponse.TotalCount = totalCount; 
  16.             return dataResponse; 
  17.         } 

沒什麼可說的，ConstValues類中是一些靜態只讀屬性

  1. public class ConstValues 
  2.     { 
  3.         public static readonly string CON_DBConnection = ConfigurationManager.ConnectionStrings["DB_ConnectionStr"].ToString(); 
  4.         public static readonly string CON_DbScriptXmlFolder = ConfigurationManager.AppSettings["DbScriptXmlFolder"]; 
  5.         public static readonly int CONN_DefaultPageSize = int.Parse(ConfigurationManager.AppSettings["DefaultPageSize"]); 
  6.         public static readonly int CONN_DefaultPageIndex = 1; 
  7.         public static readonly int CONN_PagerDisplayCount = int.Parse(ConfigurationManager.AppSettings["PagerDisplayCount"]); 
  8.     } 

看一下DAL層。

  1. public List<UserDBEntity> GetUserInfoEntityList(UserInfoRequest request, out int totalCount) 
  2.         { 
  3.             totalCount = 0; 
  4.             string sqlScript = string.Empty; 
  5.             try 
  6.             { 
  7.                 sqlScript = DBScriptManager.GetScript(this.GetType(), "GetUserInfo"); 
  8.                 SqlParameter[] sqlParameters =  
  9.                 { 
  10.                     new SqlParameter("@IsMarried",SqlDbType.Char,1), 
  11.                     new SqlParameter("@StartDate",SqlDbType.DateTime), 
  12.                     new SqlParameter("@EndDate",SqlDbType.DateTime), 
  13.                     new SqlParameter("@UserName",SqlDbType.NVarChar,20), 
  14.                     new SqlParameter("@PageIndex",SqlDbType.Int), 
  15.                     new SqlParameter("@PageSize",SqlDbType.Int), 
  16.                     new SqlParameter("@TotalCount",SqlDbType.Int) 
  17.                 }; 
  18.   
  19.                 sqlParameters[0].Value = request.IsMarried; 
  20.                 sqlParameters[1].Value = request.StartDate; 
  21.                 sqlParameters[2].Value = request.EndDate; 
  22.                 sqlParameters[3].Value = request.UserName; 
  23.                 sqlParameters[4].Value = request.PageIndex; 
  24.                 sqlParameters[5].Value = request.PageSize; 
  25.                 sqlParameters[6].Direction = ParameterDirection.Output; 
  26.   
  27.                 DataSet ds = SqlHelper.ExecuteDataset(ConstValues.CON_DBConnection, CommandType.Text, sqlScript, sqlParameters); 
  28.                 if (ds != null && ds.Tables.Count > 0) 
  29.                 { 
  30.                     totalCount = Convert.ToInt32(sqlParameters[6].Value); 
  31.                     return ds.Tables[0].ToEntityList<UserDBEntity>(); 
  32.                 } 
  33.   
  34.                 return new List<UserDBEntity>(); 
  35.             } 
  36.             catch (Exception ex) 
  37.             { 
  38.                 LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(), ex); 
  39.                 return null; 
  40.             } 
  41.         } 

OK，咱們看一下這個GetUserInfo腳本，在Bruce.GRLC.DbScriptXml程序集下。

ASP.NET MVC4+BootStrap實戰

  1. <?xml version="1.0" encoding="utf-8" ?> 
  2. <Scripts> 
  3.   <Script Key="GetUserInfo"> 
  4.     <![CDATA[ 
  5. DECLARE @UserTempTable TABLE 
  6. (   
  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. 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 OR @IsMarried = '' OR B.Temper = @IsMarried) 
  21.     AND 
  22.     ( 
  23.         @StartDate IS NULL  
  24.         OR @EndDate IS NULL  
  25.         OR B.BirthDay BETWEEN @StartDate AND @EndDate 
  26.     ) 
  27.     AND  
  28.     ( 
  29.         @UserName IS NULL  
  30.         OR @UserName = ''  
  31.         OR B.Name LIKE '%' + @UserName + '%' 
  32.     ) 
  33. ORDER BY A.UseNo ASC 
  34.       
  35. SELECT @TotalCount = COUNT(1) FROM @UserTempTable 
  36.   
  37. SELECT 
  38.     UseNo, 
  39.     Name, 
  40.     Age, 
  41.     Married 
  42. FROM( 
  43.     SELECT 
  44.         ID = ROW_NUMBER() OVER(ORDER BY UseNo ASC), 
  45.         A.UseNo, 
  46.         B.Name, 
  47.         B.Age, 
  48.         Married = CASE WHEN B.Temper = '1' 
  49.                         THEN '已婚' 
  50.                        ELSE '未婚' 
  51.                   END 
  52.         FROM Bonus.dbo.[User] A WITH(NOLOCK) 
  53.     LEFT JOIN Bonus.dbo.UerInfo B WITH(NOLOCK) 
  54.         ON A.UseNo = B.UseNo 
  55.     INNER JOIN @UserTempTable C 
  56.         ON C.UserNo = A.UseNo 
  57. ) N 
  58. WHERE ID BETWEEN (@PageIndex - 1)* @PageSize + 1 AND @PageIndex * @PageSize 
  59.    ]]> 
  60.   </Script> 
  61. </Scripts> 

腳本很簡單，就是傳入參數查分頁數據。

在DAL層咱們將DataTable經過ToEntityList轉化爲了實體List，在Utility中咱們定義了一個擴展用來轉化。

  1. public static class DataTableToEntityExtension 
  2.     { 
  3.         public static List<T> ToEntityList<T>(this DataTable dt) where T : class,new() 
  4.         { 
  5.             List<T> entityList = new List<T>(); 
  6.   
  7.             Type entityType = typeof(T); 
  8.             PropertyInfo[] propertys = entityType.GetProperties(); 
  9.             DataMappingAttribute mappingAttribute = null; 
  10.   
  11.             foreach (DataRow dr in dt.Rows) 
  12.             { 
  13.                 T tEntity = new T(); 
  14.   
  15.                 foreach (PropertyInfo pi in propertys) 
  16.                 { 
  17.                     mappingAttribute = pi.GetCustomAttribute(typeof(DataMappingAttribute)) as DataMappingAttribute; 
  18.   
  19.                     if (mappingAttribute != null && dt.Columns.Contains(mappingAttribute.mappingName)) 
  20.                     {  
  21.                         if (!pi.CanWrite) continue; 
  22.   
  23.                         object value = dr[mappingAttribute.mappingName]; 
  24.                         if (value != DBNull.Value) 
  25.                             pi.SetValue(tEntity, value, null); 
  26.                     } 
  27.                 } 
  28.                 entityList.Add(tEntity); 
  29.             } 
  30.             return entityList; 
  31.         } 
  32.     } 

值那麼轉化的時候是怎麼讓DataTable的列和實體匹配起來，你能夠將列別名和實體定義成同樣的，還有一種你可使用Attribute。那咱們使用後者，由於後者更靈活。

  1. [AttributeUsage(AttributeTargets.Property)] 
  2.     public class DataMappingAttribute : Attribute 
  3.     { 
  4.         public string mappingName; 
  5.         public DbType dbType; 
  6.         public DataMappingAttribute() 
  7.         { } 
  8.   
  9.         public DataMappingAttribute(string mappingName, DbType dbType) 
  10.         { 
  11.             this.mappingName = mappingName; 
  12.             this.dbType = dbType; 
  13.         } 
  14.     } 

定義好Attribute以後，咱們設置其能使用的目標只能是Property。而後咱們在實體類裏面的屬性上加上這個Attribute。

  1. namespace Bruce.GRLC.Model.Entity 
  2. { 
  3.     public class UserDBEntity 
  4.     { 
  5.         [DataMapping("UseNo", DbType.AnsiString)] 
  6.         public string UserID { get; set; } 
  7.   
  8.         [DataMapping("Name", DbType.AnsiString)] 
  9.         public string UserName { get; set; } 
  10.   
  11.         [DataMapping("Age", DbType.Int32)] 
  12.         public int Age { get; set; } 
  13.   
  14.         [DataMapping("Married", DbType.String)] 
  15.         public string Married { get; set; } 
  16.     } 
  17. } 

在DataTableToEntityExtension這個擴展中咱們獲得屬性的Attribute去和DataTable的列名去匹配，反射賦值。

OK，拿到數據後，咱們在控制器構造viewModel，傳遞給界面來綁定。咱們看一下部分頁UserInfoPartial.cshtml的代碼

  1. @using Bruce.GRLC.Model.ViewModel; 
  2. @model UserInfoViewModel 
  3. <table id="tabuserinfo" class="table table-bordered table-hover"> 
  4.     <thead> 
  5.         <tr style="background-color: #2aabd2;color:white"> 
  6.             <th>賬號</th> 
  7.             <th>姓名</th> 
  8.             <th>年齡</th> 
  9.             <th>婚否</th> 
  10.         </tr> 
  11.     </thead> 
  12.     <tbody> 
  13.         @if (Model != null && Model.DataResponse != null && Model.DataResponse.DataList != null) 
  14.         { 
  15.             foreach (var userEntity in Model.DataResponse.DataList) 
  16.             { 
  17.                 <tr> 
  18.                     <td> 
  19.                         @userEntity.UserID 
  20.                     </td> 
  21.                     <td> 
  22.                         @userEntity.UserName 
  23.                     </td> 
  24.                     <td> 
  25.                         @userEntity.Age 
  26.                     </td> 
  27.                     <td> 
  28.                         @userEntity.Married 
  29.                     </td> 
  30.                 </tr> 
  31.             } 
  32.         } 
  33.     </tbody> 
  34. </table> 
  35. <div id="divpagination"> 
  36.     @{Html.RenderPartial("~/Views/Partial/PaginationPartial.cshtml", Model.DataResponse);} 
  37. </div> 

其實也就是一個應用了BoootStrap樣式的表格，有邊框和鼠標通過的樣式。關於BootStrap的樣式的使用，請參考BootStrap官網。代碼很簡單，就是循環遍歷，展現數據。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程