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

最新推荐文章于 2024-01-09 08:38:19 发布

转载最新推荐文章于 2024-01-09 08:38:19 发布 · 1.6k 阅读

Asp.net、C# 同时被 2 个专栏收录

46 篇文章

订阅专栏

JavaScript

40 篇文章

订阅专栏

本文介绍了一个简单的ASP.NET MVC应用程序，该程序实现了基于关键字的电影搜索功能，并通过Ajax技术实现了分页加载。

需要文件

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.Mvc;
using MvcSimpleModelBinding.Models;

namespace MvcSimpleModelBinding.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();
            }
        }

    }
}

Movie.cs

using System.Collections.Generic;

namespace MvcSimpleModelBinding.Models
{
    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("龙行天下21","动作片"),
                    new Movie("虎胆龙威","动作片"),
                    new Movie("龙虎门e","动作片"),
                    new Movie("猛龙过w江","动作片"),
                    new Movie("龙的传人","动作片"),
                    new Movie("龙之战w","动作片"),
                    new Movie("铁甲威龙","动作片"),
                    new Movie("见龙卸we甲","动作片"),
                    new Movie("龙行天下","动作片"),
                    new Movie("虎胆龙we威","动作片"),
                    new Movie("龙虎门","动作片"),
                    new Movie("猛龙过w江","动作片"),
                    new Movie("龙的传we人","动作片"),
                    new Movie("龙之战","动作片"),
                    new Movie("铁甲ds威龙","动作片"),
                    new Movie("见龙卸sd甲","动作片")
                };
            }
        }
    }
}

ViewUserControl1.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcSimpleModelBinding.Models.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>

Index.aspx

<%@ 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 id="Head1" 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) {
            // alert(query);
            $.post("/MYMovie/Search", "query=" + query + "&page=" + page, function (data) {
                //alert(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>

如果看不到效果，注意ascx、aspx的命名空间是否写错了

在添加视图那里添加ascx文件

http://www.cnblogs.com/bjs007/archive/2010/04/03/1703584.html