ASP.NET MVC4+BootStrap 實戰(二)

時間  2019-11-11
標籤 asp.net asp mvc4+bootstrap mvc bootstrap 實戰 欄目 ASP 简体版
原文   原文鏈接

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

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

wKioL1SEMtXxVsRkAAD6U1iyIK0353.jpg

js代碼以下ajax

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。sql

[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。json

wKiom1SENb2wiXK1AACG7oXEQ-I551.jpg

這樣的定義便於一一對應，對於維護來講也比較方便。另外使用xml文件的優點在於它易於修改，若是腳本寫在SP中或者代碼中，就不是那麼容易去修改。由於大多數狀況下sql服務器是不容許亂動的，代碼也是須要從新編譯才能上線的。固然了，複雜的業務處理仍是要放到SP中，由於SP內部的一些執行優化機制是其餘方式所不具有的。c#


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

wKiom1SENy-zU2UXAADZSFB2Myo108.jpg

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頁時，我就顯示前一批和下一批的連接。ide

wKiom1SEOHCC9IlKAAFf3SbJYTQ391.jpg

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

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

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

wKiom1SEOveRnAbGAAF2B1i6PT8043.jpg

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

wKioL1SEO--Due59AABBS9gFMcc227.jpg

ok，很好，由於目前只有12頁的數據，因此咱們還沒法看到12頁之後的expand連接，沒關係，咱們再插入一批數據，刷新，效果以下

wKioL1SEPLTjdcPGAABDi7UGzbc336.jpg

看到了吧，先後都有一個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");

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

wKioL1SEShqi2ljRAAGGnArGRA8810.jpg

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

wKioL1SESl6w2Y97AAEmTqdMILI658.jpg

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

wKiom1SESjOhgj68AAEBZrgSZHQ177.jpg

OK，本節到此結束，下節咱們來說Compare功能。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程