在上一篇博客，我们已经学习了如何使用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进行操作，那么这种效率将会大大提高，无论是在开发上，还是在应用上。
