MVC个人练习

原创 Laughing  2017-08-06 11:50  阅读 54 次 评论 0 条

闲着无聊,在家学习MVC,这篇练习使用了最简单的Entity Frameworkbootstrap-tablebootstrap等内容

使用的nuget

所有代码,自己看吧,累

_Layout.cshtml

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>@ViewBag.Title</title>  
  5.     <!--公共css-->  
  6.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    <link href="~/Content/bootstrap-table.css" rel="stylesheet">  
  7.     <link href="~/Content/bootstrap-theme.css" rel="stylesheet">  
  8.     <link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet">  
  9.     <link href="~/css/font-awesome.css" rel="stylesheet">  
  10.     <link href="~/Content/jquery.confirm.css" rel="stylesheet">  
  11.     <!--公共JS-->  
  12.     <script src="~/Scripts/jquery.min.js" type="text/javascript"></script>  
  13.     <script src="~/Scripts/bootstrap.js" type="text/javascript"></script>  
  14.     <script src="~/Scripts/bootstrap-table.js" type="text/javascript"></script>  
  15.     <script src="~/Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>  
  16.     <script src="~/Scripts/bootstrap-datepicker.js" type="text/javascript"></script>  
  17.     <script src="~/Scripts/Public.js" type="text/javascript"></script>  
  18.     <script src="~/Scripts/jquery.confirm.js" type="text/javascript"></script>  
  19.     <meta charset="utf-8">  
  20.     @RenderSection("JavaScript",false)  
  21.     @RenderSection("StyleCSS",false)  
  22. </head>  
  23. <body style="width: 100%;height:100%">  
  24.         @RenderBody()  
  25. </body>  
  26. </html>  

Index.js

  1.  $(function(){  
  2.         var table = $("#tb_AllBudget");  
  3.         table.bootstrapTable({  
  4.                 url: '/Home/GetAllBudget',         //请求后台的URL(*)  
  5.                 method: 'get',                      //请求方式(*)  
  6.                 striped: true,                      //是否显示行间隔色  
  7.                 toolbar:"#toolbar",  
  8.                 cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)  
  9.                 pagination: true,                   //是否显示分页(*)  
  10.                 sortable: false,                     //是否启用排序  
  11.                 sortOrder: "asc",                   //排序方式  
  12.                 sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)  
  13.                 pageNumber:1,                       //初始化加载第一页,默认第一页  
  14.                 pageSize: 10,                       //每页的记录行数(*)  
  15.                 pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)  
  16.                 search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大  
  17.                 strictSearch: true,  
  18.                 showColumns: true,                  //是否显示所有的列  
  19.                 showRefresh: true,                  //是否显示刷新按钮  
  20.                 minimumCountColumns: 2,             //最少允许的列数  
  21.                 clickToSelect: true,                //是否启用点击选中行  
  22.                 //height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度  
  23.                 uniqueId: "CID",                     //每一行的唯一标识,一般为主键列  
  24.                 showToggle:true,                    //是否显示详细视图和列表视图的切换按钮  
  25.                 cardView: false,                    //是否显示详细视图  
  26.                 detailView: false,                   //是否显示父子表  
  27.                 queryParams : function (params) {  
  28.                     //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的  
  29.                     var temp = {     
  30.                         limit: params.limit,                         //页面大小  
  31.                         offset: params.offset,   //页码  
  32.                         sort: params.sort,      //排序列名    
  33.                         sortOrder: params.order //排位命令(desc,asc)   
  34.                     };  
  35.                     return temp;  
  36.                 },  
  37.                 columns: [{  
  38.                     checkbox: true  
  39.                 },  
  40.                 {  
  41.                     field: 'SAPHRComCode',  
  42.                     title: '公司编号',  
  43.                     formatter:linkFormatter  
  44.                 }, {  
  45.                     field: 'SAPHRComName',  
  46.                     title: '公司名称'  
  47.                 }, {  
  48.                     field: 'SAPHRDptCode',  
  49.                     title: '部门编号'  
  50.                 }, {  
  51.                     field: 'SAPHRDptName',  
  52.                     title: '部门名称'  
  53.                 },  
  54.                 {  
  55.                     field:'CID',  
  56.                     title:'操作',  
  57.                     formatter:actionFormatter,  
  58.                     width:120  
  59.                 }],  
  60.                 onDblClickRow:function(row,$element){  
  61.                 alert(row.SAPHRComCode)  
  62.                 }        
  63.            });  
  64.         //新增  
  65.      $("#btn_add").click(function () {  
  66.           
  67.      });  
  68.        
  69.      //查看  
  70.      $("#btn_view").click(function () {  
  71.          var selectedRows = $("#tb_AllBudget").bootstrapTable("getSelections");  
  72.          if(selectedRows.length>1){  
  73.              alert('请选中一行进行查看呢');  
  74.              return;  
  75.          }  
  76.          var id = selectedRows[0].CID;  
  77.          var href="/home/ViewDetails/"+id+"?action=view";  
  78.          window.open(href,"toolbar=no,location=no");  
  79.      });  
  80.        
  81.         //编辑  
  82.      $("#btn_edit").click(function () {  
  83.          var selectedRows = $("#tb_AllBudget").bootstrapTable("getSelections");  
  84.          if(selectedRows.length>1){  
  85.              alert('请选中一行进行查看呢');  
  86.              return;  
  87.          }  
  88.          var id = selectedRows[0].CID;  
  89.          var href="/home/ViewDetails/"+id+"?action=edit";  
  90.          window.open(href,"toolbar=no,location=no");  
  91.      });  
  92.         //删除  
  93.         $("#btn_delete").click(function () {  
  94.             alert(11111111);  
  95.         });  
  96.  });    
  97.   
  98. function actionFormatter(value,row,index){  
  99.     var id = value;  
  100.     var result = "";  
  101.     result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";  
  102.     result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";  
  103.     result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";  
  104.     return result;  
  105. }    
  106.   
  107. //查看按钮  
  108. function linkFormatter(value,row,index){  
  109.    return "<a href='javascript:'>"+value+"</a>";  
  110. }  
  111.   
  112. //查看编辑  
  113. function EditViewById(id) {  
  114.     var href="/home/ViewDetails/"+id+"?action=view";  
  115.     window.open(href,"toolbar=no,location=no")  
  116. }  
  117.   
  118. //删除  
  119. function DeleteByIds(id) {  
  120.       
  121. }  

Index.cshtml

  1. @using MVCDemo.Domain;  
  2. @using MVCDemo.DAL;  
  3. @using System.Collections.Generic;  
  4. @using System.Linq;  
  5. @model IList<BD_AllBudget>  
  6.   
  7. @section Javascript{  
  8.    <script src="~/Scripts/ViewJS/Index.js"></script>  
  9. }  
  10.   
  11. @section StyleCSS{  
  12.     <style>  
  13.         tr {  
  14.             height: 29px;   
  15.         }  
  16.     </style>  
  17. }  
  18.   
  19. <div style="width: 100%;height:100%">     
  20.     <div id="toolbar" class="btn-group">  
  21.         <button id="btn_add" type="button" class="btn btn-default">  
  22.             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增  
  23.         </button>  
  24.         <button id="btn_view" type="button" class="btn btn-default">  
  25.             <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>查看  
  26.         </button>  
  27.         <button id="btn_edit" type="button" class="btn btn-default">  
  28.             <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改  
  29.         </button>  
  30.         <button id="btn_delete" type="button" class="btn btn-default">  
  31.             <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除  
  32.         </button>  
  33.     </div>  
  34.     <table id="tb_AllBudget" style="width: 100%;height:100%"></table>  
  35. </div>  

ViewDetails.cshtml

  1. @model MVCDemo.Domain.BD_AllBudget  
  2. @section JavaScript{  
  3.     <script>  
  4.         $(function() {  
  5.             var action = getUrlParam('action');  
  6.             $("#SAPHRComCode").val("@Model.SAPHRComCode");  
  7.             $("#SAPHRComName").val('@Model.SAPHRComName');  
  8.             $("#SAPHRDptCode").val('@Model.SAPHRDptCode');  
  9.             $("#SAPHRDptName").val('@Model.SAPHRDptName');  
  10.             $("#BudgetSubject").val('@Model.BudgetSubject');  
  11.             $("#BudgetName").val('@Model.BudgetName');  
  12.             $("#BudgetNum").val('@Model.BudgetNum');  
  13.             $("#RemainBudget").val('@Model.RemainBudget');  
  14.             if (action == 'view') {  
  15.                 $("input").attr('readonly','readonly');  
  16.             }  
  17.             //取消  
  18.             $("#btnCancel").click(function() {  
  19.                 window.close();  
  20.             });  
  21.   
  22.             //提交  
  23.             $("#btnSubmit").click(function() {  
  24.   
  25.             });  
  26.         });  
  27.     </script>  
  28. }  
  29. <div class="panel-info">  
  30.     <div class="container" style="border: solid 1px">  
  31.         <div class="row" style="align-content: center; align: center;">  
  32.             <div class="col-xs-2"><label class="control-label">公司编号</label></div>  
  33.             <div class="col-xs-4"><input type="text" class="form-control" id="SAPHRComCode"/></div>  
  34.             <div class="col-xs-2"><label class="control-label">公司名称</label></div>  
  35.             <div class="col-xs-4"><input type="text" class="form-control" id="SAPHRComName"/></div>  
  36.         </div>  
  37.         <div class="row" style="align-content: center; align: center;">  
  38.             <div class="col-xs-2"><label class="control-label">部门编号</label></div>  
  39.             <div class="col-xs-4"><input type="text" class="form-control" id="SAPHRDptCode"/></div>  
  40.             <div class="col-xs-2"><label class="control-label">部门名称</label></div>  
  41.             <div class="col-xs-4"><input type="text" class="form-control" id="SAPHRDptName"/></div>  
  42.         </div>  
  43.         <div class="row" style="align-content: center; align: center;">  
  44.             <div class="col-xs-2"><label class="control-label">科目编号</label></div>  
  45.             <div class="col-xs-4"><input type="text" class="form-control" id="BudgetSubject"/></div>  
  46.             <div class="col-xs-2"><label class="control-label">科目名称</label></div>  
  47.             <div class="col-xs-4"><input type="text" class="form-control" id="BudgetName"/></div>  
  48.         </div>  
  49.         <div class="row" style="align-content: center; align: center;">  
  50.             <div class="col-xs-2"><label class="control-label">预算金额</label></div>  
  51.             <div class="col-xs-4"><input type="text" class="form-control" id="BudgetNum"/></div>  
  52.             <div class="col-xs-2"><label class="control-label">剩余预算</label></div>  
  53.             <div class="col-xs-4"><input type="text" class="form-control" id="RemainBudget"/></div>  
  54.         </div>  
  55.         <div class="row" style="text-align: center;">  
  56.             <button type="button" class="btn btn-success" id="btnSubmit">提交</button>  
  57.             <button type="button" class="btn btn-danger" id="btnCancel">关闭</button>  
  58.         </div>  
  59.     </div>  
  60. </div>  

HomeController.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MVCDemo.Domain;  
  7. using MVCDemo.DAL;  
  8.   
  9. namespace MVCDemo.WebUI.Controllers  
  10. {  
  11.     public class HomeController : Controller  
  12.     {  
  13.         public ActionResult Index()  
  14.         {  
  15.             var items = BD_AllBudgetDbContext.DbContext.BD_AllBudget.ToList<BD_AllBudget>();  
  16.             return View (items);  
  17.         }  
  18.   
  19.         public JsonResult GetAllBudget(int limit, int offset, string companyCode, string companyName){  
  20.             var lstRes = BD_AllBudgetDbContext.DbContext.BD_AllBudget.ToList<BD_AllBudget>();  
  21.             var total = lstRes.Count;  
  22.             var rows = lstRes.Skip(offset).Take(limit).ToList();  
  23.             return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);  
  24.         }  
  25.   
  26.         public ActionResult ViewDetails(string id)  
  27.         {  
  28.             var item = BD_AllBudgetDbContext.DbContext.BD_AllBudget.FirstOrDefault(e => e.CID == id);  
  29.             if (Request.QueryString["action"].ToString().Trim().ToLower()=="view")  
  30.             {  
  31.                 ViewBag.Title = "查看-" + item.BudgetName;  
  32.             }  
  33.             else  
  34.             {  
  35.                 ViewBag.Title = "编辑-" + item.BudgetName;  
  36.             }  
  37.             return View(item);  
  38.         }  
  39.     }  
  40. }  
本文地址:https://www.lisen.me/mvc-personal-practice.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情