ASP.NET MVC4+BootStrap 實戰(二)

上一篇文章我們講述了頁面初始加載數據的一些東西，本篇我們來講一下查詢按鈕和分頁按鈕。在很久以前我寫過一篇ASP.NET MVC4切近實戰的文章，有關于分頁的代碼，本篇我們不采用微軟的AJAX框架。

先看一下查詢效果，在點擊Get按鈕之后，會進行AJAX請求。

js代碼如下

jQuery(document).ready(function () {
    setRowBackColor();
    $("#btnsearch").click(function () {
        $("#selsamelist").empty();
        $("#seldifflist").empty();

        searchByCondition(1);
    });
})

function searchByCondition(pageIndex) {
    $.ajax({
        url: "/Home/GetSearchResult?pam=" + new Date().toTimeString(),
        type: "POST",
        datatype: "Html",
        data: {
            param: JSON.stringify({
                IsMarried: $("#ddlMarried").val(),
                StartDate: $("#txtdatestart").val(),
                EndDate: $("#txtdateend").val(),
                UserName: $.trim($("#txtusername").val()),
                PageIndex: pageIndex,
                PageSize: $("#hfdPageSize").val()
            })
        },
        beforeSend: function () {
            $("#divloding").show();
        },
        complete: function () {
            $("#divloding").hide();
        },
        success: function (data) {
            $("#divresult").html(data);
            setRowBackColor();
        },
        error: function () {
            alert("查詢失敗!");
        }
    });
}

在頁面加載完成后，我們給Get按鈕注冊了一個click事件，請求action獲取數據。在請求之前，我們展示一個正在獲取數據的div，請求結束以后我們隱藏這個div。當查詢成功完成以后，我們將服務端返回的頁面加載到divresult。我們來看一下這個action。

[HttpPost]
        public PartialViewResult GetSearchResult()
        {
            string requestJson = Request["param"];
            JObject jObj = (JObject)JsonConvert.DeserializeObject(requestJson);
            string isMarried = jObj.Value<string>("IsMarried");
            string userName = jObj.Value<string>("UserName");
            string strStartDate = jObj.Value<string>("StartDate");
            string strEndDate = jObj.Value<string>("EndDate");
            int pageIndex = jObj.Value<int>("PageIndex");
            int pageSize = jObj.Value<int>("PageSize");
            int startPageIndex = jObj.Value<int>("StartPageIndex");

            DateTime startDate = DateTime.MinValue;
            DateTime endDate = DateTime.MinValue;
            DateTime.TryParse(strStartDate, out startDate);
            DateTime.TryParse(strEndDate, out endDate);

            UserInfoRequest request = new UserInfoRequest()
            {
                IsMarried = isMarried == "-1" ? string.Empty : isMarried,
                UserName = userName,
                StartDate = startDate == DateTime.MinValue ? null : (DateTime?)startDate,
                EndDate = endDate == DateTime.MinValue ? null : (DateTime?)endDate,
                PageIndex = pageIndex,
                PageSize = pageSize
            };

            DataResponse<UserDBEntity> dataResponse = GRLCBiz.GetInstance().GetUserInfoEntityList(request);
            UserInfoViewModel userInfoViewModel = new UserInfoViewModel();
            userInfoViewModel.DataResponse = dataResponse;
            userInfoViewModel.DataResponse.PageSize = ConstValues.CONN_DefaultPageSize;
            userInfoViewModel.DataResponse.StartPageIndex = startPageIndex;
            return PartialView("~/Views/Partial/UserInfoPartial.cshtml", userInfoViewModel);
        }

首先在action中，獲取客戶端傳遞過來的json格式的請求參數，我們利用Newtonsoft.Json.dll來解析客戶端傳遞過來的json對象。然后構造request，最后調用GetUserInfoEntityList獲取數據。在上節中我們在講到DAL層獲取數據的時候，有一個DBScriptManager類，這個類就是專門用來讀取DBScriptXML工程下的xml文件中的sql腳本的。

public class DBScriptManager
    {
        public static string GetScript(Type remotingClassType, string key)
        {
            string folder = ConstValues.CON_DbScriptXmlFolder;
            string xmlFile = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, folder);
            xmlFile = Path.Combine(xmlFile, remotingClassType.FullName + ".xml");

            string xPathExpression = "/Scripts/Script[@Key='" + key.Trim() + "']/text()";
            return ExecuteXPath(xmlFile, xPathExpression);
        }
        .......
     }

這個類其實就是根據web.config配置的xml文件的文件夾路徑加上文件路徑(class fullname+.xml)找到xml文件后，進行解析得到sql script。所以大家看到xml文件的命名是DAL層下面的類的fullName。

這樣的定義便于一一對應，對于維護來說也比較方便。另外使用xml文件的優勢在于它易于修改，如果腳本寫在SP中或者代碼中，就不是那么容易去修改。因為大多數情況下sql服務器是不允許亂動的，代碼也是需要重新編譯才能上線的。當然了，復雜的業務處理還是要放到SP中，因為SP內部的一些執行優化機制是其他方式所不具備的。

OK,查詢講完了，我們看一下分頁，首先我在webConfig中定義了一個節點，用于調整顯示頁碼的數量。

OK，我們定義的值為6。看一下分頁partial view的代碼

@using Bruce.GRLC.Model.Response;
@using Bruce.GRLC.Utility;
@using Bruce.GRLC.Model.Entity;
@model DataResponse<UserDBEntity>
<ul class="pagination pagination-lg">
    @if (Model != null)
    {
        @Html.HiddenFor(m => m.PageSize, new { id = "hfdPageSize" })
        <li><a href="#">&laquo;</a></li>
        if (Model.StartPageIndex > ConstValues.CONN_PagerDisplayCount)
        {
            <li><a href="#" id="linkPaginationprev" onclick="linkPaginationClick(@Model.StartPageIndex,@Model.PageSize,@Model.TotalCount,0)">expand</a></li>
        }

        for (int i = Model.StartPageIndex; i <= Model.TotalPages; i++)
        {
            <li id="li_@i"><a href="#" id="link_@i" onclick="searchByCondition(@i,@Model.StartPageIndex)">@i</a></li>

            if (i > 0 && i % ConstValues.CONN_PagerDisplayCount == 0)
            {
                break;
            }
        }

        if (Model.StartPageIndex < Model.TotalPages - ConstValues.CONN_PagerDisplayCount)
        {
            <li><a href="#" id="linkPaginationnext" onclick="linkPaginationClick(@Model.StartPageIndex,@Model.PageSize,@Model.TotalCount,1)">expand</a></li>
        }
        <li><a href="#">&raquo;</a></li>
    }
</ul>

還是使用BootStrap提供的樣式，目前只有兩頁的數據，其實上面的這段代碼是想實現如果配置的頁碼數是6，當我在1-6頁時，顯示展示下一批頁碼的鏈接，當我在7-12頁時，我就顯示前一批和下一批的鏈接。

現在的頁碼有點少，稍等，我給數據庫插入一批數據。

DECLARE @Index INT = 1
WHILE(@Index<=100)
BEGIN
	INSERT INTO dbo.[User]
	(
		UseNo,
		pwd,
		IsAdmin
	)
	SELECT
		'Bruce' + CAST(@Index AS CHAR(3)),
		pwd,
		'0'
	FROM dbo.[User] WITH(NOLOCK)
	WHERE UseNo = 'lilei'
	
	SET @Index = @Index + 1
END

插入完成，我們看一下效果

我們看到expand按鈕出來了，我點擊它，應該出來7-12頁。

ok，很好，因為目前只有12頁的數據，所以我們還無法看到12頁以后的expand鏈接，不要緊，我們再插入一批數據，刷新，效果如下

看到了吧，前后都有一個expand鏈接。OK，頁面代碼實現的話，比較簡單，大家仔細看就明白了。接下來我們看一下這個頁碼expand的js方法。

function linkPaginationClick(pageindex, pagesize, totalcount, type) {
    var urlParam = pageindex + "_" + pagesize + "_" + totalcount + "_" + type;
    $.ajax({
        url: "/Home/GetNewPaginationView/" + urlParam + "?pam=" + new Date().toTimeString(),
        type: "GET",
        datatype: "Html",
        success: function (data) {
            $("#divpagination").html(data);
        }
    });
}

將pageIndex，pagesize,totalcount和type(標示是向前expand，還是向后expand)傳遞到服務端，在服務端計算好之后返回一個partial頁碼給客戶端。

好了，我們看一下action的代碼。

[HttpGet]
        public PartialViewResult GetNewPaginationView(string id)
        {
            string[] paramArray = id.Split(new char[] { '_' }, StringSplitOptions.RemoveEmptyEntries);
            DataResponse<UserDBEntity> dataResponse = new DataResponse<UserDBEntity>();
            dataResponse.TotalCount = int.Parse(paramArray[2]);
            dataResponse.PageSize = int.Parse(paramArray[1]);

            string type = paramArray[3];
            if (type == "0")
            {
                dataResponse.StartPageIndex = int.Parse(paramArray[0]) - ConstValues.CONN_PagerDisplayCount;
            }
            else
            {
                dataResponse.StartPageIndex = int.Parse(paramArray[0]) + ConstValues.CONN_PagerDisplayCount;
            }

            return PartialView("~/Views/Partial/PaginationPartial.cshtml", dataResponse);
        }

當我們判斷是向前expand的時候，我們就把起始頁碼減去配置的需要顯示的頁數。反之，則加上。在這里，其實可以在客戶端實現這個東西，在服務端實現是一種浪費，稍后我會將其改成客戶端實現。

OK，最后我們看一下點擊頁碼的ajax請求。

function searchByCondition(pageIndex, startPageIndex) {
    $.ajax({
        url: "/Home/GetSearchResult?pam=" + new Date().toTimeString(),
        type: "POST",
        datatype: "Html",
        data: {
            param: JSON.stringify({
                IsMarried: $("#ddlMarried").val(),
                StartDate: $("#txtdatestart").val(),
                EndDate: $("#txtdateend").val(),
                UserName: $.trim($("#txtusername").val()),
                PageIndex: pageIndex,
                PageSize: $("#hfdPageSize").val(),
                StartPageIndex: startPageIndex
            })
        },
        beforeSend: function () {
            $("#divloding").show();
        },
        complete: function () {
            $("#divloding").hide();
        },
        success: function (data) {
            $("#divresult").html(data);
            $("#li_" + pageIndex).addClass("active");
            setRowBackColor();
        },
        error: function () {
            alert("查詢失敗!");
        }
    });
}

將頁碼傳進來就行了，和查詢調用同一個action。有時候用戶想知道我在哪一頁，我們就需要給鏈接加上樣式。

$("#li_" + pageIndex).addClass("active");

給當前的頁碼加上藍色背景。

OK了，我們看見第10頁的背景變成藍色了。最后我們看一下輸入查詢條件查詢，就按照出生日期查詢吧

日期選擇使用的是Html5的新標簽<Input type="date">。

OK，本節到此結束，下節我們來講Compare功能。