使用Visual Studio新建一个控制器和视图,在控制器里获取数据库表的数据
使用工具 :Visual Studio 2015? ?,? SQL server
? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ?? ??
1.在使用 Visual Studio 之前,我先帶著大家了解如何使用 Visual Studio 來創建一個視圖。
(1)當我們打開 Visual Studio 2015后 ,在首頁點擊新建項目
(2)這時會有個彈窗,我們選擇Empty,勾選MVC 后點擊確定
(3)點擊確定后進行首頁 ,我們在右邊找到 ”解決方案資源管理器“ ,如果沒有就在單擊視圖,點擊解決方案資源管理器
(4)點擊解決方案資源管理器后,我們在Controllers里添加一個控制器?
注 :Controllers文件夾是用來放置控制器的文件夾
(5)選擇 ” MVC S 控制器 - 空 “? ?,點擊添加?
修改名稱
(6)選中 Index() ,點擊鼠標右鍵添加視圖
使用布局頁不用的打?,點擊添加,一個視圖就添加成功了。
成功添加視圖后,我們就來進行下一步了。
2.在 Visual Studio?里獲取SQL里面的數據 。
? ? ??
?? 打開 Visual Studio 2015 后找到? Models(Modees :數據庫里面的表會映射到這給文件夾里面來。)
(1)Models ———》添加 ———》 新建項
(2)點擊 數據 ———》ADO.NET實體數據模型
(3)點擊 來自數據庫的 EF 設計器——》確定
(4)點擊新建連接 ——》填寫服務器名稱 ——》登錄———》 選擇數據庫名稱——》確定
(5)獲取成功
? ? ? ? ?
3.在視圖里建一個表格,放置數據
第一種方法:
(1)添加一個實例化,實體模型
public class LinqSelectController : Controller{// GET: LinqSelect//實例化 實體模型Models.TestDBEntities myModel = new Models.TestDBEntities();public ActionResult Index(){return View();}實例化 :在面向對象的編程中,通常把用類創建對象的過程稱為實例化。
? ? ? ? ? ? ? ?類名 對象名 = new 類名(參數1,參數2...參數n);
? ? ? ? ? ? ? 如 Date date=new Date();就是用日期類創建了一個日期的對象,就叫對象的實例化。
? ? ? ? ? ? ? 多數語言中,實例化一個對象 就是為對象開辟內存空間,或者是不用聲明,直接使用
? ? ? ? ? ? ? new 構造函數名(),建立一個臨時對象。
? ?
(2)查詢表格數據
/// <summary>/// 查詢表格數據/// </summary>/// <returns></returns>public ActionResult SelectStudent(){var student = from tbStudent in myModel.SYS_Studentselect tbStudent;return Json(student, JsonRequestBehavior.AllowGet);}(3)在index視圖里搭建一個表格樣式
? ? HTML部分
<div class="container"><table id="tbStudent" class="table table-bordered mt-5"><thead><tr><th>序號</th><th>姓名</th><th>性別</th><th>身份證號碼</th><th>電話號碼</th><th>地址</th></tr></thead><tbody></tbody></table></div>? ? JS部分
$(document).ready(function () {$.get("/LinqSelect/SelectStudent", function (jsonData) {console.log(jsonData);var str = "";for (var i = 0; i < jsonData.length; i++) {str += '<tr><td>' + (i + 1) +'</td><td>' + jsonData[i].StudentName +'</td><td>' + jsonData[i].StudentSex +'</td><td>' + jsonData[i].StudentIDNum +'</td><td>' + jsonData[i].StudentTelphome +'</td><td>' + jsonData[i].StudentAddress + '</td></tr>';console.log(jsonData[i])$("#tbStudent tbody").append(str);}})})注 :布局使用了Bootstrap框架。
結果:
第二種方法:
使用 layui 框架編寫表單。
Html 代碼?
?
<div class="card-body p-0"><table id="tabEntrust" lay-filter="tabEntrust"></table></div>注:使用layui框架需要引入layui文件。
js部分:
? ??
<script src="~/Plugins/jquery-3.2.1.min.js"></script><script src="~/Plugins/layui/layui.js"></script><script>var TabStudent;//layui的表格var blInsert = true;//是否是新增操作var layer, layuiTable;//保存layui模塊以便全局使用$(document).ready(function () {//1.2加載和初始化layui模塊layui.use(['layer', 'table'], function () {//layui.use()加載所需模塊layer = layui.layer, layuiTable = layui.table;TabStudent = layuiTable.render({elem: "#tabEntrust",//table的ID HTML元素的IDurl: "/MaintenanceBusiness/Proscenium/SelectEntrustedOrder",//數據接口 方法的路徑data: [],cols: [[{ type: 'radio' },{ title: '序號', type: 'numbers' },{ title: '商品ID', field: 'CommodityID', hide: true },{ title: '車牌號', field: 'Plate', align: 'center' },{ title: '客戶名', field: 'CarOwnerName', align: 'center' },{ title: '維修狀態', field: 'MaintenanceStateName', align: 'center' },{ title: '應收金額', field: 'AmountTo', align: 'center' },{ title: '優惠', field: 'JobDistributionDiscount', align: 'center' },{ title: '劃卡金額', field: 'HasReceivedCreditCard', align: 'center' },{ title: '結算方式', field: 'payType', align: 'center' },{ title: '待收金額', field: 'ArrearsMoney', align: 'center' },{ title: '營銷訂單號', field: 'EntrusNumber', align: 'center' },{ title: '備注', field: 'Remarks', align: 'center' },{ title: '結算狀態', field: 'BalanceType', align: 'center' },{ title: '操作', templet: setOperate, align: 'center', width: "12%" }]],page: {limit: 10,//指定每頁顯示的條數limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每頁條數的選擇項}, //開啟分頁//id: "tabStudents"//設定容器唯一 id。id 是對表格的數據操作方法上是必要的傳遞條件,它是表格容器的索引})//==監聽行單擊事件(單擊事件為:rowDouble)layuiTable.on('row(tabEntrust)', function (obj) {var data = obj.data;獲取點擊行數據//標注選中樣式obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');//***單擊選中單選框obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();console.log(obj);});//自定義列function setOperate(rowData) {var CommodityId = rowData.CommodityID;var btn = "";btn += '<button class="layui-btn layui-btn-xs" onclick="searchDetail(' + CommodityId + ')">詳情</button>';btn += '<button class="layui-btn layui-btn-xs layui-btn-warm" onclick="headForUpdate(' + CommodityId + ')">修改</button>';btn += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="saveImport(' + CommodityId + ')">刪除</button>';return btn;}});})樣式:
?
總結
以上是生活随笔為你收集整理的使用Visual Studio新建一个控制器和视图,在控制器里获取数据库表的数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 社保,你不能做的N件事
- 下一篇: linux cmake编译源码,linu