ASP.NET MVC之JsonResult（六）

前言

這一節我們利用上節所講Unobtrusive Ajax並利用MVC中的JsonResult來返回Json數據。

JsonResult

上節我們利用分部視圖返回數據並進行填充，當我們發出請求需要獲取數據時都是返回json，所以我們在上一節的基礎上進一步學習。

既然是返回Json數據，我們接下來要在控制器上進行定義如下代碼：

（1）通過選擇的類別名稱來篩選數據

        private IEnumerable<Blog> GetBlog(string selectedCategory)
        {
            var data = blogs.AsEnumerable();
            if (selectedCategory != "All")
            {
                Category selected = (Category)Enum.Parse(typeof(Category), selectedCategory);
                data = blogs.Where(p => p.Category == selected);
            }
            return data;
        }

（2）利用JsonResult返回Json數據

        public JsonResult GetBlogDataJson(string selectedCategory = "All")
        {
            var data = GetBlog(selectedCategory);
            return Json(data, JsonRequestBehavior.AllowGet);
        }

（3）接下來我們在視圖中利用JS對獲取的數據進行拼接

<script type="text/javascript">
    function blogData(data) {
        var blog = $("#blogsTable");
        blog.empty();
        for (var i = 0; i < data.length; i++) {
            var b = data[i];
            blog.append("<tr><td>" + b.ID + "</td><td>"
            + b.Name + "</td><td>" + b.Name + "</td><td>"
            + b.BlogAddress + "</td>" + b.BlogAddress + "<td></td>"
            + b.Description + "</td>" + b.Description + "<td></td>"
            + b.Category + "</td><td>" + b.Category + "</td></tr>");
        }
    }
</script>

（4）我們通過鏈接@Url.Action來篩選數據，如下：

    @foreach (string category in Enum.GetNames(typeof(Category)))
    {
        <div class="ajaxLink">
            @Ajax.ActionLink(category, "GetBlogs",
                new { selectedCategory = category },
                new AjaxOptions
                {
                    Url = Url.Action("GetBlogDataJson", new { selectedCategory = category }),
                   OnSuccess = "blogData" //返回數據后調用上述blogData進行填充數據
                })
        </div>
    }

接下來我們來看看效果：

我們點擊任意一個類別來看看：

到此為止，我們可以下結論利用JsonResult能夠正確返回數據。

但是但是，貌似出了一個問題，你發現了沒：類別怎么用數字表示的呢？

分析：我們在通過返回的數據在前台來看看是否是前台返回數據時作了什么手腳。

到了這里打消了我們上面的推論，看來是后台出問題了，我們想應該在序列化時無法序列化枚舉值，於是我們可以做一個測試：

內置JavaScriptSerializer序列化枚舉

我們實例化Blog實例：

            var blog = new Blog { Id = 4, Name = "xpy0928 4", Category = Category.SQLServer, BlogAddress = "http://www.cnblogs.com/CreateMyself/", Description = "靠自己！" };
            var jsonSerial = new JavaScriptSerializer();
            var blogJson = jsonSerial.Serialize(blog);
            var data = GetBlog(selectedCategory);

序列化如下：

果然如我們所料，內置序列化無法序列化枚舉，此時我們看看枚舉中是否有通過其數字得到其名稱的方法，查看了一下，需要如下操作：

Enum.GetName(typeof(Category), b.Category)

既然枚舉需要進行轉換，接着我們通過投影來進行轉換，如下：

            var data = GetBlog(selectedCategory).Select(b => new
            {
                ID = b.Id,
                Name = b.Name,
                BlogAddress = b.BlogAddress,
                Description = b.Description,
                Category = Enum.GetName(typeof(Category), b.Category)
            });
            return Json(data, JsonRequestBehavior.AllowGet);

我們再來看看效果：

 

至此我們對枚舉無法進行序列化就這樣結束。到這里我想了想，既然序列化類無法進行序列化，那要是Json.Net又會怎樣呢？

JSON.NET序列化枚舉

            var blog = new Blog { Id = 4, Name = "xpy0928 4", Category = Category.SQLServer, BlogAddress = "http://www.cnblogs.com/CreateMyself/", Description = "靠自己！" };
            var blogJson = JsonConvert.SerializeObject(blog);

我們看看序列化結果：

Json.NET也無法進行序列化枚舉，通過查詢相關資料，我們在序列化枚舉時在枚舉類上添加如下特性即可：

[JsonConverter(typeof(StringEnumConverter))]

結語 

之前沒怎么接觸過序列化過枚舉，在學習ASP.NET MVC這一系列時，發現有些東西非常簡單，但是在做的過程中，還是或多或少有點小問題，可能別人早已經知道了，但是通過學習今天才明白過來，為時未晚，掌握了就可以了。特此記下：

內置序列化器，序列化枚舉通過如下轉換

Enum.GetName(typeof(Category), b.Category)

利用JSON.NET序列化枚舉

[JsonConverter(typeof(StringEnumConverter))]