.net Dapper 实践系列(3) ---数据显示(Layui+Ajax+Dapper+MySQL)

mac2022-06-30  78

目录

写在前面产生问题解决方案

写在前面


上一小节,我们使用Dapper 里事务实现了一对多关系的添加。这一小节,主要记录如何使用Dapper 实现多表的查询显示。

产生问题


在mvc控制器中查询显示以JsonResult 返回 Json格式给前台时。无可避免的日期格式不是我们想要的日期格式。而是类似于这样的/Date(1565664248000)/日期格式。

解决方案


方案1 可以使用Newtonsoft.Json 里IsoDateTimeConverter 类格式化ISO格式的日期 //使用IsoDateTimeConverter 类必须引用一下两个方法 using Newtonsoft.Json; using Newtonsoft.Json.Linq; public string Load(){ //此处省略获取数据方法 //最后返回sring IsoDateTimeConverter timeFormat = new IsoDateTimeConverter(); timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss"; return JsonConvert.SerializeObject(result, Formatting.Indented, timeFormat); }

其中 result 就是返回给前台的字符串。不过,需要注意的是使用方法1时,前台必须转成Json对象。

方案2 仍然使用的是JsonResult 的方法返回Json。不过,我们需要拓展JsonResult类。在DbOption文件夹中,创建my.JsonMvc类。 namespace my.JsonMvc { public static class MvcExtendsion { public static JsonResult MyJson(object data, JsonRequestBehavior behavior, string format) { return new ToJsonResult { Data = data, JsonRequestBehavior = behavior, FormatString = format }; } public class ToJsonResult : JsonResult { const string error = "该请求已被封锁,因为敏感信息透露给第三方网站,这是一个GET请求时使用的。为了可以GET请求,请设置JsonRequestBehavior AllowGet。"; /// <summary> /// 格式化字符串 /// </summary> public string FormatString { get; set; } public override void ExecuteResult(ControllerContext context) { if (context == null) { throw new ArgumentNullException("context"); } if (JsonRequestBehavior == JsonRequestBehavior.DenyGet && String.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase)) { throw new InvalidOperationException(error); } HttpResponseBase response = context.HttpContext.Response; if (!String.IsNullOrEmpty(ContentType)) { response.ContentType = ContentType; } else { response.ContentType = "application/json"; } if (ContentEncoding != null) { response.ContentEncoding = ContentEncoding; } if (Data != null) { JavaScriptSerializer serializer = new JavaScriptSerializer(); string jsonstring = serializer.Serialize(Data); string p = @"\\/Date\(\d+\)\\/"; MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString); Regex reg = new Regex(p); jsonstring = reg.Replace(jsonstring, matchEvaluator); response.Write(jsonstring); } } /// <summary> /// 将Json序列化的时间由/Date(1294499956278+0800)转为字符串 /// </summary> private string ConvertJsonDateToDateString(Match m) { string result = string.Empty; string p = @"\d"; var cArray = m.Value.ToCharArray(); StringBuilder sb = new StringBuilder(); Regex reg = new Regex(p); for (int i = 0; i < cArray.Length; i++) { if (reg.IsMatch(cArray[i].ToString())) { sb.Append(cArray[i]); } } DateTime dt = new DateTime(1970, 1, 1); dt = dt.AddMilliseconds(long.Parse(sb.ToString())); dt = dt.ToLocalTime(); result = dt.ToString(FormatString); return result; } } } } 然后,在控制器中引用拓展的类。 using my.JsonMvc;//引用拓展类 public JsonResult Load() { //此处省略获取数据方法 //最后返回Json return MvcExtendsion.MyJson(result, JsonRequestBehavior.AllowGet, "yyyy-MM-dd HH:mm:ss"); }

最后,我选择了方案2解决了格式化日期的问题。

以下是完整的多表查询代码。

在BorrowBookController 控制器中 创建 index 视图 /// <summary> /// 创建添加视图 /// </summary> /// <returns></returns> public ActionResult Add() { return View(); } 创建 Load_Borrow_Data方法 //<summary> //获取借书数据 //</summary> //<returns></returns> //splitOn 读取Reader 从右到左 public JsonResult Load_Borrow_Data() { using (var conn = ConnectionFactory.MysqlConn()) { string sql_query = "select a.book_Id,a.book_Num,a.book_Name,a.book_Desc,a.borow_Time, "; sql_query += "b.book_Type_id,b.book_Type_Name,c.user_name"; sql_query += " from sys_Borrow_Book a join sys_Book_Type b on a.book_Type_id=b.book_Type_id left join sys_Borrow_User c "; sql_query += " on a.user_Id=c.user_Id "; var result = conn.Query<sys_Borrow_Book, sys_Book_Type, sys_Borrow_User, sys_Borrow_Book>(sql_query, (books, bkys, users) => { books.borrow_types = bkys; books.borrow_users = users; return books; }, splitOn: "book_Type_Name,user_name").ToList(); return MvcExtendsion.MyJson(result, JsonRequestBehavior.AllowGet, "yyyy-MM-dd HH:mm:ss"); } } 在 View 视图中创建 index视图 <div class="layui-container"> <div class="layui-row"> <h2 style="margin-top:10px;">借书列表</h2> <hr class="layui-bg-green"> <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon"></i> 新增</button> <div class="layui-col-md12"> <table class="layui-table" id="bind_tb"> <thead> <tr> <th>序号</th> <th>书籍类型</th> <th>借书编号</th> <th>借书书名</th> <th>借书人</th> <th>借书时间</th> <th>操作</th> </tr> </thead> </table> </div> </div> </div> 在index视图中操作dom <script type="text/javascript"> Load(); /*1.获取数据*/ function Load() { $.ajax({ url: "../BorrowBook/Load_Borrow_Data", type: "Get", }).done(function (msg) { var str_tb = ""; $("#bind_tb tr:gt(0)").remove(); debugger; if ($.isEmptyObject(msg) == false) { $.each(msg, function (i, obj) { str_tb += "<tr>"; str_tb += "<td>" + (i + 1) + "</td>"; str_tb += "<td>" + obj.borrow_types.book_Type_Name + "</td>"; str_tb += "<td>" + obj.book_Num + "</td>"; str_tb += "<td>" + obj.book_Name + "</td>"; str_tb += "<td>" + obj.borrow_users.user_name + "</td>"; str_tb += "<td>" + obj.borow_Time + "</td>"; str_tb += "<td><button class='layui-btn layui-btn-normal layui-btn-xs btnedit' id=" + obj.book_Type_id + "><i class='layui-icon'></i>编辑</button>"; str_tb += "<button class='layui-btn layui-btn-danger layui-btn-xs btndel' id=" + obj.book_Id + "><i class='layui-icon'></i>删除</button></td>"; str_tb += "</tr>"; }); $("#bind_tb").append(str_tb); } else { //$("#bind_tb tr:gt(0)").remove(); var str_error = "<tr><td colspan='7' style='text-align:center;'>暂无数据</td></tr>"; $("#bind_tb").append(str_error); } }).fail(function (e) { }); } </script>

最终效果:

转载于:https://www.cnblogs.com/ZengJiaLin/p/11344868.html

相关资源:.net core dapper CRUD例子(前段用bootstrap ajax).zip
最新回复(0)