1. 程式人生 > >FineUIMvc隨筆(5)UIHelper是個什麼梗?

FineUIMvc隨筆(5)UIHelper是個什麼梗?

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。

UIHelper.Result

在 FineUIMvc 的每一個 HttpPost 的控制器方法裡面,你都會看到 UIHelper.Result():

這到底是個什麼梗?在 ASP.NET MVC 中並沒有 UIHelper 這樣一個靜態類,為何它能頻頻出現於每個 HttpPost 的控制器方法中呢?

這一切的一切還要從 ActionResult 入手。

ActionResult

即使第一天接觸 ASP.NET MVC 開發人員也應該知道 ActionResult 的含義,作為控制器方法(Action)的返回值(Result),這是一個抽象類。

MVC 內建了很多 ActionResult 的實現類,最常用的可能是下面幾個:

1. ViewResult:返回檢視。

2. ContentResult:返回一個靜態字串。

3. RedirectResult:重定向到另一個URL,類似於 WebForms 中的 Response.Redirect 函式,返回的HTTP狀態碼是 302 Redirect。

4. JsonResult:返回一個JSON字串。

5. HttpNotFoundResult:未找到物件,一般用於URL引數錯誤,返回的HTTP狀態碼是 404 Not Found。

還有很多類似的實現,在學習過程中我們會逐步接觸。

但是這裡面沒有 FineUIMvc 回發時能用的 ActionResult,如果你之前對 FineUI(開源版)有所瞭解的話,就知道 FineUI 回發時返回的是一串 JavaScript 程式碼:

因此我們就需要自定義 ActionResult 的實現類,來在 FineUIMvc 回發時返回需要的 JavaScript 程式碼,這個實現類就是 FineUIMvc.AjaxResult。

FineUIMvc.AjaxResult 會處理回發過程中每個控制元件的改變,並轉化為 JavaScript 程式碼並返回。

比如這樣一段 C# 程式碼:

Alert.Show("
你好 FineUIMvc!", MessageBoxIcon.Warning);

在返回的 HTTP 響應中,對應於:

F.alert({message:'你好 FineUIMvc!',messageIcon:'warning'});

這個轉化過程就是有 FineUIMvc.AjaxResult 類負責的。

而 UIHelper.Result 就是返回的一個 AjaxResult 例項,內部實現如下:

public static class UIHelper
{
    
    /// <summary>
    /// 響應Ajax請求
    /// </summary>
    /// <returns></returns>
    public static AjaxResult Result()
    {
        return new AjaxResult();
    }
    
}

現在回過頭來,我們看下 ASP.NET MVC 中的 HttpPost 控制器方法中為啥不需要類似 AjaxResult 的實現:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ID,Name,Gender,Major,EntranceDate")] Student student)
{
       if (ModelState.IsValid)
       {
              db.Students.Add(student);
              db.SaveChanges();
              return RedirectToAction("Index");
       }
 
       return View(student);
}

可以看到,原生的 HttpPost 控制器方法直接返回的是檢視(ViewResult的例項),也就是整個頁面的更新,非AJAX過程。

UIHelper.Button,UIHelper.Grid,UIHelper.Tree... 

UIHelper 還有一個重要的用途,那就是根據控制元件的 ID 獲取控制元件物件,並對其進行更改,UIHelper.Result 會將所有的更改轉化為 JavaScript 並返回到客戶端。

下面通過一個例子來詳細說明這一過程:

線上示例地址:http://fineui.com/demo_mvc#/demo_mvc/Button/Button

在這個例子中,點選第一個按鈕,會不斷切換第二個按鈕[按下的按鈕]的狀態,第一個按鈕的點選事件處理函式:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult btnChangePressed_Click(bool pressed)
{
    UIHelper.Button("btnPressed").Pressed(!pressed);

    return UIHelper.Result();
}

這裡面有幾個重要的概念:

1. 第二個按鈕的當前狀態需要通過客戶端傳入,伺服器端對其一無所知(從 WebForms 轉入的開發人員常常會忽略這個重要概念)。

2. UIHelper.Button("btnPressed"),用來返回一個 ID 為 btnPressed 的按鈕示例。

3. Pressed 方法用來生成一段改變按下狀態的指令碼。

一個常常令開發人員疑惑的事實是:UIHelper.Button("btnPressed") 返回的並不是你在 View 中定義的名為 btnPressed 的按鈕物件!

因為 HTTP 協議本身是無狀態,因此伺服器端不可能知道客戶端的任何資料(除非你顯式傳入的資料),更無法得知你在 View 中定義的任何內容了。

是不是懷念 WebForms 了,因為在 WebForms 中 ViewState 幫你記下了所有的控制元件屬性,然而你不是很討厭 ViewState 的臃腫嗎?

讓我來做個簡單的說明,希望能解開你心中的疑惑,在 View 中,我們是這麼定義按鈕的:

@(F.Button()
    .ID("btnPressed")
    .Text("按下的按鈕")
    .EnablePress(true)
    .Pressed(true)
)

在回發裡面,如果你試圖獲取按鈕的 Text 屬性,你會發現這個是空字串!

UIHelper.Button("btnPressed").Source.Text

因為在 FineUIMvc 內部,只是重新建立了一個 ID=btnPressed 的按鈕,預設按鈕的 Text 就是空字串。

為了儘量避免開發人員犯這個錯誤,所有 UIHelper.Button, UIHelper.Grid... 返回例項中,只能通過方法來操作,比如更改按鈕的顯示文字:

UIHelper.Button("btnPressed").Text("修改成你想要的文字");

再次強調:UIHelper.Button 返回的是按鈕示例只是用來輔助生成前端 JavaScript 的更新指令碼,不是 View 中定義的按鈕例項。

下面簡單看下,在前臺如何傳入第二個按鈕的按下狀態:

@(F.Button()
    .ID("btnChangePressed")
    .Text("改變後面按鈕的按下狀態")
    .CssClass("marginr")
    .OnClick(Url.Action("btnChangePressed_Click"), new Parameter("pressed", "F.ui.btnPressed.isPressed()"))
)

通過上一篇文章講解的自定義引數,我們知道 Paramter 示例中的第二個引數是一段 JavaScript 程式碼:

F.ui.btnPressed.isPressed()

小結

UIHelper 是一個非常重要的靜態類,它有兩個主要的用途。

UIHelper.Result 用來返回一個 FineUIMvc.AjaxResult 的例項,用來將回發時的更改轉化為 JavaScript 程式碼返回。

另一個重要用途的返回控制元件例項(比如 UIHelper.Button,UIHelper.Grid,UIHelper.Tree...),並提供一系列的方法來更新控制元件,但是要注意這裡的控制元件例項並不是你在 View 中定義的那個例項,只是一個新建立的同名例項而已,方便更新控制元件屬性。

相關推薦

FineUIMvc隨筆5UIHelper什麼

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 UIHelper.Result 在 FineUIMvc 的每一個 HttpPost 的控制器方法裡面,你都會看到 UIHelper.Result(): 這到底是個什麼梗?在 ASP.NET MVC 中並沒有 UIHelper

FineUIMvc隨筆7擴充套件通知對話方塊顯示多不重疊

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 這篇文章我們將改造 FineUIMvc 預設的通知對話方塊,使得同時顯示多個也不會重疊。並提前出一個公共的JS檔案,供大家使用。 FineUIMvc 的通知對話方塊 FineUIMvc預設的通知對話方塊通過 F.notify 來顯示

flink流計算隨筆5

Windows 聚合事件(例如計數、和)在流上的工作方式與批處理不同。例如,不可能計算流中的所有元素,因為流通常是無限的(無界的)。相反,流上的聚合(計數、和等)是由視窗限定作用域的,例如“過去5分鐘的

FineUIMvc隨筆1動態建立表格列

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 《FineUIMvc隨筆》目錄 ... 使用者需求 使用者希望實現動態建立表格列,在 WebForms 中,我們通過在 Page_Init 中建立列來實現: 但

FineUIMvc隨筆4自定義回發引數與自定義回發

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 不能忘卻的回發 在上一篇文章中,我們對FineUIMvc中的回發進行了詳細描述,目的是為了告訴大家: 1. FineUIMvc中的回發其實是請求控制器方法的另一種表述而已 2. 回發是輕量級,只會傳入你允許傳入的引數 3. 回發

FineUIMvc隨筆2怎樣在控制元件中巢狀 HTML

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 使用者需求 有網友在《FineUI總群1》問這麼一個問題:怎麼把 HTML 巢狀在控制元件中? 這是很多剛學習 FineUIMvc 的網友經常問的問題,我想原因是對 WebForms 陷入太深,習慣了 FineUI 控制

FineUIMvc隨筆3不能忘卻的回發__doPostBack

 宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 使用者反饋 有網友在官方論壇丟擲了這麼一個問題,似乎對 FineUIMvc 中的瀏覽器端與伺服器端的互動方式很有異議。 這裡面的關鍵詞就是:回發! 似乎一提到回發(__doPostBack),就讓人聯想到 Web

FineUIMvc隨筆6對比WebForms和MVC中表格的資料庫分頁

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 通過對比WebForms和MVC中表格資料庫分頁程式碼的不同,可以對 MVC 中的資料流轉有更加深入的瞭解。 WebForms 中表格的資料庫分頁 WebForms中的程式碼會比較直觀,我們從具體是示例入手: http://fin

5firewalld的9zone、firewalld關於zone、service的操作、

linux系統服務 firewalld才是centos7上的防火墻機器之前的操作中我是打開了iptables服務,現在我們先關閉iptables服務,打開firewalld服務。 systemctl disable iptablessystemctl stop iptablessystemctl enable

牛客66題5用兩棧來實現一個佇列

class Solution { public:     void push(int node) {         stack1.push(node);     }     int pop()

AI理論隨筆-最優化5

單純形法(2) [11200−64144014013454014107494000000] \begin{bmatrix} 1&amp;\frac{1}{2}&amp;0&amp

爬蟲入門,從第一爬蟲建立起做蟲師的心,爬蟲的編譯器的安裝,pycharm第三方庫的安裝和pip的安裝,爬蟲的認知篇5

          Python之所以強大並逐漸流行起來,一部分原因要歸功於Python強大的第三方庫。這樣使用者就不用瞭解底層的思想,用最少的程式碼寫出最多的功能。 在PyCharm中安裝

SBS5-- 陣列中和為s的兩數字Python

輸入一個遞增排序的陣列, 和一個數字s, 在陣列中查詢兩個數,使得他們的和正好是s。 # -*- coding:UTF-8 -*- ''' 找出整型數組裡除了兩個數字以外,其它都出現了兩次。要求時間複雜度是O(n) 空間複雜度是 O(1) '''

【Java+Selenium5】---- 編寫第一自動化測試指令碼

        前面介紹了環境搭建和三大瀏覽器的啟動方法,這篇文章將正式介紹自動化測試指令碼的編寫。寫了一個簡單的百度自動搜尋,先體會一下,後續的文章會詳細的介紹 Web Driver API 中的元素定位、瀏覽器控制、多視窗切換、多表單切換等等。        直接看下程式

24基本指標精粹講解5--SR

停損指標——SAR SAR指標又叫拋物線指標或停損轉向操作點指標,其全稱叫“Stop and Reveres,縮寫SAR”,是由美國技術分析大師威爾斯?威爾德(Wells Wilder)所創造的,是一種簡單易學、比較準確的中短期技術分析工具。 第一節 SAR指標的原理和計算方

股票量化分析11——第二策略5日移動均線、雙均線、MACD策略

這裡主要用的是talib這個庫來求股票的指標,就免得造輪子。 移動均線有好幾個策略,不過都是簡單的策略,包括簡單的移動均線策略,雙均線交叉策略,macd線的策略。目前也就覺得macd線簡單好用。 先放一個簡單的策略——移動均線策略。這個策略是由下向上超過均線

連結串列5----查詢連結串列倒數第K節點

1、連結串列定義 typedef struct ListElement_t_ { void *data; struct ListElement_t_ *next; } ListElement_t; typedef struct List_t_{

WPF學習筆記5:兩DataGrid的滾動條實現同步滾動

archive col grid 一個 href net his 滾動條位置 view 效果:兩個DataGrid的滾動條實現同步滾動。 代碼參考了博客園chuncn的文章《.net中同步多個ScrollViewer滾動的四種方法》,原文是針對ListBox的。現改為

Cesium 學習記錄5一次刷新出多自定義氣泡視窗

之前文章被抄襲過,抄襲者我就說一句好自為之,現在csdn沒辦法舉報和投訴,有時間了我絕對追究到底歡迎轉載,不歡迎一個字不改還說自己是原創的。樂於知識分享,轉載請註明原作者和地址,謝謝。==============================================

程序猿的量化交易之路17--Cointrader之Temporal實體5

eas 建表 times create bject cloud temp 存儲 時間 轉載須要註明:http://blog.csdn.net/minimicall,http://cloudtrader.top/ 這一小節說明一個時間實體Temporal實體,它的代碼非常