您的位置: 首页  >  IT文章  >  在ASP.NET MVC中使用Juqery实现页面局部刷新

在ASP.NET MVC中使用Juqery实现页面局部刷新

分类: IT文章 • 2025-01-16 23:24:43 
自己做的一个实验，留作备忘，此实例包括扩一下几个文件：
1、MyMovieController.cs
2、Index.aspx
3、ViewUserControl1.ascx
4、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 ></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>
Index.aspx

相关推荐