新聞中心
|
本博文出自博客BruceAndLee博主,有任何問題請進(jìn)入博主頁面互動討論!
博文地址:http://leelei.blog./856755/1587301 |
OK,不多說了,看一下Solution的截圖
基本上一看就明白了,控制器調(diào)用Biz層,Biz層調(diào)用DAL層,DAL層進(jìn)行數(shù)據(jù)的CURD。Utility是一些公用的類庫。ok,為什么程序集的命名都是以Bruce開頭呢,因?yàn)槲以诠镜挠⑽拿羞@個。廢話不多說,我們先看一下頁面
我們引入了BootStrap,主要是為了頁面布局。在Views中Partial下面放的都是部分頁。
我們先看一下運(yùn)行效果,今天主要是講頁面初始化部分。
其實(shí)查詢條件就是婚否,出生日期,姓名的模糊查詢。我們先看一下頁面Index.cshtml的代碼
Compare data between Solr and DB - @*@Styles.Render("~/css")*@
- @Scripts.Render("~/bundles/BootStrap")
- @Scripts.Render("~/bundles/Scripts")
Compare Data Between Solr and DB
![]()
![]()
![]()
- IsMarried:
- @Html.DropDownList("ddlMarried", ViewBag.MarriedList as SelectList, null, new { id = "ddlMarried", @class = "form-control" })
- Name:
- @{Html.RenderPartial("~/Views/Partial/UserInfoPartial.cshtml");}
- @{Html.RenderPartial("~/Views/Partial/DiffAndSameWithSolrPartial.cshtml");}
我們使用html5+BootStrap布局,這里用到了BootStrap的網(wǎng)格系統(tǒng),將瀏覽器平分為12份,即12列,很容易構(gòu)造出響應(yīng)式布局系統(tǒng)。那么什么是BootStrap的網(wǎng)格系統(tǒng),看如下的解釋
OK,我們怎么看是否是響應(yīng)式的布局呢,我們打開谷歌瀏覽器,現(xiàn)將瀏覽器縮小到一定程度。
看到了吧,即使設(shè)備瀏覽器這么小,我們還是能用。那我們在手機(jī)模擬器中測試一下,打開谷歌瀏覽器,按F12,點(diǎn)擊手機(jī)模擬器樣的東西,然后Device選擇iphone6。
我們看到iphone6下面的效果是這樣的。說到這里我最近很討厭兩個廣告,一個是“這個是iphone6,這個是iphone6 plus,它們都有一個叫健康的東西.....但是好吃啊”,還有一個是“當(dāng)牛魔王變成一個餃子,我愿意變成一雙筷子”。看到這兩個廣告,我想砸電視。
那為什么不同的設(shè)備不同的瀏覽器都是可以正常瀏覽的呢,原因就在于這段代碼
這段代碼的意思是網(wǎng)頁寬度默認(rèn)等于屏幕寬度,縮放比例默認(rèn)為1(網(wǎng)頁初始比例占屏幕的100%)。
ok,我們接下來看head部分css和js的引用,這里有個新東西叫Bundle,用來打包壓縮js或者css的。通過它打包壓縮的js或者css客戶端只需要下載一次包即可,而且可以在客戶端緩存起來,當(dāng)檢測到有更新時,才會重新下載。
下面是Bundle.cs的代碼
- using System.Web;
- using System.Web.Optimization;
- namespace Brue.GRLC.Web
- {
- public class BundleConfig
- {
- // 有關(guān) Bundling 的詳細(xì)信息,請?jiān)L問 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。當(dāng)Bundle在遇到這種js命名文件的時候,直接就忽略掉了。那么我們在Head中只需要使用如下代碼來引用即可。
- @Scripts.Render("~/bundles/BootStrap")
- @Scripts.Render("~/bundles/Scripts")
OK,在這我碰到一個問題,就是我的css通過這種方式引用,始終提示Index out of range。如果哪位大牛知道原因的話麻煩留個言,謝謝!
OK,我們接下來看一下控制器代碼,頁面剛進(jìn)來,會走Home/Index。
- public ActionResult Index()
- {
- List
- SelectList selectList = new SelectList(marriedList, "MarriedID", "DisplayContent", "-1");
- ViewBag.MarriedList = selectList;
- DataResponse
dataResponse = GRLCBiz.GetInstance().GetUserInfoEntityList(); - UserInfoViewModel userInfoViewModel = new UserInfoViewModel();
- userInfoViewModel.DataResponse = dataResponse;
- userInfoViewModel.DataResponse.PageIndex = ConstValues.CONN_DefaultPageIndex;
- userInfoViewModel.DataResponse.PageSize = ConstValues.CONN_DefaultPageSize;
- userInfoViewModel.DataResponse.StartPageIndex = 1;
- return View(userInfoViewModel);
- }
首先我們構(gòu)造了一個SelectList用于下拉列表,Biz層的代碼很簡單
- public dynamic GetMarriedList()
- {
- IList
- marriedList.Add(new { MarriedID = -1, DisplayContent = "No Selection" });
- marriedList.Add(new { MarriedID = 0, DisplayContent = "Married" });
- marriedList.Add(new { MarriedID = 1, DisplayContent = "UnMarried" });
- return marriedList;
- }
用匿名類去構(gòu)造一個List。接下來就是DataReponse的獲取,Biz層的代碼如下
- public DataResponse
GetUserInfoEntityList(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類中是一些靜態(tài)只讀屬性
- 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 List
GetUserInfoEntityList(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程序集下。
腳本很簡單,就是傳入?yún)?shù)查分頁數(shù)據(jù)。
在DAL層我們將DataTable通過ToEntityList轉(zhuǎn)化為了實(shí)體List,在Utility中我們定義了一個擴(kuò)展用來轉(zhuǎn)化。
- public static class DataTableToEntityExtension
- {
- public static List
ToEntityList (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;
- }
- }
值那么轉(zhuǎn)化的時候是怎么讓DataTable的列和實(shí)體匹配起來,你可以將列別名和實(shí)體定義成一樣的,還有一種你可以使用Attribute。那我們使用后者,因?yàn)楹笳吒`活。
- [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之后,我們設(shè)置其能使用的目標(biāo)只能是Property。然后我們在實(shí)體類里面的屬性上加上這個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這個擴(kuò)展中我們得到屬性的Attribute去和DataTable的列名去匹配,反射賦值。
OK,拿到數(shù)據(jù)后,我們在控制器構(gòu)造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);}
其實(shí)也就是一個應(yīng)用了BoootStrap樣式的表格,有邊框和鼠標(biāo)經(jīng)過的樣式。關(guān)于BootStrap的樣式的使用,請參考BootStrap官網(wǎng)。代碼很簡單,就是循環(huán)遍歷,展示數(shù)據(jù)。
當(dāng)前標(biāo)題:【博文推薦】ASP.NETMVC4+BootStrap實(shí)戰(zhàn)
網(wǎng)站路徑:http://m.fisionsoft.com.cn/article/djshghg.html


咨詢
建站咨詢

