您的位置：首页 > Web前端 > JQuery

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

2013-01-22 22:43 971 查看
需要文件

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/cs
4000
s">
#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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航