[转]ASP.NETMVC4+BootStrap实战(一)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文转自：http://leelei.blog.51cto.com/856755/1587301

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

    <title>Compare data between Solr and DB</title>

    <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap-theme.css" />

    <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap.css" />

          @*@Styles.Render("~/css")*@

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

          @Scripts.Render("~/bundles/Scripts")

    <style type="text/css">

        .pre-Scrollable {

            max-height: 700px;

            overflow-y: scroll;

        }

    </style>

</head>

<body>

    <div class="container">

        <form id="formsync">

            <div class="row">

                <div class="col-md-12">

                    <h1 style="color:red"><b>Compare Data Between Solr and DB</b></h1>

                </div>

            </div>

            <div class="row" id="divloding" style="display:none;text-align:center">

                <div class="col-md-6">

                    <img src="~/Images/ajaxLoading.gif" alt="load failed" />

                    <label>getting,please wait......</label>

                </div>

            </div>

            <div class="row" id="divcompare" style="display:none;text-align:center">

                <div class="col-md-6">

                    <img src="~/Images/ajaxLoading.gif" alt="load failed" />

                    <label>comparing,please wait......</label>

                </div>

            </div>

            <div class="row" id="divfix" style="display:none;text-align:center">

                <div class="col-md-6">

                    <img src="~/Images/ajaxLoading.gif" alt="load failed" />

                    <label>fixing,please wait......</label>

                </div>

            </div>

            <div class="row" style="margin-top:10px">

                <div class="col-md-12 form-inline">

                    <div class="form-group input-group">

                        <span class="input-group-addon">IsMarried:</span>

                        @Html.DropDownList("ddlMarried", ViewBag.MarriedList as SelectList, null, new { id = "ddlMarried", @class = "form-control" })

                    </div>

                    <div class="form-group" style="margin-left:10px">

                        <label class="control-label">BirthDay:</label>

                        <input type="date" id="txtdatestart" class="form-control">

                        <label class="control-label">-</label>

                        <input type="date" id="txtdateend" class="form-control">

                    </div>

                    <div class="form-group input-group" style="margin-left:10px">

                        <span class="input-group-addon">Name:</span>

                        <input id="txtusername" type="text" class="form-control" placeholder="input name..." style="width:120px" />

                    </div>

                    <div class="form-group" style="margin-left:10px">

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

                    </div>

                </div>

            </div>

            <div class="row" style="margin-top:10px">

                <div id="divresult" class="col-md-7 form-inline  pre-Scrollable">

                    @{Html.RenderPartial("~/Views/Partial/UserInfoPartial.cshtml");}

                </div>

                <div class="col-md-5">

                    @{Html.RenderPartial("~/Views/Partial/DiffAndSameWithSolrPartial.cshtml");}

                </div>

            </div>

        </form>

    </div>

</body>

</html>

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

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

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

我们看到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的代码

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中只需要使用如下代码来引用即可。

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

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

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

public ActionResult Index()

        {

            List<object> marriedList = GRLCBiz.GetInstance().GetMarriedList();

            SelectList selectList = new SelectList(marriedList, "MarriedID", "DisplayContent", "-1");

            ViewBag.MarriedList = selectList;
 
            DataResponse<UserDBEntity> 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<object> marriedList = new List<object>();

            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<UserDBEntity> GetUserInfoEntityList(UserInfoRequest request = null)

        {

            if(request==null)

            {

                request = new UserInfoRequest();

                request.PageIndex = ConstValues.CONN_DefaultPageIndex;

                request.PageSize = ConstValues.CONN_DefaultPageSize;

            }

            int totalCount=0;
 
            List<UserDBEntity> userDBEntityList = GRLCDAL.GetInstance().GetUserInfoEntityList(request, out totalCount);

            DataResponse<UserDBEntity> dataResponse = new DataResponse<UserDBEntity>();

            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<UserDBEntity> 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<UserDBEntity>();

                }
 
                return new List<UserDBEntity>();

            }

            catch (Exception ex)

            {

                LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(), ex);

                return null;

            }

        }