代码讲解
本篇篇幅过长，所以需要两到三篇博客详细讲述。
BaseController
实例化一个数据库操作的db，其它控制器继承BaseController就可以拥有这个对象
写了一个Data类，用来适配Layui的表格模块，直接返回Json格式的数据就可以直接使用Layui的表格模块了，一次书写，动态加载表格，很棒有木有。而且还可以分页查询啊~
还有就是一个枚举类型的局数，然后一个把局数转字符的方法
using System.Collections.Generic; using System.Web.Mvc; namespace MVCVolleyball.Controllers { public class BaseController : Controller { // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0 = /0 // ___/`---'\___ // .' | |// '. // / ||| : |||// // / _||||| -:- |||||- // | | - /// | | // | \_| ''---/'' |_/ | // .-\__ '-' ___/-. / // ___'. .' /--.-- `. .'___ // ."" '< `.___\_<|>_/___.' >' "". // | | : `- \`.;` _ /`;.`/ - ` : | | // `_. \_ __ /__ _/ .-` / / // =====`-.____`.___ \_____/___.-`___.-'===== // `=---=' // // // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // // 佛祖保佑 永无BUG // // // public VolleyballDB db = new VolleyballDB(); public static string IningsToString(int? innings) { string inningsString = ""; switch (innings) { case 1: inningsString = Innings.第一局.ToString(); break; case 2: inningsString = Innings.第二局.ToString(); break; case 3: inningsString = Innings.第三局.ToString(); break; case 4: inningsString = Innings.第四局.ToString(); break; case 5: inningsString = Innings.第五局.ToString(); break; } return inningsString; } } public class Data { public int code { get { return 0; } set { } } public string msg { get; set; } public long count { get; set; } public List<dynamic> data { get; set; } } public enum Innings { 第一局=1, 第二局=2, 第三局=3, 第四局=4, 第五局=5 } }
HomeController
首页直接显示大比分，用到了petapoco的分页查询
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 7 namespace MVCVolleyball.Controllers 8 { 9 public class HomeController : BaseController 10 { 11 public ActionResult Index() 12 { 13 return View(); 14 } 15 16 #region 首页显示总比分3：0、 3：1之类的 17 /// <summary> 18 /// 首页显示总比分3：0、 3：1之类的 19 /// </summary> 20 /// <param name="page"></param> 21 /// <param name="limit"></param> 22 /// <returns></returns> 23 public ActionResult Scores(long page, long limit) 24 { 25 PetaPoco.Page<CompetitionScore> list = CompetitionScore.Page(page, limit, "select * from CompetitionScore"); 26 Data data = new Data(); 27 data.count = list.TotalItems; 28 data.data = new List<dynamic>(); 29 foreach (var item in list.Items) 30 { 31 string homeTeamName = Team.FirstOrDefault("where Id=" + item.HomeTeamId + "").TeamName; 32 string guestTeamName = Team.FirstOrDefault("where Id=" + item.GuestTeamId + "").TeamName; 33 string theScore = item.HomeTeamScore.ToString() + "：" + item.GuestTeamScore.ToString(); 34 data.data.Add(new { HomeTeanName = homeTeamName, GuestTeamName = guestTeamName, Id = item.Id, TheScore = theScore }); 35 } 36 return Json(data, JsonRequestBehavior.AllowGet); 37 } 38 #endregion 39 } 40 }
HomeController对应的视图
只有一个Index
关于Layui的表格模块可以戳这里：Layui动态表格
1 @{ 2 ViewBag.Title = "首页"; 3 } 4 <table id="table" style="margin:0 auto"></table> 5 <script> 6 layui.use('table', function () { 7 var table = layui.table; 8 table.render({ 9 elem: '#table' 10 , url: '/Home/Scores/' 11 , limits: [10, 20, 30, 40, 50] 12 , limit: 20 //默认采用60 13 , page: true 14 , cols: [[ //标题栏 15 16 { field: 'HomeTeanName', title: '主队', align: 'center', 296 } 17 , { field: 'TheScore', title: '比分', align: 'center', 296 } 18 , { field: 'GuestTeamName', title: '客队', align: 'center', 296 } 19 , { fixed: 'right', 307, align: 'center', title: '操作', toolbar: '#barDemo' } 20 ]] 21 }); 22 }); 23 </script> 24 <script type="text/html" id="barDemo"> 25 <a class="layui-btn layui-btn-mini" href="/DetailScore/DetailScoreList/{{d.Id}}">查看</a> 26 </script>
DetailScoreController
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCVolleyball.Controllers 9 { 10 public class DetailScoreController : BaseController 11 { 12 #region 获取详细比分 13 /// <summary> 14 /// 获取详细比分 15 /// </summary> 16 /// <param name="Id"></param> 17 /// <returns></returns> 18 [HttpGet] 19 public ActionResult DetailScoreList(int Id) 20 { 21 List<TotalScore> list = TotalScore.Fetch("where CompetitionId=@0", Id); 22 ViewBag.Id = Id; 23 ViewBag.HomeTeamName = Team.FirstOrDefault("where Id=" + list[0].HomeTeamId + "").TeamName; 24 ViewBag.GuestTeamName = Team.FirstOrDefault("where Id=" + list[0].GuestTeamId + "").TeamName; 25 return View(list); 26 } 27 [HttpPost] 28 public ActionResult DetailScoreList(int Id, long page, long limit, int inningsNum = 1) 29 { 30 PetaPoco.Page<DetailScore> list = DetailScore.Page(page, limit, "where CompetitionId=@0 and Innings=@1", Id, inningsNum); 31 Data data = new Data(); 32 data.count = list.TotalItems; 33 data.data = new List<dynamic>(); 34 foreach (var item in list.Items) 35 { 36 string homeTeamName = Team.FirstOrDefault("where Id=" + item.HomeTeamId + "").TeamName; 37 string guestTeamName = Team.FirstOrDefault("where Id=" + item.GuestTeamId + "").TeamName; 38 string homeTeamMemberName = ""; 39 string guestTeamMemberName = ""; 40 if (item.HomeTeamMemberId > 0) 41 { 42 homeTeamMemberName = TeamMember.FirstOrDefault("where Id= " + item.HomeTeamMemberId + "").MembersName; 43 } 44 if (item.GuestTeamMemberId > 0) 45 { 46 guestTeamMemberName = TeamMember.FirstOrDefault("where Id= " + item.GuestTeamMemberId + "").MembersName; 47 } 48 49 string innings = IningsToString(item.Innings); 50 data.data.Add(new 51 { 52 Id = item.CompetitionId, 53 HomeTeamName = homeTeamName, 54 GuestTeamName = guestTeamName, 55 HomeTeamMemberName = homeTeamMemberName, 56 GuestTeamMemberName = guestTeamMemberName, 57 HomeTeamDetail = item.HomeTeamDetail, 58 GuestTeamDetail = item.GuestTeamDetail, 59 GuestTeamDetailScore = item.GuestTeamDetailScore, 60 HomeTeamDetailScore = item.HomeTeamDetailScore 61 }); 62 } 63 return Json(data); 64 } 65 #endregion 66 } 67 }
DetailScoreController的视图
只有一个DetailScoreList
1 @model List<TotalScore> 2 @{ 3 ViewBag.Title = "详细比分列表"; 4 } 5 6 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> 7 <ul class="layui-tab-title"> 8 @{ 9 foreach (var item in Model) 10 { 11 if (item.Innings == 1) 12 { 13 @Html.Raw("<li lay-id='1'>第一局</li>"); 14 } 15 else if (item.Innings == 2) 16 { 17 @Html.Raw("<li lay-id='2'>第二局</li>"); 18 } 19 else if (item.Innings == 3) 20 { 21 @Html.Raw("<li lay-id='3'>第三局</li>"); 22 } 23 else if (item.Innings == 4) 24 { 25 @Html.Raw("<li lay-id='4'>第四局</li>"); 26 } 27 else if (item.Innings == 5) 28 { 29 @Html.Raw("<li lay-id='5'>第五局</li>"); 30 } 31 } 32 33 } 34 </ul> 35 <div class="layui-tab-content"> 36 37 @{ 38 string homeTeam = ViewBag.HomeTeamName; 39 string guestTeam = ViewBag.GuestTeamName; 40 string result = ""; 41 foreach (var item in Model) 42 { 43 if (item.Innings == 1) 44 { 45 result = homeTeam + item.HomeTeamScore + ":" + item.GuestTeamScore + guestTeam; 46 @Html.Raw("<div class='layui-tab-item layui-show '> <p style='text - align:center;margin-left:40%;color:#393D49;font-size:24px;'>" + result + "</p></div>"); 47 } 48 else if (item.Innings == 2) 49 { 50 51 result = homeTeam + item.HomeTeamScore + ":" + item.GuestTeamScore + guestTeam; 52 @Html.Raw(" <div class='layui-tab-item'><p style='text - align:center;margin-left:40%;color:#393D49;font-size:24px;'>" + result + "</p></div>"); 53 } 54 else if (item.Innings == 3) 55 { 56 57 result = homeTeam + item.HomeTeamScore + ":" + item.GuestTeamScore + guestTeam; 58 @Html.Raw("<div class='layui-tab-item'><p style='text - align:center;margin-left:40%;color:#393D49;font-size:24px;'>" + result + "</p></div>"); 59 } 60 else if (item.Innings == 4) 61 { 62 result = ViewBag.HomeTeamName + item.HomeTeamScore + ":" + item.GuestTeamScore + ViewBag.GuestTeamName; 63 @Html.Raw("<div class='layui-tab-item'><p style='text - align:center;margin-left:40%;color:#393D49;font-size:24px;'>" + result + "</p></div>"); 64 } 65 else if (item.Innings == 5) 66 { 67 result = homeTeam + item.HomeTeamScore + ":" + item.GuestTeamScore + guestTeam; 68 @Html.Raw("<div class='layui-tab-item'><p style='text - align:center;margin-left:40%;color:#393D49;font-size:24px;'>" + result + "</p></div>"); 69 } 70 } 71 72 } 73 @if (Model.Count > 0) 74 { 75 <table id="score" style="margin:0 auto;"></table> 76 } 77 </div> 78 </div> 79 <script> 80 layui.use(['element', 'layer','table'], function () { 81 var element = layui.element 82 , layer = layui.layer, table = layui.table; 83 table.render({ 84 elem: '#score' 85 , url: '/DetailScore/DetailScoreList/' 86 , where: { Id: '@ViewBag.Id' } 87 , method: 'post' 88 , limits: [10, 20, 30, 40, 50] 89 , limit: 30 //默认采用60 90 , page: true 91 , cols: [[ //标题栏 92 93 { field: 'HomeTeamName', title: '主队', align: 'center', 145 } 94 , { field: 'HomeTeamMemberName', title: '主队得分选手', align: 'center', 145 } 95 , { field: 'GuestTeamDetail', title: '主队得分详情', align: 'center', 145 } 96 , { field: 'HomeTeamDetailScore', title: '主队得分', align: 'center', 145 } 97 , { field: 'GuestTeamDetailScore', title: '客队得分', align: 'center', 145 } 98 , { field: 'GuestTeamDetail', title: '客队得分详情', align: 'center', 145 } 99 , { field: 'GuestTeamMemberName', title: '客队得分队员', align: 'center', 145 } 100 , { field: 'GuestTeamName', title: '客队', align: 'center', 145 } 101 //rowspan即纵向跨越的单元格数 102 ]] 103 }); 104 element.on('tab(docDemoTabBrief)', function (data) { 105 //layer.msg('切到到了' + data.index + '：' + this.innerHTML); 106 table.render({ 107 elem: '#score' 108 , url: '/DetailScore/DetailScoreList/' 109 , where: { Id: '@ViewBag.Id', inningsNum: data.index + 1 } 110 , method: 'post' 111 , limits: [10, 20, 30, 40, 50] 112 , limit: 30 //默认采用60 113 , page: true 114 , cols: [[ //标题栏 115 116 { field: 'HomeTeamName', title: '主队', align: 'center', 145 } 117 , { field: 'HomeTeamMemberName', title: '主队得分选手', align: 'center', 145 } 118 , { field: 'GuestTeamDetail', title: '主队得分详情', align: 'center', 145 } 119 , { field: 'HomeTeamDetailScore', title: '主队得分', align: 'center', 145 } 120 , { field: 'GuestTeamDetailScore', title: '客队得分', align: 'center', 145 } 121 , { field: 'GuestTeamDetail', title: '客队得分详情', align: 'center', 145 } 122 , { field: 'GuestTeamMemberName', title: '客队得分队员', align: 'center', 145 } 123 , { field: 'GuestTeamName', title: '客队', align: 'center', 145 } 124 125 ]] 126 }); 127 128 }); 129 }); 130 131 132 133 </script>