ASP.NET.MVC的概念和其簡單使用

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. 簡單的使用
    (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來查詢出要刪除的數據,最後刪除
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章