在上一篇博客，我們已經(jīng)學(xué)習(xí)了如何使用axios和Vue.js。但我們使用的JSON數(shù)據(jù)是一個(gè)靜態(tài)的，這對(duì)于實(shí)際項(xiàng)目來說，靜態(tài)的數(shù)據(jù)是幾乎沒意義的。

在ASP.NET中，利用控制器里面生成一個(gè)JSON是一件很容易的事。這方面我之前提過很多的例子了，我這里只把代碼貼出來：

public class Category
        {
            public string ID { get; set; }
            public string name { get; set; }
            public string Url { get; set; }
        }

public List<Category> CategoryData()
        {
            var C = new List<Category>
            {
                new Category() {ID="1",name="地產(chǎn)",Url="/Category/List/1" },
                new Category() {ID="2",name="科技",Url="/Category/List/2" },
                new Category() {ID="3",name="醫(yī)藥",Url="/Category/List/3" },
                new Category() {ID="4",name="其他",Url="/Category/List/4" },
            };
            return C;

        }

數(shù)據(jù)已經(jīng)建好，那么新建一個(gè)控制器，取名為JsonController

 public ActionResult Categories()
        {
            DataModel C = new DataModel();
            var E = C.CategoryData();
            return Json(E, JsonRequestBehavior.AllowGet);
        }

DataModel是上面Model的名稱，這個(gè)時(shí)候訪問/Json/Categories 將會(huì)得到和Category.json一樣的數(shù)據(jù)。但是通過了asp.net MVC，這個(gè)數(shù)據(jù)顯然就是動(dòng)態(tài)的了。（這個(gè)數(shù)據(jù)可以從數(shù)據(jù)庫(kù)中來，可以從變量來 ）

有時(shí)候我們并不想使用AJAX，也不想用強(qiáng)類型視圖進(jìn)行數(shù)據(jù)渲染，那么這個(gè)時(shí)候VUE.js就是一個(gè)非常不錯(cuò)的選擇。我們可以通過C#，將數(shù)據(jù)string化，生成的數(shù)據(jù)從控制器傳遞到視圖，變成javascript中的json數(shù)據(jù)。

那么我們先來建一個(gè)產(chǎn)品庫(kù)。還是打開DataModel.cs，增加以下代碼：

public class Product
        {
            public string ID { get; set; }
            public string name { get; set; }
            public string CategoryID { get; set; }
            public string img { get; set; }
           
        }

 public List<Product> ProductData()
        {
            var C = new List<Product>
            {
                new Product() {ID="1",name="001",CategoryID="1",img="/images/001.jpg"},
                 new Product() {ID="2",name="002",CategoryID="1",img="/images/002.jpg"},
                  new Product() {ID="3",name="003",CategoryID="1",img="/images/003.jpg"},
                   new Product() {ID="4",name="004",CategoryID="1",img="/images/004.jpg"},
                    new Product() {ID="5",name="005",CategoryID="1",img="/images/005.jpg"},
                     new Product() {ID="6",name="006",CategoryID="1",img="/images/006.jpg"}
            };
            return C;
        }

接著，打開控制器：

  public ActionResult Index()
        {
            ViewBag.JSON = "";
            DataModel DM = new DataModel();
            var JSONTO = DM.ProductData().Take(6).ToList();
            foreach (DataModel.Product p in JSONTO)
            {
                ViewBag.JSON += "{name:'"+p.name+"',img:'"+p.img + "',url:'/Product/"+p.ID+"'},";
            }
                return View();
        }

這里我用了ViewBag.JSON 進(jìn)行傳輸，那么只要在Index視圖的javascript代碼中渲染出來就可以了

<script>
    new Vue({
        el: '#Pro',
        data: {
            todos: [
            @Html.Raw(ViewBag.JSON)
            ]
        }
    })
</script>

那么，我們的列表頁(yè)面也就完成了：

 <ul id="Pro">
        <li v-for="todo in todos">
            <a :href=todo.url target="_blank"><img :src=todo.img />
            {{todo.name}}
            </a></li>
    </ul>   

對(duì)于一個(gè)項(xiàng)目的某個(gè)頁(yè)面，在ASP.NET中如果多個(gè)數(shù)據(jù)庫(kù)操作的話，就不要使用強(qiáng)類型視圖了，VUE.js也提供了一個(gè)不錯(cuò)的選擇。當(dāng)然如果只是這么簡(jiǎn)單的操作的話，直接用JavaScript不是更好嗎。呵呵，這里只是提供一個(gè)入門的參考而已。

真希望有時(shí)間寫一個(gè)webAPI，利用VUE.JS通過API進(jìn)行數(shù)據(jù)增改刪查。APP也是通過這個(gè)API進(jìn)行操作，那么這種效率將會(huì)大大提高，無論是在開發(fā)上，還是在應(yīng)用上。