在razor webgrid中添加一个新行

Razor WebGrid不仅用于显示数据。我已经查看了如何在WebGrid中编辑数据内联,因此本文介绍如何添加新的数据行。在呈现网格中。

这篇文章的遵循 用webgrid内联编辑 我之前发布的帖子,因为它为用户提供了一种方法来添加新记录而不留下WebGrid的范围。该解决方案共享其他相似性,因为它依赖于jQuery。这是webgrid。它从书籍数据库中获取数据,并显示未启用分页或排序的数据库:

@{
   var db = Database.Open("Books");
   var commandText = string.Empty;
   if(IsPost){
       commandText = @"INSERT INTO Books (Title, ISBN, AuthorId, CategoryId, Price) VALUES (@0, @1, @2, @3, @4)";
       var title= Request["title"];
       var isbn = Request["isbn"];
       var authorId = Request["authorId"];
       var categoryId = Request["categoryId"];
       var price = Request["price"];
       db.Execute(commandText, title, isbn, authorId, categoryId, price);
   }
   commandText = @"SELECT Title, ISBN, FirstName + ' ' + LastName As Author, Category, Price 
                 FROM Books
                 INNER JOIN Authors ON Books.AuthorId = Authors.AuthorId
                 INNER JOIN Categories ON Books.CategoryId = Categories.CategoryId";
   var books = db.Query(commandText);
   var grid = new WebGrid.(books, canPage: false, canSort:false);
}
<form method="post">
    @grid.GetHtml(columns: grid.Columns(grid.Column("Title", style: "title"),
                                        grid.Column("ISBN", style: "isbn"),
                                        grid.Column("Author", style: "author"),
                                        grid.Column("Category", style: "category"),
                                        grid.Column("Price", style: "price", format: @<text>@item.Price.ToString("c")</text>)))
</form>
<button id="add">Add</button>

有两件事要发表评论。首先,网格以形式包裹。其次,如果表单发布,则存在一块代码。它将新记录插入数据库中。但是,目前没有表格字段。点击添加按钮时,这些代码由某些jQuery代码添加:

@section script{
<script type="text/javascript">
    $(function () {
        $('#add').on('click', function () {
            $('table').append('<tr>' +
                    '<td><input name=\'title\' id=\'title\' /></td>' +
                    '<td><input name=\'isbn\' id=\'isbn\' /></td>' +
                    '<td><select name=\'authorId\' id=\'authorId\'></select></td>' +
                    '<td><select name=\'categoryId\' id=\'categoryId\'></select></td>' +
                    '<td><input name=\'price\' id=\'price\' /></td>' +
                    '</tr><tr><td colspan=\'5\'><button>Save</button></td>');
             $.getJSON('/GetData/Authors', function (authors) {
                $('#authorId').append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Select Author --'));
                $.each(authors, function (index, author) {
                    $('#authorId').append(
                        $('<option/>')
                            .attr('value', author.AuthorId)
                            .text(author.Author)
                    );
                });
            });
             $.getJSON('/GetData/Categories', function (categories) {
                $('#categoryId').append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Select Category --'));
                $.each(categories, function (index, category) {
                    $('#categoryId').append(
                        $('<option/>')
                            .attr('value', category.CategoryId)
                            .text(category.Category)
                    );
                });
            });
            $('#add').hide();
        });
    });
</script>
}

单击“添加”按钮时,将添加额外的行为WebGrid生成的表。它由一个输入和下拉列表集成。由于这将添加到表中,因此它成为表单的一部分。还提供了一个保存按钮,隐藏添加按钮,以便用户无法创建多行。

WebGrid. Row.

下拉列表由Ajax请求填充,该请求从专门为此目的设计的文件中获取JSON:

@{
    Layout = null;
    Response.ContentType = "application/json";
    var db = Database.Open("Books");
    var commandText = "";
    switch (UrlData[0]){
        case "Authors":
            commandText = @"SELECT AuthorId, FirstName + ' ' + LastName As Author FROM Authors";
            break;
        case "Categories":
            commandText = @"SELECT CategoryId, Category FROM Categories";
            break;
    }
     var data = db.Query(commandText);
    Json.Write(data, Response.Output); 
}

布局设置为NULL,以防止任何额外的HTML干扰响应,并且响应的内容类型设置为 应用/ JSON.。取决于传入的值 UIRLDATA [0] (Ajax请求URL的最后一段),SQL设置为检索作者或类别。然后使用JSON帮助程序将生成的数据转换为JSON并发送到浏览器。

现在所有用户都必须做的就是填写表单中的一些数据,然后单击“保存”按钮。当前代码缺少任何类型的输入验证,但这不是本文的重点。如果您想了解有关如何验证表单字段的更多信息,可以参考 剃须刀网页2中的验证。 否则,本文已经显示了扩展剃刀WebGrid以包括通过它添加新数据的能力的简单方法。