WebMatrix - 第一个应用程序

本文将首次查看WebMatrix - Microsoft的新IDE,以开发网页应用程序。在其中,我将介绍一些将使Web Matrix的核心功能成为理想的启动器的Web开发框架,因为我创建了一个非常简单的应用程序。

笔记

本文基于WebMatrix Beta 1.某些项目在Beta 2中已更改,因此代码可能无法正常运行。要检查已更改的内容,请参阅本文: WebMatrix. Beta 2更改

 

我要构建的网站不会做得很多 - 它将简单地显示数据库的一些书籍。但是,我会查看WebMatrix IDE中的SQL Server Compact版本,新的razor语法,新的cshtml文件类型和一些内置alpersers。我计划在附加文章的过程中查看更多关于应用程序的功能的网页功能。本文的所有代码都可以作为下载(底部链接)。

首先,我需要创建一个网站,所以我启动webmatrix,然后从模板中选择网站,然后我选择空网站选项。我把它保存为书房。

从此打开屏幕中,我们可以管理本网站的应用程序,数据库和SEO分析中的文件。对于此示例,我只能使用前两个选项。首先,数据库驱动网站需要一个数据库,因此单击“管理数据库”链接在WScreen中间,或左窗格中的数据库链接将让我到达我需要的地方。下一个屏幕包括添加新数据库的邀请:

默认情况下,创建App_data文件夹,并在其中,一个具有与站点相同名称的数据库。在这种情况下,书房。我不喜欢那样,所以我想右键单击数据库并选择将其重命名为书籍。但是,这不是测试版中的选项,因此我必须在左侧面板中选择文件,并在打开App_data文件夹后从那里重命名它。虽然我在文件视图中,但我还删除了默认索引.html文件,并通过右键单击本书和选择新文件,或者通过单击文件菜单中的新选项,添加一个名为default.cshtml的新文件,或者单击文件菜单中的新选项工作区的顶部。

返回数据库视图,我单击菜单上的新表按钮,然后开始添加表:

完成后,它有四个字段,并保存为作者:

然后,我添加两个表:类别,以及带有以下定义的书籍:

如果我单击主菜单上的数据按钮,我可以开始直接向表中添加数据:

好的。现在切换回文件视图,我打开default.cshtml,并在文件的顶部,打开带@ {}的新代码块:

这是新的剃刀语法。 @ Sign后跟一对括号表示多行代码块,并且可以被认为等同于脚本runat =后面的非码"server"堵塞。我要从数据库中测试阅读,所以我会添加一些代码来做到这一点:

数据库是一个新类,它提供了一种易于使用数据库的方法。其中一种方法 - OpenFile()设置连接并打开其文件名传递给该方法的数据库。下一行代码是一个简单的SQL查询。

我为页面的正文元素添加了一些代码:

更多razor语法:database.query()是一种返回IEnumerable的方法<object>。 SQL对数据库执行,返回的数据行被转换为对象的集合,其中数据库字段名称作为这些对象的属性。 Foreach. 前面有@符号,但没有括号。这是因为只有单行代码。第二行中的文字文本和HTML标记不被视为代码块的一部分,但它被剃刀解析器识别为属于循环的每次迭代,并且关闭支架确认。内联表达式或变量也在@符号之前,如 @ row.title. 。剃刀解析器将识别这些并适当地更换它们。您可以从图像中的阴影中看到IDE识别什么是代码,什么是静态HTML。我们可以通过单击菜单中的启动来查看此操作的结果,或者只是击中F12:

看起来相当沉闷,所以让我们为网站添加一些CSS。返回文件菜单,如果尚未参与其中,我通过右键单击该站点并选择新文件夹,并选择新文件夹,并在此中创建一个名为样式的新文件夹,然后添加一个CSS类型的新文件。我假装被命名为stylesheet.css。在此,我添加以下简单的CSS规则:

这需要与页面相关联,因此我使用一个新的助手:href( 小路 ),它从本地文件名创建浏览器兼容的URL:

再次注意辅助者如何在IDE中获取阴影背景。我修改default.aspx以显示更多数据:

在浏览器中运行此功能会导致所需的效果......

...但也表明一些描述在其中有错别。将数据直接进入数据库是一种痛苦,但我将在即将到来的文章中查看提供一些编辑功能。与此同时,本申请的某些用户可能对看到如此广泛的书籍列表感兴趣。他们只有有兴趣看到一类书籍,所以这就是我将在下一步工作的。

该计划是在显示书籍之前提供用户类别选择选项。他们可以选择一个类别,或选择查看所有书籍。以及标题,作者,ISBN和每本书提供的描述,也将显示本书所属的类别。首先要做的是修改现有的SQL以带来其他数据,然后添加一些更多以获取类别:

我需要一些东西来消费并显示类别,以便用户可以选择其中一个。 HTML选择元素适合此账单,这在页面内的主体区域的顶部:

目前,下拉列表没有帮助者,也没有选择列表。可以模板帮助帮助来管理这种事情,而是可重复使用的代码,包括帮助者的代码是未来的文章。守则非常简单,易于理解 - 添加了表单标记,并在其中,一个选择列表,其中包含默认值硬编码。从那里,迭代类别查询的结果才能填充选项值和选择的显示值。最后,提供了一个提交按钮以将表单发布回,表单本身已关闭。

需要一些额外的更改。当页面首先加载时,我只想显示“选择列表”和“按钮”。当用户选择并发布表单/页面后,我只会显示书籍。这里有两个选项 - 用户可以选择将显示所有书籍的默认值,或者他们可能决定选择特定类别。如果选择了默认选项,则传递给Server for CategorID的值(选择列表的名称)将是空字符串。如果没有,那将是一个数字。辅助功能有助于识别它是一个数字。助手是isint()。您可以看到此应用于请求["CategoryID"]在下面的代码中,如果表单已发布,则仅运行 - Ispost()是有助于确定该的属性。如果值是数字,则运行的代码将有点添加到要执行的SQL,包括数据库中的CaregaItID字段的参数值:

参数放置持有者需要以某种方式命名,从@ 0开始,然后@ 1,然后@ 2等。在内部,Database.Query()方法将通过传递的参数值集合运行,并尝试根据集合中的索引将它们与参数占位符匹配。该索引从0开始,因此占位符的名称是重要的,也是参数值传递的顺序。最后,运行以显示书籍的代码也在页面上进一步包裹在ISPOST()条件中包装:

这里,显示数据库.Query()方法,包括CaructionID值的参数值。如果SQL不包含额外的部分,因为用户选择了默认选项,请求["CategoryID"]通过的价值被忽略了。没有参数占位符可以匹配它。

最后,最后两个图像显示页面第一加载,以及选择JavaScript类别的结果:

这就是现在。虽然它肯定没有对亚马逊的竞争对手,但已经涵盖了一些新的WebMatrix,剃刀和SQL Server CE功能。还有很多其他功能甚至没有触及,我打算用这套新的玩具来试验更多,并将结果作为文章发布。下一篇文章将审查如何为网站提供一致的外观和觉得。与此同时,本文的网站文件与数据库等一起可用 下载 。如果您想运行它,请持有WebMatrix并在解压缩下载后,使用该站点从文件夹选项。