写在前面

上一小节，我们使用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>

最终效果：

巴特西

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

写在前面

产生问题

解决方案

最新文章

热门文章