天天看點

C# .NETCORE3.1 系列教程(三) 控制器中控制頁面彈出提示框功能實作(ViewComponent實作)

視圖頁展示

C# .NETCORE3.1 系列教程(三) 控制器中控制頁面彈出提示框功能實作(ViewComponent實作)

controller的action調用方法

C# .NETCORE3.1 系列教程(三) 控制器中控制頁面彈出提示框功能實作(ViewComponent實作)

了解viewcomponent

viewcomponent,簡稱視圖元件,你可以在任何可重複使用的渲染邏輯的部分視圖中用視圖元件來替換,那麼就能夠實作在一個view中嵌入一些相同或類似的内容(相當于能在他的父視圖的對應位置插入相應的html代碼)。當然,.net也有提供一個partial views可以實作,或者使用childconrtoller,但是,partial views并不能另外寫一個控制器進行資料的特殊處理,而childconrtoller的開銷則比較大,效率更低,因為需要走完整個controller的過程。viewcomponent提供了一個獨立的控制器,可以讓你在服務端中對資料進行查詢、計算和控制。

因為網上沒有比較直覺的定義,是以這個定義是我的個人了解。

比如一個網頁,每一頁的頂部和導航欄可能是相同或類似的,每個頁面去寫比較麻煩,而且如果需要修改,你需要在非常多頁裡面進行修改,這樣做的方式并不友好,是以,此時你就考慮寫一個視圖元件,修改時隻要修改這個元件,其他頁在相應位置嵌入這個元件即可。

我們的這個彈窗也可以看作一個元件,在每個頁面底部都嵌入這個元件,當發現傳入的msg有内容時,就可以彈窗一個彈窗(如用js的alert函數,或者如果你有引入其他前端架構你可以寫成其他的方式),否則這個元件不會做任何操作。

建立viewcomponent控制器

我們需要先在項目中建立一個名為“viewcomponents”的目錄,按照約定,所有自定義視圖元件的控制器類預設情況下都存放在這個目錄下。

我們在這個目錄下建立一個名為“messagebox”的視圖元件控制器,我們建立一個類,名為messageboxviewcomponent(按約定,視圖元件的控制器類都元件名稱+“viewcomponent”命名)

messageboxviewcomponent 繼承microsoft.aspnetcore.mvc.viewcomponent類 ,代碼如下:

先添加引用

然後繼承,如果需要依賴注入請按上一章節的方式注冊服務和注入

接下來需要在控制器類中添加一個invokeasync函數,傳回類型為iviewcomponentresult(task),該函數異步執行,可以自定義接收參數,我們可以在視圖中為他傳參

messageboxvo類是彈窗元件的配置選項類,代碼如下:

建立viewcomponent視圖

前文已經說了,元件的視圖主要是一段控制彈窗的js。按照約定,我們可以在項目視圖目錄(views目錄)下,建立一個名為“components”的目錄存放視圖元件的視圖,也可以在views/shared下(跟 _layout一個目錄,我習慣放在這個目錄下)建立一個名為“components”的目錄存放視圖元件的視圖。

components目錄中需要按照元件的名稱建立檔案夾,目錄結構如下:

C# .NETCORE3.1 系列教程(三) 控制器中控制頁面彈出提示框功能實作(ViewComponent實作)

我們的彈窗元件名稱為“messagebox”,是以需要在components目錄下再建立一個“messagebox”目錄。

我們的控制器中沒有指定傳回哪個視圖,是以我們可以建立一個預設視圖“default.cshtml”。

該視圖綁定的model類型為messageboxvo

具體代碼如下

視圖元件的引入方式是視圖需要引入的地方使用component.invokeasync方法引入,最終這個地方将會被元件的html替換

component.invokeasync方法的定義如下:

我們在可以在視圖模闆中統一引入元件,這樣每個頁面都會在最底部自動引入messagebox元件

打開_layout.cshtml,在body的最後用component.invokeasync方法引入元件,

調用代碼:

我們看其中這段代碼

父頁面的控制器将參數傳入給元件我們采用的是viewbag,如果需要彈出視窗,就在viewbag建立一個名為“systemmessageboxinfo”的鍵,并将彈窗配置對象指派給他即可

_layout.cshtml頁全部代碼:

在controller中控制頁面彈出一個彈窗

在上一章中,我們建立控制器時有介紹控制器都是繼承microsoft.aspnetcore.mvc.controller類,我們可以寫一個自定義的控制器基類,繼承microsoft.aspnetcore.mvc.controller類,并定義一個函數,取名為“messageboxview”。這個函數最終傳回一個實作iactionresult的執行個體,并實作彈窗傳值。

直接看控制器基類代碼:

當浏覽職員清單頁未指定部門時,提示”您沒有權限檢視全部職員,請按部門查找“,并跳轉到部門清單頁

我們需要彈窗的控制器類(employeecontroller)需要先繼承自定義的基類(webbasecontroller)

修改控制器中index的action,判斷是否有deptid傳值(并判斷是否合規),如果沒有(或不合規)就提示

部門添加成功後需要彈窗提示添加成功,點确定後跳轉到部門清單頁

我們需要彈窗的控制器類需要先繼承自定義的基類

修改該控制器下名為“add"的action

此時就能夠實作在控制器中控制頁面彈出提示框并在點選确定後跳轉。

總結與思考

如此我們就完成了控制器中控制頁面彈出提示框功能實作。

思考:

現在這種方式使用者可以看到頁面的内容,才會展示提示框,如果我不想讓使用者看到頁面内容,直接彈出提示和跳轉,要怎麼做?

思考答案:

繼續閱讀