跟ASP.NET MVC一起使用jQuery

來源: IT專家網  發布時間: 2010-08-03 22:41  閱讀: 3364 次  推薦: 0   原文鏈接   [收藏]  
摘要:jQuery是一款容易上手的JavaScript庫,任何Web開發平臺都可以使用,它跟ASP.NET MVC框架的結合尤為引人矚目。James Estes曾在InfoQ上發表過一篇文章,名為jQuery正在靠1.2版及jQuery UI贏得人心,談到了jQuery最近的一次發布,并介紹了很多杰出的特性。

  藉由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上使用的時候卻可以千變萬化。

0
0
 
標簽:ASP .NET MVC jQuery
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()