在MVC專案下，使用 JQuery 提交一個表單，並接收 server 回傳的 JSON資料

原文：http://www.dotblogs.com.tw/jefflee/archive/2011/04/05/22283.aspx  

Ajax雖然很簡單，但程式語法有些小地方我一直記不起來，每次都要上網找範例，或去看之前寫的code，而之前寫的code多半加了很多東西，容易被其他東西給分散注意，因此想做個簡單的 ajax 例子記錄下來。

        這例子很簡單，就是將畫面上的表單，用ajax的方式送回 server，server處理完後，用 JSON的方式回傳結果，client再利用 JQuery 處理 JSON物件。這邊例子是以MVC專案的方式實做，做好的畫面如下：

1.輸入名字後，按下button。

 

2. 回server端後，server 用 JSON 字串傳回結果，然後再用 javascript alert 結果。

 

    首先從view來看，依照畫面擺了button和兩個input來做輸入使用，注意這兩個input要放在一個form裡，因為我們要將輸入的值，用form的形式post 回server。

 

再來看Javascript的部分，這裡利用jquery 提交一個表單( formOne)給 Name/PostData 這個 action。

 

    接著來看 action 的部分，因為是提交一個表單，因此 action 能接收一個 model 物件的參數。

    另外，回傳值要用JsonResult，可以用Controller l繼承的Json 這個method 來將物件轉成JsonResult。

 

    IndexVM很簡純，只有兩個屬性FirstName和LastName。

 

    再回到cshtml看看javascript那段，ajax 的 callback function收到一個data的參數，我們可以用接用data.FirstName和data.LastName來取得資料，這就是我們使用json最大的目的，在javascrit中可以操作我們定義好的物件，我們序列化的是IndexVM這個物件，經過JQuery反序列化後，就可以如例子一樣方式的使用屬性，非常方便，如果沒有用json，那麼傳遞的資料只是個字串或xml，處理起來就麻煩多了。

    最後順便一提，也許有的人會發現我javascript的部分，data已經是json物件了，不需要再用$.parseJson做轉換，詳細的原因請參考這篇application/json。

 

附上範例程式：MvcAjax.zip