php mvc vue,在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 CategoryData()

{

var C = new List

{

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 ProductData()

{

var C = new List

{

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代码中渲染出来就可以了

new Vue({

el: '#Pro',

data: {

todos: [

@Html.Raw(ViewBag.JSON)

]

}

})

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

• {{todo.name}}

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

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