一起谈.NET技术,跟ASP.NET MVC一起使用jQuery

简介:   藉由ASP.NET MVC内置的扩展性,开发人员便可以使用第三方库,例如jQuery。在使用ASP.NET Webforms的时候,如果使用jQuery而不是ASP.NET AJAX,难度会比较大。

  藉由ASP.NET MVC内置的扩展性,开发人员便可以使用第三方库,例如jQuery。在使用ASP.NET Webforms的时候,如果使用jQuery而不是ASP.NET AJAX,难度会比较大。

  刚开始撰写本文的时候,ASP.NET MVC的版本是Preview 4,有些在Preview 4中使用的技术可能无法在早期版本中正常工作。Preview 4可以在CodePlex上下载。

  初步配置

  我不打算把它写成一篇完整的jQuery指南,只是简单给出几个跟ASP.NET MVC一起使用这款JavaScript库的示例。Chad Myers有一篇很精彩的指南,包括了如何上手。

  首先要保证你有ASP.NET MVC,所以请先从CodePlex上下载安装(注意:你需要运行Visual Studio 2008才能使用ASP.NET MVC框架)。

  ASP.NET MVC框架装好以后,就应该已经创建好了一个新的ASP.NET MVC Web Application工程。

  下一步,下载jQuery,下载Packed或者是Minified版本,然后放到上面那个工程的Content目录下。

  添加一个对Content目录下jQuery文件的引用。

  简单示例

  Ryan Lanciaux写过一篇很优秀的文章,名为jQuery和ASP.NET MVC框架,其中列出了很多在ASP.NET MVC框架中使用jQuery的关键因素。Ryan在文章中进行了详细阐述:

  首先要做的就是创建一个ASP.NET MVC(Preview 4)工程,在Home controller下面创建一个新的view和一个controller action,然后把下面几行字加到view中。

  This is red text,this is blueand this is green

  右键点击Controllers文件夹,选择“Add New Item”,然后选择MVC Controller类,任务完成。下一步是创建一个Controller Action:

  接下来,我们需要创建一个Controller Action,它可以从Model中返回色素值。而且我们不希望重载页面,我们希望使用Ajax。很幸运,在MVC框架中我们可以使用JsonResult类型来完成这一点。

      public JsonResult RGBColors()
  {
  Colors.RGB color = new Colors.RGB();
  return Json(color);}

  下一步,创建一个类,用来表示model中的颜色:   

     namespace Colors{
  public class RGB
  {
  public string Red = “#FF0000″;
  public string Green = “#00FF00″;
  public string Blue = “#0000FF”;
  }
      }

  最后一步,用一些jQuery代码把一切组装在一起:

     $(document).ready(function()
  {
  $.getJSON(“/Home/RGBColors”,
  {},
  function(data){
  $(“.red”).css(“color”, data.Red);
  $(“.blue”).css(“color”, data.Blue);
  $(“.green”).css(“color”, data.Green);
  });
       });

  Ryan指出了一处重要的地方:

  注意,jQuery代码是在我们的controller上调用JSON方法。如果我们重载页面,它就会得到model中定义的色素值。完全无痛。它很简单,但在Web上使用的时候却可以千变万化。

目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
盘点72个ASP.NET Core源码Net爱好者不容错过
盘点72个ASP.NET Core源码Net爱好者不容错过
71 0
|
3月前
|
开发框架 .NET
ASP.NET Core NET7 增加session的方法
ASP.NET Core NET7 增加session的方法
37 0
|
3月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
26 0
|
6月前
|
存储 开发框架 前端开发
asp.net与asp.net优缺点及示例
asp.net与asp.net优缺点及示例
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
41 0
|
1月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
29 0
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
61 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
2月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
5月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
52 0

相关课程

更多