在ASP.NET MVC中使用Juqery實現頁面局部刷新

時間 2019-11-18

標籤 asp.net asp mvc 使用 juqery 實現頁面局部刷新欄目 ASP 简体版

原文原文鏈接

本身作的一個實驗，留做備忘，此實例包括擴一下幾個文件：

一、MyMovieController.cs

二、Index.aspx

三、ViewUserControl1.ascx

四、movie類

其中MyMovieController.cs不用再說了，代碼以下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MyMVC.Controllers
{
    public class MYMovieController : Controller
    {
        //
        // GET: /MYMovie/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Search(string query, int? page)
        {
            List<movie> movies = movie.Movies
                .Where(r => r.MovieName.Contains(query))
                .OrderByDescending(r => r.MovieName)
                .Skip((page ?? 0) * 4)
                .Take(4)
                .ToList();
            if (Request.IsAjaxRequest())
            {
                int moiveCount=movie.Movies.Where(r => r.MovieName.Contains(query)).Count();
                ViewData["totalPage"] = (int)Math.Ceiling(moiveCount / 4d);
                ViewData["query"] = query;
                return View("ViewUserControl1", movies);
            }
            else
            {
                return View();
            }
        }

    }
}

MyMovieController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyMVC
{
    public  class movie
    {
        public string MovieName { get; set; }
        public string Category { get; set; }

        public movie(string movieName, string category)
        {
            this.MovieName = movieName;
            this.Category = category;
        }

        public static List<movie> Movies
        {
            get
            {
                return new List<movie>
                {
                    new movie("龍行天下","動做片"),
                    new movie("虎膽龍威","動做片"),
                    new movie("龍虎門","動做片"),
                    new movie("猛龍過江","動做片"),
                    new movie("龍的傳人","動做片"),
                    new movie("龍之戰","動做片"),
                    new movie("鐵甲威龍","動做片"),
                    new movie("見龍卸甲","動做片")
                };
            }
        }
    }
}

movie.cs

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MyMVC.movie>>" %>

    <table>
        <thead>
        <tr>
            <th>
                MovieName
            </th>
            <th>
                Category
            </th>
        </tr>
        </thead>
        <tbody>
    <% foreach (var item in Model) { %>
        
        <tr>
            <td>
                <%= Html.Encode(item.MovieName) %>
            </td>
            <td>
                <%= Html.Encode(item.Category) %>
            </td>
        </tr>
       
    <% } %>
      </tbody>

    </table>

    <p>
        <% 
            int totalPage = (int)ViewData["totalPage"];
            string query = ViewData["query"].ToString();
            for (var i = 0; i < totalPage; i++)
            {
                %>
                    <a href="#" title="<%=i %>"><%= Html.Encode(i+1) %></a>
                <% 
            }
        %>
    </p>

ViewUserControl1.ascx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        #result table thead tr
        {
            background-color:#cccccc;
        }
    </style>
    <script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        //發送異步請求，將結果輸出到<div id="result"></div>中
        //最後一個參數能夠是"html"也能夠是"text"
        function search(query, page)
        {
            $.post("/MYMovie/Search", "query=" + query + "&page=" + page, function(data)
            {
                $("#result").html(data);
                $("#result table tbody tr:odd").css("background", "#F5DEB3");
            }, "text"
            );
            //屏蔽超級連接跳轉
            return false;
        }
        
        $(function()
        {
            //爲搜索按鈕綁定事件
            $("#search").click(function()
            {
                search($("#query").val());
            })
            //爲新生成的分頁鏈接綁定click事件
            $("a").live("click", function()
            {
                search($("#query").val(), $(this).attr("title"));
            });
        })
    </script>
</head>
<body>
    <div>
        <h2>搜索電影</h2>
        <%= Html.TextBox("query") %>
        <input type="button" id="search" value="提交" />
        <div id="result"></div>
    </div>
</body>
</html>