一步步學習ASP.NET MVC3 (11)——@Ajax,JavaScriptResult(2)


請注明轉載地址:http://www.cnblogs.com/arhat

今天在補一章吧,由於明天的事可能比較多,老魏可能顧不上了,所以今天就再加把勁在寫一章吧。否則對不起大家了,大家看的比較快,可是我寫的速度卻跟不上了,哈哈。大家耐心一點吧,等把這幾張有關ActionResult的章節寫完,老魏馬上要開始寫路由方面的知識了,同時老魏打算用一到兩章的內容來總結一下我們前面所寫的內容。

在上一章中,我們講了@Ajax輔助方法,但是只是講了ActionLink的使用,那么本章將講解@Ajax輔助方法的@Ajax.BeginForm()用來提交表單。同時本章在開始的時候,我們先把ActionLink的傳參使用講解一下。

現在我們需要使用ActionLink想服務器傳遞一個或多個參數,服務器接收參數后再加以改變輸出到客戶端。

我們在HomeController中寫一個Action方法作為Ajax請求的方法。

public ActionResult ServerMethod(int id,string name) 
 {

string result = "客戶端傳遞過來的id:" + id + ",名字:" + name;

return Content(result);

 }

同時改寫一下Index.cshtml頁面

@{

ViewBag.Title = "Ajax輔助方法";

}

@section script{

function Display(data){

alert(data);

}

}

@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new { Id = 34, Name = "大話濟公" }, new AjaxOptions() { OnSuccess="Display"});

通過第三個參數routeValues,我們匿名對象傳遞兩個參數。同時把服務器返回的內容通過Dispaly函數來顯示出來。
wps_clip_image-31025

這個就是如何參數的使用方法,希望大家能夠明白。下面我們主要來講解一下@Ajax.BeginForm()函數,讓表單異步提交。首先,我們來看一個例子,服務器函數還是使用上面的函數。

我們來改寫一下Index.cshtml的內容

@{

    ViewBag.Title = "Ajax輔助方法";

}

@section script{

    function Display(data){

        alert(data);

    }

}

@using (Ajax.BeginForm("ServerMethod",new AjaxOptions(){OnSuccess="Display"}))

{ 

@:Id:@(Html.TextBox("id"))

<br />

@:姓名:@(Html.TextBox("name"))

<br />

<input type="submit" value="提交" />

}

預覽效果如下:
wps_clip_image-15344

@Ajax.BeginForm的使用方法和@Ajax.ActionLink的使用方法一樣,主要是對AjaxOptions屬性的更改上而已。

但是現在我們的需求改變了,上面只是通過Dispaly函數來顯示,那么我們能不能通過服務器端直接輸出js呢?答案是肯定的,這個時候我們就需要JavaScriptResult了。在前面我們說過,JavaScriptResult輸出的內容並不能直接執行,@Ajax的輔助方法才能執行。那么現在我們使用JavaScriptResult來指定要執行的JS。

下面我們更改一下ServerMethod方法

public ActionResult ServerMethod(int id,string name) 
  {

    string result = "客戶端傳遞過來的id:" + id + ",名字:" + name;

    return JavaScript(@"$(""#result"").html("""+result+@""");");

 }

同時更改一下Index.cshtml

@{

    ViewBag.Title = "Ajax輔助方法";

}

@section script{

    function Display(data){

        alert(data);

    }

}

@using (Ajax.BeginForm("ServerMethod",null))

{ 

@:Id:@(Html.TextBox("id"))

<br />

@:姓名:@(Html.TextBox("name"))

<br />

<input type="submit" value="提交" />

}

<div id="result">

</div>

預覽結果如何呢?我們來看看

wps_clip_image-428

通過JavaScriptResult,那么返回的JS語句會被執行。但是這樣做法是老魏不推薦的,因為這樣寫的話,ASP.NET MVC的特點“關注點分離”會變的非常不好,本身Action所做的就是數據處理,不能夠在插手管理View吧。所以,這是老魏所部推薦的。

好了,這一章就把@Ajax和JavaScriptResult介紹完了。希望大家能夠好好的練習一下。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM