·您现在的位置：云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点

作者：佚名 ASP.NET网站开发编辑：admin 更新时间：2022-07-23

翻译：使用 asp.net MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

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

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

Part 1: 创建 Web application (Knockout.js, Asp.Net MVC and Bootstrap): 前端设计

在开始 UI 部分之前，我们先看一下在 ASP.NET MVC4 中使用 Knockoutjs 和 Bootstrap 有什么好处？

Why Knockoutjs:Knockout 使用 javaScript ViewModel 实现了 MVVM 模式. 在 MVC 中还有一个很棒的因素是从 Javascript 模型序列化为 Json 和从 Json 反序列为模型都很简单，在 MVC4 中已经包含了这个脚本库, 这使得在我们开发复杂的 UI 的时候，不论怎样修改，都只需要很少的编码，马上我们用它来实现页面。Why Bootstrap:Twitter 的 Bootstrap 是包括简单并且灵活的 HTML, CSS, 以及广受欢迎的 Javascript 用户界面组件和交互。包括一组 CSS 样式，组件和 JavaScript 插件。提供了跨平台的支持，消除了不同平台的不一致问题。处理的非常好，良好的文档和 Twitter Bootstrap's 站点本事就是现实中很棒的参考。最后，它节省了我大量的时间，只需要很少的测试，几乎没有浏览器的问题，节约了一半的开发时间，在我们的框架中其它优点还包括。

12-列表个, 固定布局, 流式布局以及响应式布局.
提供基本的 CSS, 包括：版式, code (使用 Google PRettify 的语法高亮), 表格, 表单, 按钮，以及 Glpyhicons 图标 .
Web UI 组件，例如按钮, 导航菜单, 标签, 缩略图, 提示, 进度条和其他杂项.
Javascript 插件，包括模式对话框, 下拉列表, 滚动条, 窗格, 工具提示, 弹出窗口, 提示, 按钮, 收缩, 转轮和提示.

在下面的步骤中，我们将演练使用测试数据来创建布局，设计 UI ，完成上述的目标。Step 1:

创建空白的应用; 命名为 “Application”

Step 2:

在解决方案上右击鼠标，添加一个新的 ASP.NET MVC4 项目，选择 Internet Application 模版，使用 Razor 引擎。

完成第 2 步之后 - 项目的结构如下所示

Step 3:

在 MVC 项目上鼠标右击，选择管理 NuGet 包，在搜索框中输入 Bootstrap ，找到后，点击 Install 按钮。

有的时候，我会联不到 NuGet 网站，你可以直接到 BootStrap 网站下载文件，添加到项目中。

主要是使用了样式文件bootstrap.css，下载后，保存到 Content 文件夹中。

Step 4:

将下面的两行代码添加到 App_Start 文件夹中德 BundleConfig.cs文件中，为所有页面使用 Knockoutjs 和 Bootstrap 提供支持。

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(                                    "~/Scripts/knockout-{version}.js"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));

在 Views/Shared 文件夹中 _Layout.cshtml 文件中，添加下面的行，注册使用 knockout。

Also in _Layout,cshtml file under Views/Shared folder add below line to register knockout files as :

@Scripts.Render("~/bundles/knockout")

Step 5:

在视图文件夹 Views 中添加一个名为 Contack 的文件夹，在其中添加一个名为 Index.cshtml 的视图文件 ( 这一步可以通过在控制器中的 Index 方法上点击右键完成 )。然后添加一个名为 ContactController 的控制器，在 Scripts 文件夹中添加一个名为 Contact.js 的脚本文件，项目文件夹如下所示：

Step 6:

修改 Route.config 文件，将默认的路由设置到 Contact 控制器。

routes.MapRoute(                name: "Default",                url: "{controller}/{action}/{id}",                defaults: new { controller = "Contact", action = "Index", id = UrlParameter.Optional }            );

修改 View/Shared 文件夹中的 _Layout.cshtml 文件，使用 BootStrap 语法，修改后的代码如下所示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>@ViewBag.Title - Contact manager</title>    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />    <meta name="viewport" content="width=device-width" />    @Scripts.Render("~/bundles/jquery")    @Scripts.Render("~/bundles/knockout")    @Styles.Render("~/Content/css")    @Scripts.Render("~/bundles/modernizr")    @RenderSection("scripts", required: false)</head><body>    <div class="container-narrow">        <div class="masthead">            <ul class="nav nav-pills pull-right">                            </ul>            <h3 class="muted">Contact Manager</h3>        </div>        <div id="body" class="container">            @RenderSection("featured", required: false)            <section>                @RenderBody()            </section>        </div>        <hr />        <div id="footer">            <div class="container">                <p class="muted credit">&copy; @DateTime.Now.Year - Design and devloped by <a href="http://www.anandpandey.com">Anand Pandey</a>.</p>            </div>        </div>    </div></body></html>

Step 7:

现在可以运行程序，效果如下:我们使用这个页面显示 Screen 1 ，显示联系人列表。

Step 8:

首先，我们在 Contact.js 中创建一个模拟的联系人数据数组， (最后我们从数据库中获取), 随后，我们使用这些数据填充表格。

var DummyProfile = [    {        "ProfileId": 1,        "FirstName": "Anand",        "LastName": "Pandey",        "Email": "[email protected]"    },    {        "ProfileId": 2,        "FirstName": "John",        "LastName": "Cena",        "Email": "[email protected]"    }]

然后，我们创建 ProfilesViewModel， ViewModel 用来保存联系人信息，数组用来保存联系人信息的集合。注意这里使用 ko.observableArray, 相当于常规数组，是观察者模式中的主题，这意味着它可以在其中的项目发生变化的时候，自动更新界面。

最后，我们需要使用 ko.applyBindings() 来激活 knockout.

var ProfilesViewModel = function () {    var self = this;    var refresh = function () {        self.Profiles(DummyProfile);    };     // Public data properties    self.Profiles = ko.observableArray([]);    refresh();};ko.applyBindings(new ProfilesViewModel());

Step 9:

下一步，我们需要在 Index.cshtml 页面写一些代码。以显示联系人列表。我们在 tbody 元素上使用 foreach 绑定，使用 knockout 根据联系人数组中的每一个数据生成对应的子元素，然后告诉 knockout 我们希望使用对每个数据生成 tr 来填充 tbody.

<table class="table table-striped table-bordered table-condensed">    <tr>         <th>First Name</th>        <th>Last Name</th>        <th>Email</th>    </tr>    <tbody data-bind="foreach: Profiles">        <tr>            <td data-bind="text: FirstName"></td>            <td data-bind="text: LastName"></td>            <td data-bind="text: Email"></td>        </tr>    </tbody></table> <script src="~/Scripts/Contact.js"></script>

如果现在运行程序，就会看到联系人的简单列表不要忘了，我们使用 Bootstrap 的样式类来应用到 table 上，在上边的例子中，如下所示。

<table class="table table-striped table-bordered table-condensed">

Step 10:

现在，我们需要为每一行增加编辑和删除功能，表格的上边有一个创建新联系人的按钮，做以下工作：

在模版中添加 th 和 td ，在脚本中绑定 removeProfile 函数处理按钮的点击事件处理
修改名字单元格，增加编辑联系人的链接，使用 editProfile 函数绑定点击事件
在表格的前面添加创建联系人的按钮，使用 createProfile 函数绑定到点击事件处理

页面内容如下所示 :

<input type="button"  class="btn btn-small btn-primary"  value="New Contact" data-bind="click:$root.createProfile" /><hr /><table class="table table-striped table-bordered table-condensed">    <tr>         <th>First Name</th>        <th>Last Name</th>        <th>Email</th>        <th></th>    </tr>    <tbody data-bind="foreach: Profiles">        <tr>            <td class="name"><a data-bind="text: FirstName, click: $parent.editProfile"></a></td>            <td data-bind="text: LastName"></td>            <td data-bind="text: Email"></td>            <td><button class="btn btn-mini btn-

上一篇文章： csharp:using Newtonsoft.Json.Net2.0 in .net 2.0 webform
下一篇文章： C#快递单号查询源码