FineUIMvc隨筆(4)自定義回發引數與自定義回發
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。
不能忘卻的回發
在上一篇文章中,我們對FineUIMvc中的回發進行了詳細描述,目的是為了告訴大家:
1. FineUIMvc中的回發其實是請求控制器方法的另一種表述而已
2. 回發是輕量級,只會傳入你允許傳入的引數
3. 回發是AJAX過程
4. 可以通過控制元件ID來快捷的附加相關引數
但是,上一篇文章沒有講解如何在回發中自行附加需要的引數,這個引數來源可以是:
1. 靜態字串
2. JavaScript變數或者函式返回值
自定義回發引數
為了更好的講述問題,我們來看一個具體的示例:http://fineui.com/demo_mvc#/demo_mvc/Form/CheckBoxListUpdate
在這個例子中,點選[獲取列表一的選中項]按鈕時,會向後臺傳遞兩個引數:
1. 靜態字串:"列表一"
2. 列表一的選中項,通過自定義JavaScript函式返回
回發引數:靜態字串
首先來看下按鈕的定義:
F.Button() .ID("btnCheckedItemsList1") .Text("獲取列表一的選中項") .OnClick(Url.Action("btnCheckedItemsList_Click"), new Parameter("name", "列表一", ParameterMode.String),new Parameter("selected", "getCheckBoxListSelected('CheckBoxList1')"))
從VS的智慧提示我們可以看到 OnClick 方法的一個過載定義:
可以看到第二個引數,是不定長可變引數陣列(params Parameter[]),我們可以傳入多個 Parameter 示例。
Parameter的建構函式中,第三個引數 ParameterMode 指定了引數型別,可以是字串(String)或者指令碼(Script)。由於預設是指令碼,所以這裡的靜態字串引數需要指定第三個引數為ParameterMode.String。
觀察下本次HTTP的請求正文:
回發引數:JavaScript變數或者函式返回值
上面OnClick方法還指定了第二個請求引數:
new Parameter("selected", "getCheckBoxListSelected('CheckBoxList1')")
注意,由於預設ParameterMode型別是指令碼,所以無需傳入第三個引數,這裡的 getCheckBoxListSelected 是頁面上自定義的一個 JavaScript 函式:
<script> function getCheckBoxListSelected(cbxListID) { return F.ui[cbxListID].getValue(); } </script>
為了更仔細的對比 ParameterMode 的區別,我們來看下頁面生成的HTML原始碼,可以發現如下:
new F.Button({ id: 'btnCheckedItemsList1', text: '獲取列表一的選中項', handler: function () { F.doPostBack({ url: '/Form/CheckBoxListUpdate/btnCheckedItemsList_Click', disableControl: 'btnCheckedItemsList1', params: { name: '列表一', selected: getCheckBoxListSelected('CheckBoxList1') } }); } });
注意:name 引數對應的是一個字串,而 selected 引數對應的則是對一個 JavaScript 函式的呼叫。
自定義回發
有時我們需要在回發前進行邏輯控制,單純的自定義回發引數就滿足不了需要。類似的情況還有,多個控制元件的事件呼叫同一個控制器方法,如果每個事件都自定義引數的話會有很多重複程式碼,這時就需要在一個地方自定義回發了。
舉例說明:http://fineui.com/demo_mvc#/demo_mvc/Grid/CheckAll
點選按鈕[選中了哪些行(自定義回發)]時,我們需要首先判斷表格是否有選中行,如果沒有選中行的話,就給出一個提示框而不進行回發:
這個邏輯單獨靠按鈕的 OnClick 擴充套件方法和自定義回發引數就不行了。我們需要註冊按鈕的客戶端 click 事件:
@(F.Button() .Text("選中了哪些行(自定義回發)") .ID("Button3") .Listener("click", "onButton3Click") )
然後在自定義函式 onButton3Click 中,進行表格是否選中的邏輯判斷,最後才在真正的回發:
<script> function getGridSelectedRows() { var result = [], grid = F.ui.Grid1; $.each(grid.getSelectedRows(true), function (index, item) { var itemArr = []; itemArr.push(item.id); itemArr.push(item.text); itemArr.push(item.values.Gender); itemArr.push(item.values.Major); result.push(itemArr); }); return result; } function onButton3Click(event) { var grid = F.ui.Grid1; if (!grid.hasSelection()) { F.alert('沒有選中項!'); return; } // 觸發後臺事件 F.doPostBack('@Url.Action("Button1_Click")', { 'selected': getGridSelectedRows() }); } </script>
通過如下程式碼對錶格是否存在選中項進行邏輯判斷:
if (!grid.hasSelection()) { F.alert('沒有選中項!'); return; }
自定義回發:
F.doPostBack('@Url.Action("Button1_Click")', { 'selected': getGridSelectedRows() });
第一個引數是控制器方法對應的URL,第二個引數是需要傳入控制器方法的引數。這個 JavaScript 和按鈕的 OnClick 擴充套件方法比較類似。
最終的顯示效果:
小結
FineUIMvc對回發引數提供了三個級別的控制,適用於各種不同的場景。
傳入控制元件ID適合於常見的大粒度控制,比如傳入表單欄位引數,表格分頁排序引數。
自定義回發引數提供了細粒度的控制,可以任意傳入靜態字串,或者經過JavaScript函式執行的返回值。
自定義回發不僅可以指定任何回發引數,還方便進行回發前的邏輯控制。
相關推薦
FineUIMvc隨筆(4)自定義回發引數與自定義回發
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 不能忘卻的回發 在上一篇文章中,我們對FineUIMvc中的回發進行了詳細描述,目的是為了告訴大家: 1. FineUIMvc中的回發其實是請求控制器方法的另一種表述而已 2. 回發是輕量級,只會傳入你允許傳入的引數 3. 回發
FineUIMvc隨筆(3)不能忘卻的回發(__doPostBack)
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 使用者反饋 有網友在官方論壇丟擲了這麼一個問題,似乎對 FineUIMvc 中的瀏覽器端與伺服器端的互動方式很有異議。 這裡面的關鍵詞就是:回發! 似乎一提到回發(__doPostBack),就讓人聯想到 Web
FineUIMvc隨筆(1)動態建立表格列
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 《FineUIMvc隨筆》目錄 ... 使用者需求 使用者希望實現動態建立表格列,在 WebForms 中,我們通過在 Page_Init 中建立列來實現: 但
FineUIMvc隨筆(7)擴充套件通知對話方塊(顯示多個不重疊)
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 這篇文章我們將改造 FineUIMvc 預設的通知對話方塊,使得同時顯示多個也不會重疊。並提前出一個公共的JS檔案,供大家使用。 FineUIMvc 的通知對話方塊 FineUIMvc預設的通知對話方塊通過 F.notify 來顯示
FineUIMvc隨筆(5)UIHelper是個什麼梗?
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 UIHelper.Result 在 FineUIMvc 的每一個 HttpPost 的控制器方法裡面,你都會看到 UIHelper.Result(): 這到底是個什麼梗?在 ASP.NET MVC 中並沒有 UIHelper
FineUIMvc隨筆(2)怎樣在控制元件中巢狀 HTML
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 使用者需求 有網友在《FineUI總群1》問這麼一個問題:怎麼把 HTML 巢狀在控制元件中? 這是很多剛學習 FineUIMvc 的網友經常問的問題,我想原因是對 WebForms 陷入太深,習慣了 FineUI 控制
FineUIMvc隨筆(6)對比WebForms和MVC中表格的資料庫分頁
宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 通過對比WebForms和MVC中表格資料庫分頁程式碼的不同,可以對 MVC 中的資料流轉有更加深入的瞭解。 WebForms 中表格的資料庫分頁 WebForms中的程式碼會比較直觀,我們從具體是示例入手: http://fin
我的第一個python web開發框架(4)——數據庫結構設計與創建
數據結構 描述 分析器 設置 一個 由於 logs 記錄 開發框架 小白做好前端html設計後,馬上開始進入數據庫結構設計步驟。 在開始之前,小白回憶了一下老大在公司裏培訓時講過的數據庫設計解說: 對於初學者來說,很多拿到原型時不知道怎麽設計數據表結
從零開始學習HTML+CSS(4)Flex佈局中的排列與換行
0.參考網址:https://www.runoob.com/w3cnote/flex-grammar.html 1.排列 預設值:橫向排列(從左邊開始排) div { display:flex;/*設定為flex佈局*/ flex-direction:row;/*這
Python資料分析與挖掘學習筆記(4)淘寶商品資料探索與清洗實戰
一、相關理論: 資料探索的核心: (1)資料質量分析(跟資料清洗密切聯絡) (2)資料特徵分析(分佈、對比、週期性、相關性、常見統計量等) 資料清洗的步驟: (1)缺失值處理(通過describe與len直接發現、通過0資料發現) (2)異常值處理(通過散點圖發現
.NET基礎拾遺(4)委託、事件、反射與特性
一、委託基礎 1.1 簡述委託的基本原理 委託這個概念對C++程式設計師來說並不陌生,因為它和C++中的函式指標非常類似,很多碼農也喜歡稱委託為安全的函式指標。無論這一說法是否正確,委託的的確確實現了和函式指標類似的功能,那就是提供了程式回撥指定方法的機制。 在委託內部,包含了一個指向某個方
痞子衡嵌入式:超級下載演算法(RT-UFL)開發筆記(4) - 輪詢Flash配置引數
---- 大家好,我是痞子衡,是正經搞技術的痞子。今天痞子衡給大家介紹的是**超級下載演算法開發筆記(4)之輪詢Flash配置引數**。 文接上篇 [《超級下載演算法(RT-UFL)開發筆記(3) - 統一FlexSPI驅動訪問》](https://www.cnblogs.com/henjay7
AngularJs學習筆記(4)——自定義指令
ref 告訴 ack 生命周期 .com bsp ctrl 參數變量 ng- 對指令的第一印象:它是一個自定義標簽! 先來看一個簡單的指令: <!doctype html> <html ng-app="myApp"> <head>
(4)自定義數據結構初探
lang 結構 十分 類型 是把 數據 庫類 結束 基本 從最基本的層面理解,數據結構是把一組相關的數據元素組織起來然後使用她們的策略和方法。 C++運行用戶以類的形式自定義數據類型,而庫類型是語言自身定義的,類在C++中十分重要!盡管sales_item很簡單,但要想給出
微信開發學習總結(四)——自定義選單(4)——自定義選單事件推送
一、自定義選單事件推送介面說明 使用者點選自定義選單後,微信會把點選事件推送給開發者,請注意,點選選單彈出子選單,不會產生上報。請注意,第3個到第8個的所有事件,僅支援微信iPhone5.4.1以上版本,和Android5.4以上版本的微信使用者,舊版本微信使用者點選後將沒有迴應,開
關於資料序列化(4)自定義序列化的實現,支援常用集合框架
下面的示例很好的揭示瞭如何實現自定義序列化的方法。 支援byte, byte[], boolean, boolean[], int, int[], long, long[] ,double ,double[], String, String[], 以及Enum, List,Map兩種包
隨筆(八) 自定義redis快取註解(基於springboot)
前言: 最近專案開發中需要使用redis快取為資料庫降壓。由於在構建系統時沒有使用快取,後期加入快取的時候不想對業務程式碼上新增,造成程式碼入侵,所有封裝了一套自定義快取類,處理快取。 開發環境: win10+Intelli
Shiro(4)預設鑑權與自定義鑑權
=========預設鑑權======== 過濾鏈中定義: <!-- 過濾鏈定義 --> <property name="filterChainDefinitions"> <value> ... /pages/U
從零寫分散式RPC框架 系列 2.0 (4)使用BeanPostProcessor實現自定義@RpcReference註解注入
之前服務提供方 RpcServer 我們是使用 ApplicationContextAware 來掃描 @RpcService 註解,新增一個註解即可實現服務暴露。現在,我們用 BeanPostProcessor 來實現服務注入,自動將服務實現類注入到被@RpcReference註解標記
自定義標籤(4)以頁面片段作為屬性的標籤
JSP2規範的自定義標籤還允許直接將一段“頁面片段”作為屬性,這種方式給自定義標籤提供了更大的靈活性。 下面的 程式定義了一個標籤處理類,改標籤處理類中定義了一個JspFragment型別的屬性,