添加ASP.NET其他的AJAX技術(shù)
添加ASP.NET其他的AJAX技術(shù)
我們完全可以實(shí)現(xiàn)類(lèi)似于包含在TaskView.ascx中的<form>部分。而且，我們同樣可以其中描述每一個(gè)任務(wù)項(xiàng)，但是卻能夠把一個(gè)常規(guī)的基于提交的表單轉(zhuǎn)換成一個(gè)支持AJAX技術(shù)的表單。這樣以來(lái)，任務(wù)項(xiàng)的編輯與刪除操作就可以在局部刷新?tīng)顟B(tài)下實(shí)現(xiàn)。示例代碼中對(duì)此作了解釋?zhuān)诖瞬辉儋樖觥?/P>
接下來(lái)，我想介紹的是如何添加一些腳本并把它添加到我們的示例程序的UI中創(chuàng)建其他基于AJAX的交互而生成的HTML。具體地說(shuō)，我想在文本框中添加一個(gè)水印效果，此效果為用戶輸入提供了極為友好的用戶直觀性提示。只要沒(méi)有用戶輸入，此水印效果就會(huì)顯示出來(lái)，而當(dāng)用戶把輸入焦點(diǎn)定位于文本框中時(shí)即水印效果消失。
當(dāng)然，篇幅所限，我們也不會(huì)過(guò)于細(xì)致地去討論腳本本身。有關(guān)此腳本詳細(xì)內(nèi)容，請(qǐng)參考本文源碼，但是需要指出的是這個(gè)水印效果被實(shí)現(xiàn)為大家可能熟悉的ASP.NET AJAX框架的一個(gè)客戶端行為（Behavior）組件。就像任何其他行為組件一樣，我們的示例中所使用的文本框也是與DOM元素相關(guān)聯(lián)，而且它實(shí)現(xiàn)了對(duì)此元素引發(fā)的相關(guān)事件的訂閱。
在傳統(tǒng)的web表單頁(yè)面中,我經(jīng)常會(huì)直接使用支持AJAX功能的服務(wù)器控件，例如WatermarkExtender，并使之關(guān)聯(lián)到一個(gè)服務(wù)器控件。但是，在本例中，我使用了另一種擴(kuò)展方法來(lái)實(shí)現(xiàn)渲染效果。通過(guò)此方法，我也可以實(shí)現(xiàn)創(chuàng)建并初始化腳本行為組件的一個(gè)實(shí)例。下面給出了我更新以后的視圖關(guān)鍵部分的代碼片斷：
- <% RenderBeginAjaxForm(Url.Action("Add"),
- new { Update="taskList, UpdateType="appendBottom",
- Highlight="True",
- Starting="startAddTask", Completed="endAddTask" }); %>
- <input type="text" name="name" id="nameTextBox" />
- <% Ajax.Watermark("nameTextBox",
- new { watermarkText="[What do you need to do?]",
- watermarkCssClass="watermark"}); %>
- <input type="submit" name="addTask" value="Add Task" />
- <% RenderEndForm(); %>
上面的擴(kuò)展方法實(shí)現(xiàn)相當(dāng)簡(jiǎn)單。其實(shí)，它也就是調(diào)用了現(xiàn)成的AJAX框架。下面是我定義的WatermarkBehavior類(lèi)相應(yīng)的代碼：
- public static class WatermarkBehavior {
- public static void Watermark(this AjaxHelper ajaxHelper,
string id, object watermarkOptions) {- ajaxHelper.RegisterScript("~/Views/Scripts/Watermark.js");
- ajaxHelper.RegisterScriptBehavior(id, "Ajax.Watermark", watermarkOptions);
- }
- }
當(dāng)然，我們還可以更細(xì)致地控制上面的編碼，但這里僅展示了提供搜集注冊(cè)的腳本功能核心部分的代碼片斷，以及把它們生成到頁(yè)面中，然后實(shí)例化行為對(duì)象，并使其與相應(yīng)的DOM元素建立關(guān)聯(lián)，以及傳遞進(jìn)視圖提供的選擇以便定制具體的實(shí)例介紹添加ASP.NET其他的AJAX技術(shù)。
【編輯推薦】
