WebMatrix和jQuery表单

尽管WebMatrix仍处于第一个测试版,但是在论坛上有一些请求,例如,用于说明如何创建由Ajax提供支持的网页表单。在以前的文章中构建,我以为我会汇总了一个小样本,该样本展示了如何使用jQuery向数据库添加记录。这是它的所做。

首先,如果您是Web开发新的,Ajax是 A同步 vascript和 Xml。它在谷歌使用技术来激发Google邮件之后被命名,虽然谷歌在早期使用XML,但这些天在客户端和服务器之间传输数据的更流行方法是HTML,纯文本或JavaScript对象表示法(JSON)。简而言之,Ajax使用场景后面的JavaScript将异步请求发送到服务器,并根据响应更新网页的部分。这种方法的主要好处是它避免了完整页面张贴并刷新。这可以为用户提供比其他方式更平滑的经历。可能是最受欢迎的JavaScript库是 jquery.。它旨在为围绕复杂的JavaScript功能提供易于使用的包装器,这使得初学者来说比较容易,以创造很少的JavaScript知识。事实上,jquery是如此令人印象深刻 微软抛弃了自己的客户端JavaScript库 赞成支持jquery。

如果您不是Web开发的新手,请为不建议您跳过前一段而道歉......

目前,如果您使用Visual Web开发人员或Visual Studio,jQuery是新MVC或Web表单应用程序的模板的一部分。脚本文件夹已自动生成并填充各种JavaScript文件,包括jQuery核心库和验证库的版本。 Beta版本的WebMatrix不包括这方面,即使需要jQuery才能利用WebGrid帮助程序提供的Ajax排序和分页。这是否将在未来的释放中改变,目前不知道(我至少是......)。因此,如果您正在阅读本文的同时播放,则需要自己获取jQuery文件(尽管它们在本文末尾提供的下载中提供)。

您需要的第一个文件是最新的jQuery库,然后您需要导航到 UI下载部分网站。如果没有太多的方式,请选择所有UI核心部件,然后从“交互”部分中选择“可拖动”,然后从“窗口小部件”按钮,对话框和DatePicker。最后,从效果部分中选择突出显示,这将确保为您自动选择核心。我将主题放在默认的UI光线上,尽管您可以选择您喜欢的任何亮度。单击下载后,您可以获得一个小包,其中包括所选主题和组件的自定义JS文件和CSS。

现在到了样本。正如我之前提到的那样,这个例子只是展示了如何将记录插入数据库中。数据库本身是我为以前文章构建的书籍数据库。为了保持简单的事情,我将只关注核心部分"application"为了说明如何完成操作,没有任何实际验证或错误处理。我们可以随时了解在其他时间提升页面。首先,我将简单概述该样本如何工作。

示例的主要部分是一个名为default.cshtml的单个页面,其中包含用于添加书籍的数据输入表单,以及显示当前数据的网格。一个按钮将在模态对话框中调用表单,当表单填写并提交时,网格将刷新以显示数据页面顶部的新书条目。网格本身是从名为bookgrid.chtml的第二个文件生成的,该文件包含在default.cshtml中使用renderpage()方法 这里。为了方便起见,还将进入数据库中的进入数据库中的方法。

以下是Default.cshtml中数据输入表单的代码:

    <div id="dialog-form-add" title="Add New Book">
    <form id="add-book-form" action="@Href("~/Methods/AddBook")">
         <div class="row">
                <span class="label"><label for="title">Title:</label></span>
                <input type="text" name="title" id="title" size="50" />
            </div>
            <div class="row">
                <span class="label"><label for="isbn">ISBN:</label></span>
                <input type="text" name="isbn" id="isbn" size="20" />
            </div>
            <div class="row">
                <span class="label"><label for="description">Description:</label></span>
                <textarea cols="50" rows="8" name="description" id="description"></textarea>
            </div>
            <div class="row">
                <span class="label"><label for="authorId">Author:</label></span>
                <select name="authorId" id="authorId">
                    <option value="">-- Select Author --</option>
                @{
                    foreach(var author in authors){
                        if(author.AuthorId == Request["authorId"].AsInt()){
                            <option value="@author.AuthorId" selected="selected">@author.AuthorName</option>
                        } else {
                            <option value="@author.AuthorId">@author.AuthorName</option>
                        }
                    }
                }
                </select>
            </div>
            <div class="row">
                <span class="label"><label for="categoryId">Category:</label></span>
                <select name="categoryId" id="categoryId">
                    <option value="">-- Select Category --</option>
                @{
                    foreach(var category in categories){
                        if(category.CategoryId == Request["categoryId"].AsInt()){
                            <option value="@category.CategoryId" selected="selected">@category.Category</option>
                        } else {
                            <option value="@category.CategoryId">@category.Category</option>
                        }        
                    }
                }
                </select>
            </div>
            <div class="row">
                <span class="label"><label for="datePublished">Date Published:</label></span>
                <input type="text" id="datePublished" name="datePublished" />
            </div>    
        </form>
    </div>

此表格几乎与我生产的基本数据输入表单相同 上一篇关于在WebMatrix中添加和编辑数据的文章。有三个差异 - 表单指向不同URL的动作属性 /方法/ addbook,表格被包裹在DIV中。最后,表单已经给出了一个id,以便可以使用jQuery轻松引用它。在页面顶部,添加了一些代码,其中获取数据库的数据以填充作者和类别的下拉列表:

@{
    if(IsPost){
        var db = Database.Open("Books");
        var sql = "INSERT INTO Books (Title, ISBN, Description, AuthorId, CategoryId, DatePublished) " + 
            "VALUES (@0, @1, @2, @3, @4, @5)";
        var title= Request["title"];
        var isbn = Request["isbn"];
        var description = Request["description"];
        var authorId = Request["authorId"];
        var categoryId = Request["categoryId"];
        var datePublished = Request["datePublished"];
        db.Execute(sql, title, isbn, description, authorId, categoryId, datePublished);
    }
}

接下来,需要一些代码来检索网格的数据,并生成HTML。这是一个名为bookgrid.chtml的文件,并放在名为partials的文件夹中:

@{
    var db = Database.Open("Books");
    var books = db.Query("SELECT BookId, Title, ISBN, Description, " +
        "FirstName + ' ' + LastName AS AuthorName, Category " +
        "FROM Books INNER JOIN Authors ON Books.AuthorId = Authors.AuthorId " +
        "INNER JOIN Categories ON Books.CategoryId = Categories.CategoryId ORDER BY BookId DESC");
    var 网格 = new WebGrid.(books, ajaxupdatecontainerid.: "网格");                    
}
@网格.GetHtml(tableStyle: "ui-widget ui-widget-content",
                    headerStyle: "ui-widget-header",
                    columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("AuthorName",
                                    header: "Author"),
                    grid.Column("Category"),
                    grid.Column("ISBN")
                )
    )

你应该注意几件事。首先,网格是jaxied的 ajaxupdatecontainerid. 属性在构造函数中指定。更多关于这个和这个 这里可以在这里找到WebGrid Helper本身。其次,表和标题样式已从jQuery主题CSS获取。你会看到它的看起来有点稍后。但本质上,所有这些文件都是呈现HTML<table>使用数据。此文件需要从Default.cshtml文件中引用。

<div id="网格" class="ui-widget">
    @RenderPage("~/Partials/BookGrid.cshtml")
</div>
    
<p><button id="add-book">Add New Book</button></p>

如果您立即运行该页面,它将看起来一团糟。我们需要引用一些CSS文件和jQuery文件,然后使用jQuery来工作一些魔法。首先,在Default.cshtml的头部区域中,添加:

<title>Manage Books</title>
<link type="text/css" href="@Href("~/Styles/jquery-ui-1.8.4.custom.css")" rel="stylesheet" />
<link type="text/css" href="@Href("~/Styles/StyleSheet.css")" rel="stylesheet" />
<script type="text/javascript" src="@Href("~/Scripts/jquery-1.4.2.min.js")"></script>
<script type="text/javascript" src="@Href("~/Scripts/jquery-ui-1.8.4.custom.min.js")"></script>

现在到了jQuery的主要大部分。所有代码都出现在这里,然后是解释它

$(function () {
    $('#dialog-form-add').dialog({
        autoOpen: false,
        modal: true,
        height: 425,
        width: 475,
        buttons: {
            'Add Book': function () {
                $.ajax({
                    type: "POST",
                    url: $("#add-book-form").attr('action'),
                    data: $("#add-book-form").serialize(),
                    dataType: "text/plain",
                    success: function (response) {
                        $('#dialog-form-add').dialog('close');
                        $("#grid").load('/Default/ #grid', function () {
                            $('tbody > tr:first')
                        .effect("highlight", {}, 2000);
                        });
                    },
                    error: function (response) {
                        alert(response);
                        $('#dialog-form').dialog('close');
                    }
                });
            },
            Cancel: function () {
                $('#dialog-form-add').dialog('close');
            }
        }
    });
    $('#datePublished').datepicker({ dateFormat: 'yy-mm-dd' });


    $('#add-book')
    .button().click(function () {
        $('#dialog-form-add').dialog('open');
    });
});

代码的第一部分从对话框形式div的内容创建模态对话框。当请求页面时,这使其隐藏在视图中。某些选项是根据生成的模态对话框的高度和宽度设置的选项,以及一个说明表单自动打开的参数。然后添加模态表单上的按钮。一个被称为添加书籍,然后单击“,jQuery用于序列化表单的内容并异步发布到方法/添加BookURL。此URL实际上在一个名为方法的文件夹中解析为称为addbook.chtml的文件。我们会看看后来做了什么。如果此Ajax呼叫成功,则幻像形式已关闭,并且具有ID的DIV"grid"仅加载了由于异步请求Default.cshtml文件而获得的正确的HTML。 jQuery突出显示效果适用于新添加的书籍。取消按钮只是有线,以确保模态表单关闭。

jquery.只有两个剩余的作业。一个是将jQuery DatePicker应用于日期已发布的输入,以便可以控制此框中输入数据的格式。最后,添加书按钮给出了一点jQuery改造,看起来很好,然后再点击活动有线打开模态表单。真的很简单。

这就是页面如何在第一个请求中查找:

 

单击“添加新建”键按钮时,将出现模态表单:

最后,当单击“添加预订”按钮时,请求PROFER / AddBook.cshtml文件以Request.form集合中传递的表单值

@{
    if(IsPost){
        var db = Database.Open("Books");
        var sql = @"INSERT INTO Books (Title, ISBN, Description, AuthorId, CategoryId, DatePublished) 
                    VALUES (@0, @1, @2, @3, @4, @5)";
        var title= Request["title"];
        var isbn = Request["isbn"];
        var description = Request["description"];
        var authorId = Request["authorId"];
        var categoryId = Request["categoryId"];
        var datePublished = Request["datePublished"];
        db.Execute(sql, title, isbn, description, authorId, categoryId, datePublished);
    }
}

此代码检查以确保将其作为帖子请求,然后搜索Request.form集合以获取所需的值。获得了它们,它们将作为参数值传递到SQL中,该SQL将新书添加到数据库中。

就是这样。简单地完成了jquery形式。但是,正如我在文章开始的那样,在适当的应用程序中应该更加努力。例如,传递给addBook.chtml的值被验证,以确保它们是正确的类型和预期范围内。这应该在服务器上完成,以及用户方便,也应在jQuery表单本身内提供一些验证。在未来的文章中,我将更详细地专注于Web开发的这一方面。与此同时,随时可以尝试提供的代码 在这里下载.