ASP.NET MVC和jQuery系列一：入門篇

我是ASP.NET MVC的新手，看了ASP.NET MVC和jQuery系列的幾篇文章感覺不錯，分享給大家,如果翻譯的有問題請指出，謝謝。

原文串連：http://www.codeproject.com/Articles/74338/ASP-NET-MVC-and-jQuery-Part-1-Getting-Started.aspx

-----------------------------------本文分割線------------------------------------

這是這個Visual Studio 2010中ASP.NET MVC和jQuery系列的第一篇文章

    如果你有ASP.NET和JavaScript開發web的經驗。你很可能已經聽說過它們了（ASP.NET MVC和jQuery），你也可能對這兩種技術結合使用高度興趣。

    入門篇不會非常難，我將不會在這篇文章中講述很難的內容。先弄清楚兩件事情，然後我們切入正題。

什麼是ASP.NET MVC架構？

    Model-View-Controller，簡稱MVC，是一種設計模式，協助我們組織代碼，使用這種方式我們能清楚地分離資料、行為&商務邏輯和介面。這些組件我們分別稱為模型，控制器和視圖。

    ASP.NET MVC的MVC架構為我們提供了支援的工具、約束和一些類來供我們使用這種設計模式，而不是ASP.NET的預設的Page-Controller 。

什麼是Jquery？

    我們能使用JavaScript能訪問HTML文檔的每一個元素。有了JavaScript，您可以操縱DOM、寫指令碼來實現網頁動畫、進行AJAX請求、還可以進行一些驗證。

    你寫好的代碼，你一般都將它儲存起來（以後就不用再寫了）。當你想要一個新的功能，您可能又需要作大量的修改。還會伴隨著效能問題、瀏覽器的相容性問題，甚至跨平台相關的問題。

    jQuery是一個JavaScript程式碼程式庫。它已經幫你完成很多你想做的事。如：它能跨瀏覽器安全色，它有許多預構建的組件，它的每個版本都有良好的效能。

    你可以把Jquery看成是一種對一組物件執行一些動作，甚至它們是這組物件裡面的一個物件。你需要先找到這組物件，讓後執行它們的一些動作。 這組物件可能是DOM的元素，像DIV、images、form、forms或者document元素本身。

基本的步驟

1、建立一個ASP.NET MVC 2 Web Application

2、在Site.Master中添加Jquery引用，使Jquery在所有的頁面都可用

3、使用if（false）使智能提示功能在視圖部分可用

4、引用指令碼來使J獨立的avaScript檔案中智能提示可用

Meaty Version

    啟動Visual Studio 2010 建立一個新項目。導航到web分類，選擇ASP.NET MVC 2 Web Application。修改你項目的命名（修改成Spike.jQueryMvc），點擊OK。

    此時Visual Studio將提示你是否需要建立一個Test Project。現在我們選擇否。這樣完成了建立MVC項目的嚮導。

    在Solution Explorer在 Views –> Shared 中開啟 Site.Master 檔案。展開Scripts檔案夾，你可以看到Visual Studio預設添加的指令碼。

    在Site.Master的HEAD標記，拖jQuery ‘min’ 檔案，它下面的是，jQuery'vsdoc'檔案。將你的vsdoc檔案放到if（false）語句中間。vsdoc將永遠不會被載入到瀏覽器中（因為false永遠不為真），但是Visual Studio將會載入這一檔案，使用這個技巧可以啟用智能感知功能。

    我們這樣設定是為使用jQuery和Visual Studio 2010很棒的智能感應功能。

    現在，導航到 Views –> Home 中的Index.aspx頁 - 開啟它。 在P結束標籤後面添加以下代碼：

<script language="javascript" type="text/javascript">$(function () {   $("p").click(function () {       $(this).slideUp();   });})</script>

    你會發現Visual Studio在你正在輸入時候，會雨後春筍般的冒出為你說明的jQuery函數的文字。

    按F5運行應用程式。你將被提示修改Web.config檔案，點擊確定。

      瀏覽器會被開啟，會開啟一個被稍微修改過的預設的MVC網頁。點擊 “To learn more about ASP.NET MVC”這串文字，觀察一下jQuery執行了什麼。

FTW？這是怎麼工作的？

下面這些是基礎：

    1、指令碼標記被添加到檔案中

    2、我們使用了jQuery的捷徑等待文檔載入完成後運行這個函數

    3、當載入完成後，我們找到DOM中的所有P元素，為它們建立一個事來處理使用者點擊。這由匿名函數來完成。

    4、在點擊事件處理常式內部，我們使用jQuery的$（this）來選擇使用者點擊了的P元素，告訴它使用了動畫效果。

    第一個捷徑基本上是一個事件處理常式 - 在這種情況下，檔案載入完成後，一個匿名函數被執行時。你應該在每一個頁面都使用它，因為jQuery無法找到尚未被添加到DOM的元素。

$(function () {})

 

在這個函數在DOM載入後執行一次 - 我們使用一個jQuery選取器找到檔案中的所有P元素，並給他們附上點擊處理事件。

$("p").click(...);

選取器可以通過ID和class選擇任何元素。對於ID和class，使用的CSS樣式的文法（分別是＃和.），對於ID為“first-name”的input，使用jQuery 找到它代碼下面：

$("#first-name")

剩下的是匿名函數，我們作為一個事件處理常式來使用。

function () {$(this).slideUp();}

 

我們為點擊的元素調用slideUp動畫，讓jQuery的做的事。

反饋

我開始的這一系列是為了協助一個學習Web開發的朋友。我發現將這些技巧寫出來，我發現我自己更好地瞭解這些技術。我希望它可以為別人當作為一個很好的參考。