MVC4中ajax分頁技術實例

在這之前一直沒有寫過碰過MVC，更別說ajax，但是項目需要，只好邊學邊做了，希望跟我一樣的朋友也可以看到文章，希望可以應用的到你們的項目中去。好了廢話不多說，現在開始動手吧。

 

前臺頁面 Index.cshtml，這個頁面主要是佈局控件 引用樣式和js

@{
    //收費查詢頁面   
    ViewBag.Title = "互聯網雲停車場-收費查詢";
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
    @Scripts.Render("~/Scripts/class.js")
    @Scripts.Render("~/Scripts/Validate.js")
    @Scripts.Render("~/Scripts/main/Select.js")
    @Styles.Render("~/Content/GooutRecord.css")
    @Styles.Render("~/Scripts/PagePaging.js")
    Layout = "~/Views/Shared/_LayoutPageMu.cshtml";

     
}
 
<div class="Content_R">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
      <div class="main_query">
        卡片號碼：<input id="queryCardNO" type="text" validate="number"  value=""  />
        車牌號碼：<input id="queryCPH" type="text" validate="number"  value="" />
        停車場名稱：<input id="queryParkName" type="text" validate="number"  value="" />
	  <button id="queryBtn"   rel="type1" value="查詢"   >查詢</button>
        <button id="queryBtnGj"   rel="type1" value="高級查詢"   >高級查詢</button>
			</div>
            
				<div class="tb_info">
					<table id="tb">
						<thead>
							<tr class="tr-title">
								<th>卡片號碼</th>
								<th>車牌號碼</th>
                                <th>卡片種類</th>
								<th>入場時間</th>
								<th>出場時間</th>
								<th>入場名稱</th>
								<th>出場名稱</th>
                                <th>入場操作卡號</th>
                                <th>出場操作卡號</th>
                                <th>入場操作員</th>
                                <th>出場操作員</th>
                                <th>入場圖片</th>
                                <th>入場人員</th>
                                <th>出場圖片</th>
                                <th>出場人員</th>
                                <th>證件圖片</th>
                                <th>收費金額</th>
                                <th>卡上餘額</th>
                                <th>應收金額</th>
                                <th>收費時間</th>
                                <th>收費人員</th>
                                <th>收費卡號</th>
                                <th>收費口名</th>
                                <th>超時標誌</th>
                                <th>超時收費時間</th>
                                <th>超時收費金額</th>
                                <th>車場編號</th>
                                <th>大小標識</th>
                                <th>停車場名稱</th>
                                <th>免費原因</th>
                  </tr>
                		</thead>
						<tbody id="group_one">
						</tbody>
					</table>
                   </div>
        <div class="Page_number">
             <div class="Page_number_btn">
             <button id="Print_Btn"   rel="type1" value="導出" >導出Excel</button>
             <button id="Export_Btn"   rel="type1" value="打印" >打印</button> 
             </div> 
             <div id="barcon"></div>
        </div>

     </asp:contentplaceholder>
</div>

Select.js 這個腳本就是通過對control層的數據進行輸出,其中重點就是分頁技術的實現,代碼很清晰

 

String.prototype.format = function () {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g,
        function (m, i) {
            return args[i];
        });
}
//String的靜態方法
String.format = function () {
    if (arguments.length == 0)
        return null;

    var str = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
        str = str.replace(re, arguments[i]);
    }
    return str;

}
var sumCountP = 0;
var pageIndex = 0;
var Find = Class.create();
var IsWork = false;
Find.prototype = {
    initialize: function (options) { },
    async: false,
    Get: function (index) {
        // pageIndex = index;
        //驗證
        var validate = GoValidate($("#queryBtn").attr("rel"));

        var CardNO = $("#queryCardNO").val();
        var CPH = $("#queryCPH").val();
        var ParkName = $("#queryParkName").val();
        //  var pageIndex = 0;
        var outcount = 0;
        $("#page").html("正在執行查詢請稍後...").show();

        $.getJSON("/GOOUTRECORD/FindQuery", { CardNO: CardNO, CPH: CPH, ParkName: ParkName, pageIndex: index, pageSize: 22 },
              function (json) {
                  if (json.Success) {
                      var html = "";
                      //填充數據
                      var pagetemp = "<div class=\"c666\"  >查詢完畢，共找到 <span id=\"resultcount\">{0}</span> 條有效記錄</div>";
                      var temp = "<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td><td>{6}</td><td>{7}</td><td>{8}</td><td>{9}</td><td>{10}</td><td>{11}</td><td>{12}</td><td>{13}</td><td>{14}</td><td>{15}</td><td>{16}</td><td>{17}</td><td>{18}</td><td>{19}</td><td>{20}</td><td>{21}</td><td>{22}</td><td>{23}</td><td>{24}</td><td>{25}</td><td>{26}</td><td>{27}</td><td>{28}</td><td>{29}</td>";
                      for (var i = 0; i < json.Count; i++) {

                          var o = json.Data[i];
                          html += temp.format(o.CardNO, o.CPH, o.CardType, o.InTime, o.OutTime, o.InGateName, o.OutGateName, o.InOperatorCard, o.OutOperatorCard, o.InOperator, o.OutOperator, o.InPic, o.InUser, o.OutPic, o.OutUser, o.ZJPic, o.SFJE, o.Balance, o.YSJE, o.SFTime, o.SFOperator, o.SFOperatorCard, o.SFGate, o.OvertimeSymbol, o.OvertimeSFTime, o.OvertimeSFJE, o.CarparkNO, o.BigSmall, o.ParkName, o.FreeReason);
                      }
                      $("#tb tbody").html(html);
                      $("#page").html(String.format(pagetemp, json.Count));
                      $("#tb tbody tr:odd").addClass("bgcf8"); //偶數行顏色
                      var Dijipage = pageIndex + 1

                      sumCountP = (json.SumCount % 22 == 0 ? parseInt(json.SumCount / 22) : parseInt(json.SumCount / 22 + 1));
                      var htmlStr = "";
                      htmlStr += "<span>共有記錄" + json.SumCount + "條;  共<span id='SumPcount'>" + parseInt(Dijipage) + "/" + sumCountP + "</span>頁  " + "</span>";
                      htmlStr += "<a href='javascript:void' οnclick='GoToFirstPage()' id='aFirstPage' >首    頁</a>   ";
                      htmlStr += "<a href='javascript:void' οnclick='GoToPrePage()' id='aPrePage' >前一頁</a>   ";
                      htmlStr += "<a href='javascript:void' οnclick='GoToNextPage()' id='aNextPage'>後一頁</a>   ";
                      htmlStr += "<a href='javascript:void' οnclick='GoToEndPage()' id='aEndPage' >尾    頁</a>   ";
                      htmlStr += "<input type='text' style=margin-right:5px;width:35px; height:20px;/><input  type='button' style=margin-left:5px; value='跳轉' οnclick='GoToAppointPage(this)' /> ";
                      $("#barcon").html(htmlStr);


                  }
                  else {
                      $("#page").html(json.Message);
                  }
                  if (json.Count > 0) {
                      //$(".result").slideDown("slow");
                      $("div#resultdiv").attr("style", "overflow-y: auto; overflow-x: auto;height:400px;display: none;");
                      $("div#resultdiv").slideDown("slow");

                  }
                  else {
                      $("div#resultdiv").attr("style", "display: none;");
                  }
                  IsWork = false;
              }
        );
    }
};



$(function () {
    var find = new Find();
    //alert(find.Template);

    $.ajaxSetup({
        cache: false,
        async: false,
        global: false,
        type: "POST"
    });

    //$(".Validate").click(function () { return GoValidate($(this).attr("rel")) });

    $("#queryBtn").click(function () { find.Get() });
    $("#queryBtnGj").click(function () { openwindow() });
})


//首頁
function GoToFirstPage() {
    var find = new Find();
    pageIndex = 0;
    find.Get(pageIndex)
   // AjaxGetData($("#txtSearch").val(), pageIndex);
}
//前一頁
function GoToPrePage() {
    pageIndex -= 1;
    pageIndex = pageIndex >= 0 ? pageIndex : 0;
    var find = new Find();
    find.Get(pageIndex)
   
   // AjaxGetData($("#txtSearch").val(), pageIndex);
}
//後一頁
function GoToNextPage() {
    if (pageIndex + 1 < sumCountP) {
        pageIndex += 1;
    }

    var find = new Find();
 
    find.Get(pageIndex)

    //AjaxGetData($("#txtSearch").val(), pageIndex);
}
//尾頁
function GoToEndPage() {
    pageIndex = sumCountP - 1;
    var find = new Find();

    find.Get(pageIndex)
    //AjaxGetData($("#txtSearch").val(), pageIndex);
}
//跳轉
function GoToAppointPage(e) {
    var page = $(e).prev().val();
    if (isNaN(page)) {
        alert("請輸入數字!");
    }
    else {
        var tempPageIndex = pageIndex;
        pageIndex = parseInt($(e).prev().val()) - 1;
        if (pageIndex < 0 || pageIndex >= sumCountP) {
            pageIndex = tempPageIndex;
            alert("請輸入有效的頁面範圍!");
        }
        else {
            var find = new Find();

            find.Get(pageIndex)
            //AjaxGetData($("#txtSearch").val(), pageIndex);
        }
    }
}

$("#queryBtnGj").click(function () { openwindow() });

function openwindow() {
    window.showModalDialog("/Advancedsearch/Index", window, "status:no;scroll:no;dialogWidth:235px;dialogHeight:400px");
}             

 

 

下面是Contorter層的數據輸出，這些大家都應該很熟悉不過了

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using znykt.Models;
using System.Text;
using System.Data.SqlClient;
using System.Data;

namespace znykt.Controllers
{
    public class GOOUTRECORDController : Controller
    {
        //
        // GET: /GOOUTRECORD/

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult FindQuery(string CardNO, string CPH, string ParkName, int pageIndex = 0, int pageSize = 22)
        {
            Models.FindSelectModel result = new Models.FindSelectModel { Count = 0, SumCount=0, Success = true, Data = new List<Models.GooutRecordModel>() };
            try
            {
                DataTable Relustdt = SearchGooutRecordPro(CardNO, CPH, ParkName, pageIndex, pageSize).Tables[0];// SelectMYCARGOOUTRECORD(CardNO, CPH, ParkName);

                result.SumCount = Convert.ToInt32(SearchGooutRecordPro(CardNO, CPH, ParkName, pageIndex, pageSize).Tables[1].Rows[0][0].ToString());
                for (int i = 0; i < Relustdt.Rows.Count; i++)
                {
                    Models.GooutRecordModel m = new Models.GooutRecordModel();
                    m.CardNO = Relustdt.Rows[i]["CardNO"].ToString();
                    m.CPH = Relustdt.Rows[i]["CPH"].ToString();
                    m.CardType = Relustdt.Rows[i]["CardType"].ToString();
                    m.InTime = Relustdt.Rows[i]["InTime"].ToString();
                    m.OutTime = Relustdt.Rows[i]["OutTime"].ToString();
                    m.InGateName = Relustdt.Rows[i]["InGateName"].ToString();
                    m.OutGateName = Relustdt.Rows[i]["OutGateName"].ToString();
                    m.InOperatorCard = Relustdt.Rows[i]["InOperatorCard"].ToString();
                    m.OutOperatorCard = Relustdt.Rows[i]["OutOperatorCard"].ToString();
                    m.InOperator = Relustdt.Rows[i]["InOperator"].ToString();
                    m.OutOperator = Relustdt.Rows[i]["OutOperator"].ToString();
                    m.InPic = Relustdt.Rows[i]["InPic"].ToString();
                    m.InUser = Relustdt.Rows[i]["InUser"].ToString();
                    m.OutPic = Relustdt.Rows[i]["OutPic"].ToString();
                    m.OutUser = Relustdt.Rows[i]["OutUser"].ToString();
                    m.ZJPic = Relustdt.Rows[i]["ZJPic"].ToString();
                    m.SFJE = Relustdt.Rows[i]["SFJE"].ToString();
                    m.Balance = Relustdt.Rows[i]["Balance"].ToString();
                    m.YSJE = Relustdt.Rows[i]["YSJE"].ToString();
                    m.SFTime = Relustdt.Rows[i]["SFTime"].ToString();
                    m.SFOperator = Relustdt.Rows[i]["SFOperator"].ToString();
                    m.SFOperatorCard = Relustdt.Rows[i]["SFOperatorCard"].ToString();
                    m.SFGate = Relustdt.Rows[i]["SFGate"].ToString();
                    m.OvertimeSymbol = Relustdt.Rows[i]["OvertimeSymbol"].ToString();
                    m.OvertimeSFTime = Relustdt.Rows[i]["OvertimeSFTime"].ToString();
                    m.OvertimeSFJE = Relustdt.Rows[i]["OvertimeSFJE"].ToString();
                    m.CarparkNO = Relustdt.Rows[i]["CarparkNO"].ToString();
                    m.BigSmall = Relustdt.Rows[i]["BigSmall"].ToString();
                    m.ParkName = Relustdt.Rows[i]["ParkName"].ToString();
                    m.FreeReason = Relustdt.Rows[i]["FreeReason"].ToString();

                    result.Data.Add(m);
                }
                result.Count = result.Data.Count;
            }
            catch (Exception e)
            {
                result.Success = false;
                result.Message = e.Message;
                return Json(result, JsonRequestBehavior.AllowGet);
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }
          dbHelper dbsql = new dbHelper();

        #region 數據查詢 用戶密碼是是否存在
        public DataSet SearchGooutRecordPro(string CardNO, string CPH, string ParkName, int pageIndex, int pageSize)
        {
            SqlConnection conn =  dbsql.Getconn() ;
            conn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandText = "SearchGooutRecordPro";
            cmd.Parameters.Add(new SqlParameter("@CardNO",CardNO));
              cmd.Parameters.Add(new SqlParameter("@CPH",CPH));
              cmd.Parameters.Add(new SqlParameter("@ParkName",ParkName));

            cmd.Parameters.Add(new SqlParameter("@pageIndex",pageIndex));
            cmd.Parameters.Add(new SqlParameter("@pageSize", pageSize));
            SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            try
            {
                dataAdapter.Fill(ds);
            }
            catch (Exception)
            {

            }
            finally
            {
                if (dataAdapter != null)
                {
                    dataAdapter.Dispose();
                }
                if (cmd != null)
                {
                    cmd.Dispose();
                }
                if (conn != null)
                {
                    conn.Dispose();                
                }
            }
            return ds;
        }



 
         



      
        public DataTable SelectMYCARGOOUTRECORD(string CardNO, string CPH, string ParkName )
        {

            //StringBuilder strSql = new StringBuilder();
            //strSql.Append("select * from View_MYCARGOOUTRECORD where CardNO like '%@CardNO%'   and CPH  like '%@CPH%'   and ParkName like '%@ParkName%' ");

            //SqlParameter[] params_add = { 
            //                             new SqlParameter("@CardNO",SqlDbType.VarChar),
            //                                new SqlParameter("@CPH",SqlDbType.VarChar),
            //                                   new SqlParameter("@ParkName",SqlDbType.VarChar),
            //                             };
            //params_add[0].Value = CardNO;
            //params_add[1].Value = CPH;
            //params_add[2].Value = ParkName;

            StringBuilder strSql = new StringBuilder();
            strSql.Append("select * from View_MYCARGOOUTRECORD where   1=1  ");

            List<string> ltstr = new List<string>();

            if (CardNO != "")
            {
                ltstr.Add(" CardNO like '%"+CardNO+"%'");
            }
            if (CPH != "")
            {
                ltstr.Add(" CPH like %' + CPH + '%");
            }
            if (ParkName != "")
            {
                ltstr.Add(" ParkName like %' + ParkName + '%");
            }
            if (ltstr.Count>1)
            {strSql.Append( string.Join(" and ", ltstr)) ;
            }
            if (ltstr.Count == 1)
            {
                strSql.Append(" and "+ltstr[0]);
            }
            

            DataTable dt = dbsql.GetTable(strSql.ToString());
            return dt;
        }

        #endregion

    }
}

至於項目中的mode就不一一寫出來了。