ASP.NET MVC4 结合MVVM的应用初探（二）——国产大牛MVVM框架avalon应用

【我们的第一个例程】

拿一个经典例子来讲吧，我记得以前学asp.net mvc的时候，搜索到不少资料，对我帮助很大。这次重点是谈asp.net mvc4和MVVM框架avalon的结合，我想基于一个大家都比较熟悉的经典例程，会不会更好一些。选了《Pro ASP.NET MVC4 4th Edition》这本书中的例子，园子里“禁止吸烟”翻译的，挺好。想看原书例程的，请戳这里【译】《Pro ASP.NET MVC4 4th Edition》第二章。

首先，你要装好VS2012，一定要装上Nuget管理器哦，这是个人尽可夫……人尽可知的插件，必备。另外，我再推荐一个插件Resharper，这玩意儿太棒了，我喜欢用的是它的代码补全，比VS自己的代码补全好用多了。不过它是收费的。网上能搜到注册码，我就不展开说了。本例程暂且用不着这两个扩展。

新建一个项目：



选择空项目：



创建完成，解决方案里的文件就是这个样子：



在Controller上点右键，新建一个HomeController控制器。模板选空MVC控制器。



在HomeController中，Index()方法上点右键，新建一个视图View，名字默认是Index，不要改变它。

这时候按F5启动调试，应该看到这样的结果：



然后，在HomeController的Index()方法中写两句代码，把根据时间要发到View的字符串，上午好还是下午好，放到ViewBag.Greeting里。准备在前端取来用。

public class HomeController : Controller
{
public ActionResult Index()
{
int hour = DateTime.Now.Hour;
var g = hour < 12 ? "上午好！" : "下午好！";
ViewBag.Greeting = JsonConvert.SerializeObject(g);//转为json对象，直接传字符串到前端是不认的。这里用的是Newton.json，asp.net mvc4似乎默认就引用了它。如果没有，可用Nuget安装进来。
return View();
}
}

下面看看View怎么写，avalon出场！既然用了avalon，再按原书例程那种写法，就太费劲啦，不如单页面搞定它！去https://github.com/RubyLouvre/avalon下载Avalon.js吧。

<script src="~/Scripts/avalon.js"></script>
<script>
avalon.ready(function () {
var greeting =@Html.Raw(ViewBag.Greeting);//通过ViewBag从后台获取JSON数据
var model = avalon.define("party", function (vm) {
vm.greeting = greeting;
vm.visible = false;//field显示与否
vm.name = "";//占位
vm.email = "";//占位
vm.phone = "";//占位

//以下是事件
vm.go = function() {
model.visible = true;//这里要用model，不要用vm.visible=true;
};
vm.submit = function() {
//这里可以用jquery或avalon自带的ajax的post方法，把数据传到后台持久化。
};
});
avalon.scan();
})
</script>
<div ms-controller="party">
<p>{{greeting}}</p>
<p>欢迎光临本站，我们打算搞一场别开生面的聚会，您有兴趣参加吗？</p>

<a href="#" ms-click="go">参加</a>
<hr />
<fieldset ms-visible="visible">
<legend>添加信息</legend>
<div>
<label>姓名：</label>
<input ms-duplex="name" />
</div>
<div>
<label>Email：</label>
<input ms-duplex="email" />
</div>
<div>
<label>电话：</label>
<input ms-duplex="phone" />
</div>
<a href="#" ms-click="submit">提交</a>
</fieldset>
</div>

好啦，这个小例子到此结束。下次结合使用avalon的一些小技巧再写一点东西。