.NET MVC一起使用jQuery

來源:互聯網
上載者:User

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

上面這個例子簡單示範了如何使用JSON,Ryan和他的兄弟Joel寫了一個Theme Generator Tool,裡面有完整的應用。另外敬請留意,在撰寫本文的過程中,微軟已經發布了ASP.NET MVC架構的Preview 5版本。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。