【博文推荐】ASP.NETMVC4+BootStrap实战

本博文出自博客BruceAndLee博主，有任何问题请进入博主页面互动讨论!

博文地址：http://leelei.blog./856755/1587301

OK，不多说了，看一下Solution的截图

基本上一看就明白了，控制器调用Biz层，Biz层调用DAL层，DAL层进行数据的CURD。Utility是一些公用的类库。ok，为什么程序集的命名都是以Bruce开头呢，因为我在公司的英文名叫这个。废话不多说，我们先看一下页面

 

我们引入了BootStrap，主要是为了页面布局。在Views中Partial下面放的都是部分页。

我们先看一下运行效果，今天主要是讲页面初始化部分。

其实查询条件就是婚否，出生日期，姓名的模糊查询。我们先看一下页面Index.cshtml的代码

 
 
    
  
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.  
    4.   
  
  4.      
    5.   
  
  5.      
    6.   
  
  6.      
    7.   
  
  7.     Compare data between Solr and DB 
    8.   
  
  8.      
    9.   
  
  9.      
    10.   
  
  10.           @*@Styles.Render("~/css")*@ 
    11.   
  
  11.           @Scripts.Render("~/bundles/BootStrap") 
    12.   
  
  12.           @Scripts.Render("~/bundles/Scripts") 
    13.   
  
  13.      
    14.   
  
  14.         .pre-Scrollable { 
    15.   
  
  15.             max-height: 700px; 
    16.   
  
  16.             overflow-y: scroll; 
    17.   
  
  17.         } 
    18.   
  
  18.      
    19.   
  
  19.  
    20.   
  
  20.  
    21.   
  
  21.      
    22.   
  
  22.          
    23.   
  
  23.              
    24.   
  
  24.                  
    25.   
  
  25.                     Compare Data Between Solr and DB 
    26.   
  
  26.                 
 
  •             
    •  
  •              
  •                  
  •                      
  •                      
  •                 
    •  
  •              
  •              
  •                  
  •                      
  •                      
  •                  
  •              
  •              
  •                  
  •                      
  •                      
  •                  
  •              
  •              
  •                  
  •                      
  •                         IsMarried: 
  •                         @Html.DropDownList("ddlMarried", ViewBag.MarriedList as SelectList, null, new { id = "ddlMarried", @class = "form-control" }) 
  •                      
  •                      
  •                         BirthDay: 
  •                          
  •                         - 
  •                          
  •                      
  •                      
  •                         Name: 
  •                          
  •                      
  •                      
  •                          
  •                      
  •                  
  •              
  •              
  •                  
  •                     @{Html.RenderPartial("~/Views/Partial/UserInfoPartial.cshtml");} 
  •                  
  •                  
  •                     @{Html.RenderPartial("~/Views/Partial/DiffAndSameWithSolrPartial.cshtml");} 
  •                  
  •              
  •          
  •      
  •  
  •  

    • 我们使用html5+BootStrap布局，这里用到了BootStrap的网格系统，将浏览器平分为12份，即12列，很容易构造出响应式布局系统。那么什么是BootStrap的网格系统，看如下的解释

     OK，我们怎么看是否是响应式的布局呢，我们打开谷歌浏览器，现将浏览器缩小到一定程度。

    看到了吧，即使设备浏览器这么小，我们还是能用。那我们在手机模拟器中测试一下，打开谷歌浏览器，按F12，点击手机模拟器样的东西，然后Device选择iphone6。 

    我们看到iphone6下面的效果是这样的。说到这里我最近很讨厌两个广告，一个是“这个是iphone6，这个是iphone6 plus，它们都有一个叫健康的东西.....但是好吃啊”，还有一个是“当牛魔王变成一个饺子，我愿意变成一双筷子”。看到这两个广告，我想砸电视。

    那为什么不同的设备不同的浏览器都是可以正常浏览的呢，原因就在于这段代码

     
 
      
  
  
    1.  
      2.

    这段代码的意思是网页宽度默认等于屏幕宽度，缩放比例默认为1(网页初始比例占屏幕的100%)。

    ok，我们接下来看head部分css和js的引用，这里有个新东西叫Bundle，用来打包压缩js或者css的。通过它打包压缩的js或者css客户端只需要下载一次包即可，而且可以在客户端缓存起来，当检测到有更新时，才会重新下载。

    下面是Bundle.cs的代码

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

    注意，在这里引用js的时候不要引用压缩过的js，比如xxx.min.js。当Bundle在遇到这种js命名文件的时候，直接就忽略掉了。那么我们在Head中只需要使用如下代码来引用即可。

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

    OK，在这我碰到一个问题，就是我的css通过这种方式引用，始终提示Index out of range。如果哪位大牛知道原因的话麻烦留个言，谢谢!

     

    OK，我们接下来看一下控制器代码，页面刚进来，会走Home/Index。

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

      首先我们构造了一个SelectList用于下拉列表，Biz层的代码很简单
       
 
        
  
  
      1. public dynamic GetMarriedList() 
        2.   
  
      2.         { 
        3.   
  
      3.             IList marriedList = new List();   
  
      4.             marriedList.Add(new { MarriedID = -1, DisplayContent = "No Selection" }); 
        5.   
  
      5.             marriedList.Add(new { MarriedID = 0, DisplayContent = "Married" }); 
        6.   
  
      6.             marriedList.Add(new { MarriedID = 1, DisplayContent = "UnMarried" }); 
        7.   
  
      7.   
        8.   
  
      8.             return marriedList; 
        9.   
  
      9.         } 
        10.  
 

        用匿名类去构造一个List。接下来就是DataReponse的获取，Biz层的代码如下
         
 
          
  
  
        1. public DataResponse GetUserInfoEntityList(UserInfoRequest request = null) 
          2.   
  
        2.         { 
          3.   
  
        3.             if(request==null) 
          4.   
  
        4.             { 
          5.   
  
        5.                 request = new UserInfoRequest(); 
          6.   
  
        6.                 request.PageIndex = ConstValues.CONN_DefaultPageIndex; 
          7.   
  
        7.                 request.PageSize = ConstValues.CONN_DefaultPageSize; 
          8.   
  
        8.             } 
          9.   
  
        9.             
          10.   
  
        10.             int totalCount=0; 
          11.   
  
        11.   
          12.   
  
        12.             List userDBEntityList = GRLCDAL.GetInstance().GetUserInfoEntityList(request, out totalCount); 
          13.   
  
        13.             DataResponse dataResponse = new DataResponse(); 
          14.   
  
        14.             dataResponse.DataList = userDBEntityList; 
          15.   
  
        15.             dataResponse.TotalCount = totalCount; 
          16.   
  
        16.             return dataResponse; 
          17.   
  
        17.         } 
          18.  
 
        

        没什么可说的，ConstValues类中是一些静态只读属性
         
 
          
  
  
        1. public class ConstValues 
          2.   
  
        2.     { 
          3.   
  
        3.         public static readonly string CON_DBConnection = ConfigurationManager.ConnectionStrings["DB_ConnectionStr"].ToString(); 
          4.   
  
        4.         public static readonly string CON_DbScriptXmlFolder = ConfigurationManager.AppSettings["DbScriptXmlFolder"]; 
          5.   
  
        5.         public static readonly int CONN_DefaultPageSize = int.Parse(ConfigurationManager.AppSettings["DefaultPageSize"]); 
          6.   
  
        6.         public static readonly int CONN_DefaultPageIndex = 1; 
          7.   
  
        7.         public static readonly int CONN_PagerDisplayCount = int.Parse(ConfigurationManager.AppSettings["PagerDisplayCount"]); 
          8.   
  
        8.     } 
          9.  
 
        

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

        OK，我们看一下这个GetUserInfo脚本，在Bruce.GRLC.DbScriptXml程序集下。
         
 
          
  
  
        1.  
          2.   
  
        2.  
          3.   
  
        3.    
          4.   
  
        4.       
  
        5. DECLARE @UserTempTable TABLE 
          6.   
  
        6. (   
          7.   
  
        7.     ID INT IDENTITY(1,1) NOT NULL, 
          8.   
  
        8.     UserNo CHAR(25) NOT NULL 
          9.   
  
        9. ) 
          10.   
  
        10.   
          11.   
  
        11. INSERT INTO @UserTempTable 
          12.   
  
        12. ( 
          13.   
  
        13.     UserNo 
          14.   
  
        14. ) 
          15.   
  
        15. SELECT 
          16.   
  
        16.     A.UseNo 
          17.   
  
        17. FROM Bonus.dbo.[User] A WITH(NOLOCK) 
          18.   
  
        18. LEFT JOIN Bonus.dbo.UerInfo B WITH(NOLOCK) 
          19.   
  
        19.     ON A.UseNo = B.UseNo 
          20.   
  
        20. WHERE (@IsMarried IS NULL OR @IsMarried = '' OR B.Temper = @IsMarried) 
          21.   
  
        21.     AND 
          22.   
  
        22.     ( 
          23.   
  
        23.         @StartDate IS NULL  
          24.   
  
        24.         OR @EndDate IS NULL  
          25.   
  
        25.         OR B.BirthDay BETWEEN @StartDate AND @EndDate 
          26.   
  
        26.     ) 
          27.   
  
        27.     AND  
          28.   
  
        28.     ( 
          29.   
  
        29.         @UserName IS NULL  
          30.   
  
        30.         OR @UserName = ''  
          31.   
  
        31.         OR B.Name LIKE '%' + @UserName + '%' 
          32.   
  
        32.     ) 
          33.   
  
        33. ORDER BY A.UseNo ASC 
          34.   
  
        34.       
          35.   
  
        35. SELECT @TotalCount = COUNT(1) FROM @UserTempTable 
          36.   
  
        36.   
          37.   
  
        37. SELECT 
          38.   
  
        38.     UseNo, 
          39.   
  
        39.     Name, 
          40.   
  
        40.     Age, 
          41.   
  
        41.     Married 
          42.   
  
        42. FROM( 
          43.   
  
        43.     SELECT 
          44.   
  
        44.         ID = ROW_NUMBER() OVER(ORDER BY UseNo ASC), 
          45.   
  
        45.         A.UseNo, 
          46.   
  
        46.         B.Name, 
          47.   
  
        47.         B.Age, 
          48.   
  
        48.         Married = CASE WHEN B.Temper = '1' 
          49.   
  
        49.                         THEN '已婚' 
          50.   
  
        50.                        ELSE '未婚' 
          51.   
  
        51.                   END 
          52.   
  
        52.         FROM Bonus.dbo.[User] A WITH(NOLOCK) 
          53.   
  
        53.     LEFT JOIN Bonus.dbo.UerInfo B WITH(NOLOCK) 
          54.   
  
        54.         ON A.UseNo = B.UseNo 
          55.   
  
        55.     INNER JOIN @UserTempTable C 
          56.   
  
        56.         ON C.UserNo = A.UseNo 
          57.   
  
        57. ) N 
          58.   
  
        58. WHERE ID BETWEEN (@PageIndex - 1)* @PageSize + 1 AND @PageIndex * @PageSize 
          59.   
  
        59.    ]]> 
          60.   
  
        60.    
          61.   
  
        61.  
          62.  
 
        

        脚本很简单，就是传入参数查分页数据。
        在DAL层我们将DataTable通过ToEntityList转化为了实体List，在Utility中我们定义了一个扩展用来转化。
         
 
          
  
  
        1. public static class DataTableToEntityExtension 
          2.   
  
        2.     { 
          3.   
  
        3.         public static List ToEntityList(this DataTable dt) where T : class,new() 
          4.   
  
        4.         { 
          5.   
  
        5.             List entityList = new List(); 
          6.   
  
        6.   
          7.   
  
        7.             Type entityType = typeof(T); 
          8.   
  
        8.             PropertyInfo[] propertys = entityType.GetProperties(); 
          9.   
  
        9.             DataMappingAttribute mappingAttribute = null; 
          10.   
  
        10.   
          11.   
  
        11.             foreach (DataRow dr in dt.Rows) 
          12.   
  
        12.             { 
          13.   
  
        13.                 T tEntity = new T(); 
          14.   
  
        14.   
          15.   
  
        15.                 foreach (PropertyInfo pi in propertys) 
          16.   
  
        16.                 { 
          17.   
  
        17.                     mappingAttribute = pi.GetCustomAttribute(typeof(DataMappingAttribute)) as DataMappingAttribute; 
          18.   
  
        18.   
          19.   
  
        19.                     if (mappingAttribute != null && dt.Columns.Contains(mappingAttribute.mappingName)) 
          20.   
  
        20.                     {  
          21.   
  
        21.                         if (!pi.CanWrite) continue; 
          22.   
  
        22.   
          23.   
  
        23.                         object value = dr[mappingAttribute.mappingName]; 
          24.   
  
        24.                         if (value != DBNull.Value) 
          25.   
  
        25.                             pi.SetValue(tEntity, value, null); 
          26.   
  
        26.                     } 
          27.   
  
        27.                 } 
          28.   
  
        28.                 entityList.Add(tEntity); 
          29.   
  
        29.             } 
          30.   
  
        30.             return entityList; 
          31.   
  
        31.         } 
          32.   
  
        32.     } 
          33.  
 
        

        值那么转化的时候是怎么让DataTable的列和实体匹配起来，你可以将列别名和实体定义成一样的，还有一种你可以使用Attribute。那我们使用后者，因为后者更灵活。
         
 
          
  
  
        1. [AttributeUsage(AttributeTargets.Property)] 
          2.   
  
        2.     public class DataMappingAttribute : Attribute 
          3.   
  
        3.     { 
          4.   
  
        4.         public string mappingName; 
          5.   
  
        5.         public DbType dbType; 
          6.   
  
        6.         public DataMappingAttribute() 
          7.   
  
        7.         { } 
          8.   
  
        8.   
          9.   
  
        9.         public DataMappingAttribute(string mappingName, DbType dbType) 
          10.   
  
        10.         { 
          11.   
  
        11.             this.mappingName = mappingName; 
          12.   
  
        12.             this.dbType = dbType; 
          13.   
  
        13.         } 
          14.   
  
        14.     } 
          15.  
 
        

        定义好Attribute之后，我们设置其能使用的目标只能是Property。然后我们在实体类里面的属性上加上这个Attribute。
         
 
          
  
  
        1. namespace Bruce.GRLC.Model.Entity 
          2.   
  
        2. { 
          3.   
  
        3.     public class UserDBEntity 
          4.   
  
        4.     { 
          5.   
  
        5.         [DataMapping("UseNo", DbType.AnsiString)] 
          6.   
  
        6.         public string UserID { get; set; } 
          7.   
  
        7.   
          8.   
  
        8.         [DataMapping("Name", DbType.AnsiString)] 
          9.   
  
        9.         public string UserName { get; set; } 
          10.   
  
        10.   
          11.   
  
        11.         [DataMapping("Age", DbType.Int32)] 
          12.   
  
        12.         public int Age { get; set; } 
          13.   
  
        13.   
          14.   
  
        14.         [DataMapping("Married", DbType.String)] 
          15.   
  
        15.         public string Married { get; set; } 
          16.   
  
        16.     } 
          17.   
  
        17. } 
          18.  
 
        

        在DataTableToEntityExtension这个扩展中我们得到属性的Attribute去和DataTable的列名去匹配，反射赋值。
        OK，拿到数据后，我们在控制器构造viewModel，传递给界面来绑定。我们看一下部分页UserInfoPartial.cshtml的代码
         
 
          
  
  
        1. @using Bruce.GRLC.Model.ViewModel; 
          2.   
  
        2. @model UserInfoViewModel 
          3.   
  
        3.  
          4.   
  
        4.      
          5.   
  
        5.          
          6.   
  
        6.             帐号 
          7.   
  
        7.             姓名 
          8.   
  
        8.             年龄 
          9.   
  
        9.             婚否 
          10.   
  
        10.          
          11.   
  
        11.      
          12.   
  
        12.      
          13.   
  
        13.         @if (Model != null && Model.DataResponse != null && Model.DataResponse.DataList != null) 
          14.   
  
        14.         { 
          15.   
  
        15.             foreach (var userEntity in Model.DataResponse.DataList) 
          16.   
  
        16.             { 
          17.   
  
        17.                  
          18.   
  
        18.                      
          19.   
  
        19.                         @userEntity.UserID 
          20.   
  
        20.                      
          21.   
  
        21.                      
          22.   
  
        22.                         @userEntity.UserName 
          23.   
  
        23.                      
          24.   
  
        24.                      
          25.   
  
        25.                         @userEntity.Age 
          26.   
  
        26.                      
          27.   
  
        27.                      
          28.   
  
        28.                         @userEntity.Married 
          29.   
  
        29.                      
          30.   
  
        30.                  
          31.   
  
        31.             } 
          32.   
  
        32.         } 
          33.   
  
        33.      
          34.   
  
        34.  
          35.   
  
        35.  
          36.   
  
        36.     @{Html.RenderPartial("~/Views/Partial/PaginationPartial.cshtml", Model.DataResponse);} 
          37.   
  
        37.  
          38.  
 
        

        其实也就是一个应用了BoootStrap样式的表格，有边框和鼠标经过的样式。关于BootStrap的样式的使用，请参考BootStrap官网。代码很简单，就是循环遍历，展示数据。
         
                    
        
                当前题目：【博文推荐】ASP.NETMVC4+BootStrap实战
                
        
                文章URL：http://www.shufengxianlan.com/qtweb/news0/421500.html
            
        
            
        
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
        
            
        
                广告
                
            
        
            
        
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
        
        
        
        
            
        猜你还喜欢下面的内容
        
            
        
        
    
    
        
        
        
            
        外贸建站知识
        
            
        
        
        
        
            
        各行业网站
        
            
        
        
    
        


        
    
        
        网络推广外包　　 　成都企业网站改版　　 　成都网络营销　　 　普格博源建站　　 　域名注册　　 　成都商城app开发　　 　小程序开发　　 　成都免费网站建设公司　　 　成都租用服务器　　 　网站定制　　 　成都画册设计　　 　Android开发　　 　证企宝企业服务　　 　成都云主机　　 　成都网络营销公司　　 　广安网站制作公司　　 　微信小程序开发　　 　高端网站设计　　 　郫县网站建设　　 　官网SEO排名