在ASP.NET MVC中使用Vue.js

在上一篇博客，我们已经学习了如何使用axios和Vue.js。但我们使用的JSON数据是一个静态的，这对于实际项目来说，静态的数据是几乎没意义的。

在ASP.NET中，利用控制器里面生成一个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="地产",Url="/Category/List/1" },
                new Category() {ID="2",name="科技",Url="/Category/List/2" },
                new Category() {ID="3",name="医药",Url="/Category/List/3" },
                new Category() {ID="4",name="其他",Url="/Category/List/4" },
            };
            return C;

        }

数据已经建好，那么新建一个控制器，取名为JsonController

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

DataModel是上面Model的名称，这个时候访问/Json/Categories 将会得到和Category.json一样的数据。但是通过了asp.net MVC，这个数据显然就是动态的了。（这个数据可以从数据库中来，可以从变量来 ）

有时候我们并不想使用AJAX，也不想用强类型视图进行数据渲染，那么这个时候VUE.js就是一个非常不错的选择。我们可以通过C#，将数据string化，生成的数据从控制器传递到视图，变成javascript中的json数据。

那么我们先来建一个产品库。还是打开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 进行传输，那么只要在Index视图的javascript代码中渲染出来就可以了

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

那么，我们的列表页面也就完成了：

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

对于一个项目的某个页面，在ASP.NET中如果多个数据库操作的话，就不要使用强类型视图了，VUE.js也提供了一个不错的选择。当然如果只是这么简单的操作的话，直接用JavaScript不是更好吗。呵呵，这里只是提供一个入门的参考而已。

真希望有时间写一个webAPI，利用VUE.JS通过API进行数据增改删查。APP也是通过这个API进行操作，那么这种效率将会大大提高，无论是在开发上，还是在应用上。