Knockoutjs and asp.net mvc3
开始学习Knockoutjs，搜集点实用的东西。
knockoutjs官网 http://knockoutjs.com/ 基础的讲解都在上面。
下介绍在mvc3中使用knockoutjs，非常简单。
1. 创建MVC3项目
2. 下载并引用knockoutjs
<script src="@Url.Content("~/Scripts/knockout-1.2.1.js")"type="text/javascript"></script>
3. 添加一个Model类
public class Candidate
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public int Experience { get; set; }
public string[] Technologies { get; set; }
}
4. 删除Index.cshtml中所有代码 用下面的替换,html与knockoutjs的绑定参见官网 http://knockoutjs.com/documentation/introduction.html
注意：脚本中的 candidateModel 的字段名字必须和 step.3中的类一一对应
z@{
ViewBag.Title = "Home Page";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.0.0.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//activates KO
ko.applyBindings(candidateModel);
});
var candidateModel = {
FirstName: ko.observable(''),
LastName: ko.observable(''),
Email: ko.observable(''),
Experience: ko.observable(0),
Technologies: ko.observableArray([]),
TechnologyToAdd: ko.observable('')
};
candidateModel.Name = ko.dependentObservable(function () {
return candidateModel.FirstName() +
" " + candidateModel.LastName();
});
candidateModel.addTechnology = function () {
if (candidateModel.TechnologyToAdd() !== '') {
candidateModel.Technologies.push(candidateModel.TechnologyToAdd());
candidateModel.TechnologyToAdd('');
}
};
candidateModel.addCandidate = function () {
$.ajax({
url: "/Home/Create/",
type: 'post',
data: ko.toJSON(this),
contentType: 'application/json',
success: function (result) {
alert(result);
}
});
};
</script>
<h2>@ViewBag.Message</h2>
<form data-bind="submit: addCandidate">
<fieldset>
<legend>Candidate info</legend>
<p>First Name: <input type="text" data-bind="value: FirstName" /> </p>
<p>Last Name: <input type="text" data-bind="value: LastName" /> </p>
<p>Email:<input type="text" data-bind="value: Email" /> </p>
<p>Experience: <input type="text" data-bind="value: Experience" /> months </p>
</fieldset>
<fieldset>
<legend>Technologies</legend>
New Technology:
<input type="text" data-bind='value: TechnologyToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: TechnologyToAdd().length > 0, click: addTechnology">Add</button>
</fieldset>
<fieldset>
<legend>Candidate Profile</legend>
<b><span data-bind="text: Name"></span></b>
has <b><span data-bind="text: Experience"></span></b> month experience <br />
Email : <b><span data-bind="text: Email"></span></b>
<p>Technology Expertises</p>
<select multiple="multiple" width="50" data-bind="options: Technologies"></select>
</fieldset>
<input type="submit" value="Create" />
</form>
5. 在HomeController.cs中添加方法 接收step.4中的ajax数据，HomeController中需要引用step.3中是model
[HttpPost]
public JsonResult Create(Candidate candidate)
{
//do the persistence logic here
var message = "Candidate: " + candidate.FirstName + " Saved";
return Json(message );
}
6. 完成，体验下吧
