您的位置：首页 > 编程语言 > ASP

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

2013-05-17 15:34 856 查看

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

}
}

movie.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("见龙卸甲","动作片")
};
}
}
}
}

View

<%@ 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>

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

原文地址：http://www.cnblogs.com/bjs007/archive/2010/04/03/1703584.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航