咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

ASP.NETMVC4+BootStrap实战(一)

好久没有写关于web开发的文章了，进到这个公司一直就是winform和Silverlight，实在是没有实战web项目的机会。大D也辞职了，去搞web app了。自己也该闲暇时间多学习学习，每天进步一点点。

创新互联是专业的鹿邑网站建设公司，鹿邑接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行鹿邑网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

ASP.NET MVC4+BootStrap 实战(一)

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

ASP.NET MVC4+BootStrap 实战(一)

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

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

ASP.NET MVC4+BootStrap 实战(一)

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




    
    
    
    Compare data between Solr and DB
    
    
          @*@Styles.Render("~/css")*@
          @Scripts.Render("~/bundles/BootStrap")
          @Scripts.Render("~/bundles/Scripts")
    
        .pre-Scrollable {
            max-height: 700px;
            overflow-y: scroll;
        }
    


    
        
            
                
                    Compare Data Between Solr and DB
                
            
                                                                                        
            
                                                                                                                                                                                                                                                                                       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的网格系统，看如下的解释

ASP.NET MVC4+BootStrap 实战(一)

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

ASP.NET MVC4+BootStrap 实战(一)

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

ASP.NET MVC4+BootStrap 实战(一)

我们看到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 marriedList = GRLCBiz.GetInstance().GetMarriedList();
            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);
        }
首先我们构造了一个SelectList用于下拉列表，Biz层的代码很简单
public dynamic GetMarriedList()
        {
            IList marriedList = new List();
            marriedList.Add(new { MarriedID = -1, DisplayContent = "No Selection" });
            marriedList.Add(new { MarriedID = 0, DisplayContent = "Married" });
            marriedList.Add(new { MarriedID = 1, DisplayContent = "UnMarried" });

            return marriedList;
        }
用匿名类去构造一个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类中是一些静态只读属性
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程序集下。
ASP.NET MVC4+BootStrap 实战(一)


  
    
  

脚本很简单，就是传入参数查分页数据。
在DAL层我们将DataTable通过ToEntityList转化为了实体List，在Utility中我们定义了一个扩展用来转化。
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;
        }
    }
值那么转化的时候是怎么让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官网。代码很简单，就是循环遍历，展示数据。
            
            
                            

                网页题目：ASP.NETMVC4+BootStrap实战(一)                

                网页路径：http://dzwzjz.com/article/jhogsh.html
            
        
        

            
其他资讯

            

                
            

        

    




    

        

            

                

                

                    
分享至：

                    

                        
                        
                        
                        
                    

                    
                

            

            

                

                    
关于我们

                    

                        公司简介
                        发展历程
                    

                

                

                    
服务项目

                    

                        高端网站建设
                        小程序开发
                        APP开发
                        网络营销
                    

                

                

                    
建站知识

                    

                        行业新闻
                        建站学堂
                        常见问题
                    

                

                

                    
联系我们

                    

                        公司地址
                        人才招聘
                    

                

            

            

                

                    成都
                    达州
                

                

                    

                        

                            

                            
电话：028-86922220

                        

                        

                            

                            
地址：成都市太升南路288号锦天国际A幢1002号

                        

                    

                    

                        

                            

                            
电话：028-86922220

                        

                        

                            

                            
地址：达州市南岸区弹子石腾龙大道58号2栋21-6

                        

                    

                

            

        

        

            友情链接：
            成都定制网站   云主机   成都封阳台   成都橡塑保温管   成都谷歌推广   Google外贸推广   成都网站托管   手机APP开发   广安网站建设   网络推广公司           

    

    
版权所有：青羊区大橙子信息咨询工作室
        蜀ICP备2022028542号-14
    







    
        

            

            
在线咨询

        

    
    
        

            

            
服务热线

        

        
服务热线：028-86922220

    
    
        

            

            
TOP