ASP.NET.MVC的概念和其簡單使用
地址:
https://blog.csdn.net/weixin_44547598/article/details/89042089?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
簡介:
(1) ASP.NET 是一個開發框架,用於通過 HTML、CSS、JavaScript 以及服務器腳本來構建網頁和網站。
(2) ASP.NET 支持三種開放模式,MVC 是三個 ASP.NET 開發模型之一。
(3) MVC 是用於構建 web 應用程序的一種框架,使用 MVC (Model View Controller) 設計。
Model(模型)表示應用程序核心(比如數據庫記錄列表)
View(視圖)對數據(數據庫記錄)進行顯示
Controller(控制器)處理輸入(寫入數據庫記錄)
(4) MVC 模型通過三個邏輯層來定義 web 應用程序
business layer(業務層、模型邏輯)
display layer(顯示層、視圖邏輯)
input control(輸入控件、控制器邏輯)
(5) 模型(Model)
模型(Model)是應用程序中用於處理應用程序數據邏輯的部分。通常模型對象在數據庫中存取數據
(6) View(視圖)
View(視圖)是應用程序中處理數據顯示的部分。
通常從模型數據中創建視圖。
(7) 控制器
控制器是應用程序中處理用戶交互的部分
通常控制器從視圖讀取數據、控制用戶輸入,並向模型發送數據數據
- 簡單的使用
(1) 這裏呢先創建一個MVC的項目,這裏我用的工具是Visual Studio 2015 ,找到文件—新建—項目—找到ASP.NET.Web應用程序,然後選擇模板,因爲個人習慣,我就選擇空模板Empty,最後添加核心引用MVC,這樣一個MVC程序就創建好了
(2) 創建完後會默認出現Controllers、Models、Views
(3) 接下來開始創建控制器,選擇到Controllers文件夾,右鍵點擊選擇添加—控制器,選擇MVC 5控制器 ,開始命名(indexControl),<color=000FFF>注意不能將命名是自帶的Controller刪掉
(4) 創建完控制器後,可以在Controllers文件夾下面找到該控制器,接下來開始在Index中創建視圖,將鼠標光標選擇到Index右鍵點擊添加視圖,
添加視圖
將使用佈局分頁的勾選項去掉,就會出現該視圖
(5) 最後在Models中添加實體模型,選擇添加—新建項—數據—ADO.NET實體數據模型
以下爲個人操作過程:
只能連接到sqlserver 數據源數據庫?不能連接到oracle數據庫?
更換爲另外一種數據模型:
空EF設計器模型
先不做進一步設置
3. 開始對數據的增刪查改
(1)查詢
這裏我就用我以前的案例來講解一下簡單的增刪查改,這裏我就不講解頁面的搭建直接開始查增刪查改
這裏使用的插件有jquery、layui,先創建一個JQuery加載事件,加載layui模塊
https://www.songshizhao.com/blog/blogPage/372.html
asp.net網站項目中引入jquery
微軟對jquery進行了很好的支持。在asp.net網站項目中引用jquery非常簡單,不過最佳的方式是通過Nuget引入,因爲這樣再引入jquery同時引入了使用智能提示,下面介紹如何在VS中加入jquery。
首先在資源管理器中右鍵項目,選擇[管理NuGet程序包]
打開後在瀏覽中輸入jquery,選擇第一項,並點擊安裝。
安裝完成後jquery自動集成到了項目中(帶智能提示),位置如下:
對於文件簡單說明:第一項爲智能提示,第二項爲主角jquery,下面的min是壓縮版,用於正式發佈。
layui 加載
安裝報錯:
單獨下載一個layui
網址:https://www.layui.com/
添加完成
layui 示例
打開新下載的 layui控件文件夾,打開在線示例
後臺佈局
https://www.layui.com/demo/admin.html
後臺模板:
在線演示-單頁版演示
跳出提醒
移動版演示
進入之前的後臺佈局,查看代碼
複製演示裏的代碼到mvc裏的index.cshtml 文件
https://www.layui.com/doc/element/layout.html#admin
粘貼到 vs.mvc程序 index.cshtml文件中
運行樣式
修改了layui.css 的文件路徑
關於引入layui插件後layer is not defined問題
因爲沒有對 layui.js 正確引用
修改了layui.js的文件路徑
示例
顯示:
數據接口請求異常,原因未知
數據表格的數據接口
https://fly.layui.com/jie/27385/
按照上面的提問和回答,新增並編輯data.json文件
初步報錯問題解決,可正常顯示。
然後初始化layuiTable表格,這裏的title:操作項中我使用了自定義按鈕templet: setOperateSubject
通過url的路徑到控制器中來創建,這裏我用了幾個實體類和Lambda表達式來進行查詢,再用return 以Json的格式返回到頁面上去,這裏的myModels是實例化Models是創建的
最後在頁面上呈現的效果如下
以上作者的例子,個人暫時用一個json文檔代替
以下操作個人暫未實現,暫時告一段落,後期再單獨操作
增刪改查。
(2)增加
找到新增的那個按鈕,設置form表單中的action的路徑
到控制器寫saveSubjectInsert,這裏我直接將表作爲參數來進行新增,因爲是測試所以我不寫判斷部分的代碼了
(3)修改
點擊修改按鈕彈出修改模態框,這裏修改是根據要修改數據的ID來進行,所以我在function中寫了一個參數,這裏用到了一個js插件—customfunction來進行修改數據的查詢回填
接下來還是得到控制器去寫代碼,和新增一樣不寫判斷代碼了
(4)刪除
點擊刪除按鈕開始刪除,因爲刪除和修改一樣需要獲取到所刪數據的信息,所以這裏我還是傳了一個參數,並且在刪除後刷新表單,用post請求方法來請求控制器
控制器的代碼如下,接收post傳來的參數,用Linq來查詢出要刪除的數據,最後刪除