现在做web开发肯定都听说过jQuery，jQuery在ASP.NET MVC被支持的很好，而且据说vs2010中也会集成进去，所以使用ASP.NET MVC了解jQuery肯定有莫大的好处，所以这里利用几个简单的例子来讲解一下jQuery在ASP.NET MVC的中应用。

一、jQuery的引用

对于一个新的ASP.NET MVC项目来说在它的scripts文件夹下已经包含了jQuery的js文件，所以我们在项目中直接引用就可以了，我们可以在View中输入如下代码：


<head runat="server">
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>"
type="text/javascript"></script>
</head>

这里的min版本去除了空格，注释，改写了长文件名，下载的时候所用过的时间更少。

在Vs中使用jQuery有一个比较大的好处是可以利用智能感知，jQuery的团队和微软的团队共同开发了一个js文件用于在vs中的jQuery可以智能感知，但需要在View中输入


<% /* %><script src="~/Scripts/jquery-1.3.2-vsdoc.js"></script><% */ %>

不过我测试这个的时候发现如果在具体的View中使用了这个引用会影响在View中代码的智能感知，但如果放在mastpage中就没什么问题了。

二、jQuery中使用Ajax方式：

1、jQuery.get(url, [data], [callback], [type])

urlString：待载入页面的URL地址

data (可选)Map：待发送 Key/value 参数，在服务器端可以用Request获得。

callback (可选)Function：载入成功时回调函数。

type (可选)String：返回内容格式，xml, html, script, json, text, _default。

我们现在要做一个对列表进行查询的ajax请求，前端视图为：

<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>

<%=Html.TextBox("search") %>
    <input type="button" value="查询" id="btnSearch" />
    <div id="results">
        <%Html.RenderPartial("NewsListPartial", Model); %>
    </div>

<script language="javascript" type="text/javascript">
        $("#btnSearch").click(function() {
        $.get($(this).attr("href"), { title: $("#search").attr("value") }, function(response) {
                $("#results").html(response);
            })

});
    </script>

NewsListPartial.ascx中的内容为：


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

<table>
        <tr>
           
            <th>
                Author
            </th>
            <th>
                Title
            </th>
            <th>
                CreateTime
            </th>
        </tr>

<% foreach (var item in Model) { %>
    
        <tr>
       
            <td>
                <%= Html.Encode(item.Author) %>
            </td>
            <td>
                <%= Html.Encode(item.Title) %>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:g}", item.CreateTime)) %>
            </td>
        </tr>
    
    <% } %>

</table>

Controller为：


public ActionResult GetDemo(string title)
        {
            List<News> news=ListNews.GetList();
            if (Request.IsAjaxRequest())
            {
                return View("NewsListPartial",news.Where(p => p.Title.Contains(title)));
            }
            return View(news);
        }

我们重点来解释一下这句：

$.get($(this).attr("href"), { title: $("#search").attr("value") }, function(response) {
                $("#results").html(response);
            })

$(this).attr("href")：获得当前链接

{ title: $("#search").attr("value") }：调用url时传递的参数，这个参数就是TextBox的值。

function(response) {
                $("#results").html(response);
            }：当ajax请求完之后会调用这个函数，这个函数会将id=results的div替换成返回的文本内容。

2、jQuery.post(url, [data], [callback], [type]) 的用法和get的用法很相似

略（见源码）

3、jQuery.getJSON(url, [data], [callback]) ：通过 HTTP GET 请求载入 JSON 数据。
View：


    <%=Html.TextBox("NewsId") %>
    <input type="button" id="btnGet" value="获得新闻" />
    <table>
        <tr>
            <td>
                ID:
            </td>
            <td id="ID">
            </td>
        </tr>
        <tr>
            <td>
                作者:
            </td>
            <td id="Author">
            </td>
        </tr>
        <tr>
            <td>
                标题:
            </td>
            <td id="Title">
            </td>
        </tr>
   
    </table>

<script language="javascript" type="text/javascript">
        $("#btnGet").click(function() {
        $.getJSON($(this).attr("action"), { newsID: $("#NewsId").attr("value") }, function(news) {
                $("#ID").html(news.ID);
                $("#Author").html(news.Author);
                $("#Title").html(news.Title);
            })
        })
    </script>

Controller：


public ActionResult JosnDemo(string newsID)
        {
            if (Request.IsAjaxRequest())
            {
                return new JsonResult
                {
                    Data = ListNews.GetList().First(p => p.ID.ToString() == newsID)
                };
            }
            else
                return View();
        }

4、load(url, [data], [callback]) ：载入远程 HTML 文件代码并插入至 DOM 中。

下例中当DropDownList改变时，根据DropDownList中的内容改变列表

View：


<h2>
        NewsList</h2>
    <%=Html.DropDownList("Author") %>
    <div id="results">
        <%Html.RenderPartial("NewsListPartial", Model); %>
    </div>
    <script language="javascript" type="text/javascript">

$("#Author").change(function() {
            var selection = $("#Author").val();
            $("#results").load($(this).attr("href"), { author: selection });
        })
    </script>

Controller：


public ActionResult NewsList(string author)
        {
            
            List<News> news=ListNews.GetList();
            if (Request.IsAjaxRequest())
            {
                if (!string.IsNullOrEmpty(author))
                {
                    news = news.Where(p => p.Author == author).ToList();
                }
                return View("NewsListPartial", news);
            }
            else
            {
                List<object> list = new List<object>();
                list.Add(new { author = "全部", value = "" });
                list.Add(new { author = "lfm1", value = "lfm1" });
                list.Add(new { author = "lfm2", value = "lfm2" });
                list.Add(new { author = "lfm3", value = "lfm3" });
                
                ViewData["Author"] = new SelectList(list, "value", "author");
                return View(news);
            }
        }

三、参考：

《pro_asp_dot_net_mvc_framework》

《Professional ASP.NET MVC 1.0》

四、源码下载

ASP.NET MVC实践系列5-结合jQuery相关推荐

  1. ASP.NET MVC实践系列9-filter原理与实践

    filter实际上是一个特性(attribute),它提供了一种向controller 或 action中添加某些任务的方法,当controller 或 action被调用时,会触发filter中定义 ...

  2. ASP.NET MVC实践系列11-FCKEditor和CKEditor的使用

    FCKEditor是一款强大的在线编辑器,简单实用,多浏览器兼容,免费开源,应用十分广泛,据他的官方网站上称有三百多万的下载量,而且无数的知名大公司正在使用它.所以FCKEditor是很值得信赖的,现 ...

  3. ASP.NET MVC实践系列6-Grid实现（上）

    ASP.NET MVC中不推荐使用webform的控件了,也就是说当希望列表显示数据时不能使用GridView了,很多开源软件为ASP.NET MVC实现了列表的解决方案,这些具体的解决方案我们放到下 ...

  4. ASP.NET MVC实践系列1-UrlRouting

    为了调研ASP.NET MVC是否适合在公司项目中应用,研究了一段时间.感觉网上资料中讲实践的比较少,我在这里总结一下以备以后查用. ASP.NET MVC 包含了一个强大的URL路由引擎,它允许我们 ...

  5. mvc ajax helpers,ASP.NET MVC 实践系列4-Ajax应用

    ASP.NET MVC中支持Ajax的方式和webform中有些区别,没有了updatepanel,所以对于初学者来说在最开始应用时似乎没有在webform中简单,但实际使用上更为灵活而跟webfor ...

  6. ASP.NET MVC Framework 系列

    序言 做为设计模式的王者,MVC在众多领域都成为良好的模型的代名词,从前在ASP.NET下我们只能依靠Monorail来实现ASP.NET下无控件的MVC,但是现在ASP.NET 下的MVC已经成为现 ...

  7. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. Scott的ASP.net MVC框架系列文章之四：处理表单数据（2）

    前几周我发表了一系列文章介绍我们正在研究的ASP.NET MVC框架.ASP.NET MVC框架为你提供了一种新的开发Web应用程序的途径,这种途径可以让应用程序变得更加层次清晰,而且更加有利于对代码 ...

  9. Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列 6 ----asp.net MVC+Extjs

    现在mvc采用了ModelBinder, Controller中现在可以接受很多复杂类型的参数,但是对于jquery,extjs等js框架来说,更多的是采用json格式与服务器端传递参数更合理.对于简 ...

最新文章

  1. IDC公布2017年亚太地区数据中心10大预测
  2. hduoj1021 Fibonacci Again
  3. xce/mime/MimeMessage类接口的说明
  4. EasyUI中Messager消息框的简单使用
  5. future.channel().closeFuture().sync()作用 bind(port).sync()作用
  6. JVM常用的参数配置
  7. ASP.NET MVC 第一章 我们的第一个MVC例子
  8. 在Teams app代码中enable nullable
  9. 文件的 MD5 签名介绍
  10. 【年少的风】C#小学生算式×××2
  11. C++语言基础 —— 函数
  12. 如何才能精通C++？原来这点才最重要！
  13. python 输入中文_【提醒】Python新手开发人员注意事项：不要误输入中文标点符号...
  14. 前端aes加密_前端安全攻防解析
  15. NOIp 2014 联合权值 By cellur925
  16. python删除过期文件_python 删除过期文件的方法+源码
  17. springboot框架(2):整合junit4
  18. python建立源文件
  19. ​机器如何“猜你喜欢”？深度学习模型在1688的应用实践...
  20. html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局

热门文章

  1. C#开机启动与退出程序
  2. Android建造者模式初探（Toast工具类的进一步封装）
  3. [BZOJ3631][JLOI2014]松鼠的新家
  4. 《Head First Java》的思考总结：第三篇
  5. android textview改变部分文字的颜色和string.xml中文字的替换及部分内容设置颜色、字体、超链接、图片...
  6. 深入浅出ShellExecute
  7. Spring 中的 context
  8. linux+xampp搭建WordPress个人网站过程详解
  9. 累加器配上委托也可以很吊
  10. 在Tomcat中部署Java Web应用程序几种方式