原文名称：KnockoutJS Starter

Knockout 是一个非常棒的脚本库，可是我发现许多人并不了解它，所以，思胜翻译了这本著作。

这一节，我们将会讨论 Knockout 可以做什么，又如何使用它的功能。

Knockout 是一个 JavaScript 脚本库

Knockout ，从本质上讲，是一个 JavaScript 脚本库，可以用在网站或者网页的开发中。用来增强脚本的功能以便提供更好的客户体验。默认情况下，除非你调用 Knockout ，否则它什么都不会做。这是区别其他的脚本库或者框架很重要的一点。你可以从这里下载它。

Knockout 是一个 MVVM ( Model-View-ViewModel ) 库

创建 Knockout 的一个重要原因是在 Web 开发中可以应用 MVVM 模式。MVVM 是一种与面向对象不同的开发方式，通过将界面的逻辑与业务逻辑进行分离，达到可测试的目的。

有很多的原因值得我们写可测试的代码 ( 这可以用整本的书来讲 )，但是最重要的原因是代码的可维护性和质量的保证。写可测试的代码，代码会变得更加容易维护。不管怎么说，使用 MVVM 模式创建 Javascript 程序，比直接使用 DOM 的事件来编写程序，要花费更短的时间。

上面的图表说

阅读全文

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，功能很强大，但是，使用上并不太方便。这里我们将介绍一下这个组件的使用。

第一，简单使用

首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide=”typeahead”　来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。

阅读全文

Part 3: 设计逻辑层：核心开发

 如前所述，我们的解决方案如下所示:

下面我们讨论整个应用的结构，根据应用中不同组件的逻辑相关性，分离到不同的层中，层与层之间的通讯通过或者不通过限制。分层属于架构风格，在应用的长时间生命周期中，解决维护和扩展问题。
所以，让我们在解决方案中添加一个类库项目，命名为 Application.Common.

Application.Common :

这是一个类库项目, 提供公共功能，可以被不同的业务逻辑层使用。例如：安全，日志，跟踪，验证等等. 定义在这个层中的组件，不仅可以被不同的层使用，还可以在不同的应用中使用。为了未来容易使用，我们使用依赖注入和抽象，在应用中实现最小化的修改。

例如，在我们马上用到的，验证组件用来验证数据，定制的日志器来记录错误或者警告。

 在添加了 Common 类库之后，解决方案的文件夹如下所示：

Application.Core:

这个层实现系统的核心处理逻辑，封装相关的所有业务逻辑。从基本上说，这个层通常实现领域处理的逻辑。这个层还经常通过核心层的工作单元，以便完成 PI 特性，主要的目标是明确区分和分离核心领域的逻辑与基础架构的具体细节，例如，数据访问和数据仓储的具体技术，像 ORM ，或者简单的数据访问库，或者

阅读全文

对于 Web 开发来说，一个永远的话题是如何创建一个跨浏览器兼容的布局。许多年来，各种框架使用各种技术来解决这个问题。Bootstrap 使用了一个不同的方式来解决这个问题。基于 960 像素的布局 http://960.gs，bootstrap 提供了更为简单的语法，它还支持响应式布局，布局可以根据设备的不同尺寸进行调整，从桌面计算机到平板和手持设备。

以前版本的 bootstrap 在没有使用响应式布局的时候，使用了 940px 布局使用 span* 和 offset* 布局。在使用响应式布局的时候，网格系统使用 724px 或者 1170px 的宽度。

如果希望使用百分比的布局，可以将容器的类从 .row 替换为 row-fluid。

3.0 版本对这一部分有比较大的变动，可以区分特小型设备 xs ( Extra small devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px, 比如平板 )， 中型设备 md ( Medium devices, 小于 1200px, 比如桌面计算机),  大型设备 lg ( Large devices, 比如宽屏显示器 )。

而 row-flui

阅读全文

这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书，但是，这本书的内容是基于以前版本的，与最新的 3.0 并不一致。

为了方便学习和使用 BootStrap 3， 这里将内容替换为了当前的 3.0 版。原书可以在 Amazon 买到，$17.99. 原书的内容比较简单，我会尽量补充一些内容。

如果你很熟悉 HTML，你就可以很快地填充网页的内容，但是，bootstrap 拥有一些需要你注意的特性。

开始

如果你是一个 HTML 的新手，最好的 HTML 学习和参考的站点是 http://htmldog.com, 这里的 HTML 新手教程可以帮助你学习基础的知识，我强烈建议你学习这里的 CSS 教程，这样你可以更好地学习 Bootstrap。

在 bootstrap 3.0 文件夹下创建一个名为 study 的文件夹，在其中创建一个名为 2 的工作文件夹。

将 starter-template 中的两个文件复制到你的工作文件夹中，开始我们的学习。

1. 编辑网页的标题，将 index.html 文件的第 50 行，更新为如下内容，其中添加了 small 标记。

阅读全文

Bootstrap 3 发布了，通过简单的几步，我们就可以使用 Bootstrap 的样式表，图标，以及 javascript 来配置一个简单的站点。

准备

Bootstrap 不仅仅是一个代码集，还是一个在线社区。作为开始，你需要从熟悉 bootstrap 网站开始：http://getbootstrap.com。

目前版本是 3.0 ，你应该看到如上的页面。

在这里，你可以找到如下内容：

文档

如果这是你第一次访问这个站点，冲一杯热茶，细心地阅读这个网站的页面，查看每个组件，阅读详细的说明，沉浸在其中，你会发现非常的有趣。

下载

你可以获取最新版本的 bootstrap：样式表，脚本，插件，以及图标。已经完全处理好，可以直接使用，并且封装在一个压缩包内，我们将从这里开始。

如何完成

不管你现在水平如何，我都会带你完成全部的步骤。

1. 访问 bootstrap 的首页：http://getbootstrap.com

2. 点击 Download Bootstrap 按钮，你会下载一个名为 bootstrap-3.0.0.zip 的文件。

3. 找到下载的文件，然后解压。你会看到一个名为 bootstrap-3.0.0 的文件夹，在其中你会看到如下的文件结构。

其中 dist 文件夹中包含了我们主要

阅读全文

在 HTML5 中, 可以使用 data- 属性来表示用户数据，这些数据甚至可以是 JSON 格式的数据，对 Web 前端开发带来很大的方便。

在 MVC 的 Razor 中，可以使用匿名对象来生成定制的属性，不过，这样的属性可不能通过 Razor  的语法检查。

编译器会直接报告错误。  The name ‘data’ does not exist in the current context   ，原因很简单，把 – 号当作运算符了。
其实，HtmlHelper 提供的方法 AnonymousObjectToHtmlAttributes 已经可以解决这个问题，方法的说明如下所示。

我们可以在匿名对象中直接使用下划线 (_) 来代替减号 (-) ，HtmlHelper 会在呈现中，将下划线替换为减号的。

例如，下面的写法

会生成如下的 H

阅读全文

jBox  是一个不错的组件库，可以用来比较简单地弹出窗口。

我希望在 jBox 弹出窗口之后，自动将焦点设置到子窗口的某个输入框中，可是发现并不容易。  

在 jBox 2.3 中，提供了如下的增强。

[调整] loaded 选项增加了个参数h，参数h表示窗口内容的jQuery对象，方便用户在窗口加载后对内容进行初始化处理。

示例中并没有说明 h 的使用方式。

那么，这个 h 是什么呢？

在使用 jBox 的时候，每个弹出的窗口，会创建一个 id 为 jbox-content 的 div 元素包裹所有的窗口内容。在 loaded 中，jBox 传递给函数的参数就是这个元素。这个元素的结构如下：

阅读全文

Part 2: 创建数据库 (SQL Server 2008 r2): For DBA

数据库方面我们需要的主要功能如下:

• 联系人有姓名和电子邮件地址.
• 联系人可以拥有多个地址.
• 联系人可以拥有多个电话.

为了实现目标，我们需要在数据库中创建下列表.

表与表的关系如下图所示:

数据库的脚本可以从这里直接下载：Application_DB.sql

本文链接：http://www.cnblogs.com/haogj/p/3127024.html，转载请注明。

原文地址：http://ddmvc4.codeplex.com/

原文名称：Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap

验证:

快要完成我们程序的界面部分了。剩下的事情就是在用户点击 “保存” 的时候管理验证问题了。验证是主要需求，今天就是最无知的应用也不会忽视它。通过正确的验证，用户可以知道应该输入什么数据。下面，我们将会讨论 KnockoutJS Validation 库，可以通过从这里下载。也可以直接通过 NuGet 获取，

先让我们看看常用的验证场景，以及如何使用。

这里有篇文章讨论 Knockout 扩展的原理：翻译：使用 Knockout 扩展器扩展 observables

Scenario 1: 表单中必须输入名字

this.FirstName = ko.observable().extend({ required: true });

Scenario 2: 名字最多包含 50 个字符，至少包含 3 个字符

this.FirstName = ko.observable().extend({ maxLength: 50, minLength:3});

Scenario

阅读全文