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

在哈爾濱等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,哈爾濱網(wǎng)站建設(shè)費(fèi)用合理。

先看一下查詢效果，在點(diǎn)擊Get按鈕之后，會(huì)進(jìn)行AJAX請(qǐng)求。

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按鈕注冊(cè)了一個(gè)click事件，請(qǐng)求action獲取數(shù)據(jù)。在請(qǐng)求之前，我們展示一個(gè)正在獲取數(shù)據(jù)的div，請(qǐng)求結(jié)束以后我們隱藏這個(gè)div。當(dāng)查詢成功完成以后，我們將服務(wù)端返回的頁面加載到divresult。我們來看一下這個(gè)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格式的請(qǐng)求參數(shù)，我們利用Newtonsoft.Json.dll來解析客戶端傳遞過來的json對(duì)象。然后構(gòu)造request，最后調(diào)用GetUserInfoEntityList獲取數(shù)據(jù)。在上節(jié)中我們?cè)谥v到DAL層獲取數(shù)據(jù)的時(shí)候，有一個(gè)DBScriptManager類，這個(gè)類就是專門用來讀取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);
        }
        .......
     }

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

這樣的定義便于一一對(duì)應(yīng)，對(duì)于維護(hù)來說也比較方便。另外使用xml文件的優(yōu)勢(shì)在于它易于修改，如果腳本寫在SP中或者代碼中，就不是那么容易去修改。因?yàn)榇蠖鄶?shù)情況下sql服務(wù)器是不允許亂動(dòng)的，代碼也是需要重新編譯才能上線的。當(dāng)然了，復(fù)雜的業(yè)務(wù)處理還是要放到SP中，因?yàn)镾P內(nèi)部的一些執(zhí)行優(yōu)化機(jī)制是其他方式所不具備的。

OK,查詢講完了，我們看一下分頁，首先我在webConfig中定義了一個(gè)節(jié)點(diǎn)，用于調(diào)整顯示頁碼的數(shù)量。

OK，我們定義的值為6?？匆幌路猪損artial 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提供的樣式，目前只有兩頁的數(shù)據(jù)，其實(shí)上面的這段代碼是想實(shí)現(xiàn)如果配置的頁碼數(shù)是6，當(dāng)我在1-6頁時(shí)，顯示展示下一批頁碼的鏈接，當(dāng)我在7-12頁時(shí)，我就顯示前一批和下一批的鏈接。

現(xiàn)在的頁碼有點(diǎn)少，稍等，我給數(shù)據(jù)庫插入一批數(shù)據(jù)。

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按鈕出來了，我點(diǎn)擊它，應(yīng)該出來7-12頁。

ok，很好，因?yàn)槟壳爸挥?2頁的數(shù)據(jù)，所以我們還無法看到12頁以后的expand鏈接，不要緊，我們?cè)俨迦胍慌鷶?shù)據(jù)，刷新，效果如下

看到了吧，前后都有一個(gè)expand鏈接。OK，頁面代碼實(shí)現(xiàn)的話，比較簡單，大家仔細(xì)看就明白了。接下來我們看一下這個(gè)頁碼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(標(biāo)示是向前expand，還是向后expand)傳遞到服務(wù)端，在服務(wù)端計(jì)算好之后返回一個(gè)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);
        }

當(dāng)我們判斷是向前expand的時(shí)候，我們就把起始頁碼減去配置的需要顯示的頁數(shù)。反之，則加上。在這里，其實(shí)可以在客戶端實(shí)現(xiàn)這個(gè)東西，在服務(wù)端實(shí)現(xiàn)是一種浪費(fèi)，稍后我會(huì)將其改成客戶端實(shí)現(xiàn)。

OK，最后我們看一下點(diǎn)擊頁碼的ajax請(qǐng)求。

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("查詢失敗!");
        }
    });
}

將頁碼傳進(jìn)來就行了，和查詢調(diào)用同一個(gè)action。有時(shí)候用戶想知道我在哪一頁，我們就需要給鏈接加上樣式。

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

給當(dāng)前的頁碼加上藍(lán)色背景。

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

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

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

網(wǎng)頁標(biāo)題：ASP.NETMVC4+BootStrap實(shí)戰(zhàn)(二)
分享鏈接：http://jinyejixie.com/article20/gpesjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)