将 WebGrid 单元格更改为文本框形式

Question

我有一个数据集，我需要在 Web 应用程序中显示它。这是数据集的样子：

Point_ID    Project No.    Project Manager    Comments
A007        1304           Oscar Duran        Found destroyed
A008        1304           Oscar Duran        Helicopter access
A009        1356           Julio Bravo        Airport parking lot

这是我的代码：

@{
var db = Database.Open("ControlPoints");                                            
var SelectCommand = "SELECT * FROM AllControlMergedWD";                       
var SearchTerm = "";                                                                

if(!Request.QueryString["SearchCP"].IsEmpty() ){                                    
    SelectCommand = "SELECT * FROM AllControlMergedWD WHERE Point_ID = @0";         
    SearchTerm = Request.QueryString["SearchCP"];                                   
}

if(!Request.QueryString["SearchProject"].IsEmpty() ){                               
    SelectCommand = "SELECT * FROM AllControlMergedWD WHERE [Project Used on] LIKE @0";
    SearchTerm = "%" + Request["SearchProject"] + "%";
}

var SelectData = db.Query(SelectCommand, SearchTerm);                               
var grid = new WebGrid(source: SelectData, rowsPerPage: 10);                        
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Airborne Imaging Control Points Database</title>

    <style type="text/css"> 
        .grid { margin: 4px; border-collapse: collapse; width: 600px; }
        .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
        .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
        .alt { background-color: #E8E8E8; color: #000; }                                  
    </style>

</head>
<body>
    <h1>Airborne Imaging Control Points Database</h1><br/><br/>                             
    <form method="get">
        <fieldset>                                                                  
            <legend>Search Criteria</legend>                                        
            <div>
                <p><label for="SearchCP">Control Point ID:</label>                   
                <input type="text" name="SearchCP" value="@Request.QueryString["SearchCP"]" placeholder="Leave blank to list all"/> 
                <input type="submit" value="Search"/></p>                               
            </div>
            <div>
                <p><label for="SearchProject">Project:</label>                          
                <input type="text" name="SearchProject" value="@Request.QueryString["SearchProject"]" />
                <input type="Submit" value="Search" /></p>
            </div>
        </fieldset>
    </form>
    <div>
        @grid.GetHtml(                                                          
            tableStyle: "grid",                                                 
            headerStyle: "head",                                                
            alternatingRowStyle: "alt",                                         
            columns: grid.Columns(
                grid.Column("Point_ID"),
                grid.Column("Project No."),
                grid.Column("Project Manager"),
                grid.Column("Comments", format: @<text>@Html.TextBox("Comments")</text>)
            )
        )
        <br/><br/>
    </div>
</body>
</html>

我一直在尝试做的是将 'Comments' 单元格转换为表单元素（文本框），以便任何有权访问该应用程序的人都能够添加评论、编辑或更新该应用程序的状态点的当前状态。你能帮我实现吗？

先谢谢你。

更新

我能够在 'Comments' 列中添加文本框字段（我已经更新了上面的代码）。现在我剩下的就是保存输入数据库的评论。

Answer 1

嘿奥斯卡，你让我给你一个答案...

我不以这种方式编码 asp.net 剃须刀。在我看来，您应该学习如何使用模型、视图和控制器对其进行编码。你在这里有一个非常糟糕的做法。一个文件里面什么都有，不好做。

但是为了具体回答您的问题...我将向您指出本教程，其中展示了如何使用 webgrid 执行您想要的操作。

http://www.dotnetfunda.com/articles/show/2727/using-webgrid-to-populate-data-as-gridview-in-aspnet-mvc-razorview

Answer 2

您可以指定 WebGrid 列的格式

<div>
    @grid.GetHtml(                                                          
        tableStyle: "grid",                                                 
        headerStyle: "head",                                                
        alternatingRowStyle: "alt",                                         
        columns: grid.Columns(
            grid.Column("Point_ID"),
            grid.Column("Project No."),
            grid.Column("Project Manager"),
            grid.Column("Comments", @<text>@Html.TextBox("Comments")</text>)
        )
    )
    <br/><br/>
</div>

Answer 3

我已经能够解决我的问题了。这是我对 WebGrid:

所做的修改

    <div>
        @grid.GetHtml(                                                                      
            tableStyle: "grid",                                                             
            headerStyle: "head",                                                            
            alternatingRowStyle: "alt",                                                     
            columns: grid.Columns(
                grid.Column("", format: @<text>
                    <button class="edit-comment display-mode" id="@item.Point_ID">Edit</button>         
                    <button class="save-comment edit-mode" id="@item.Point_ID">Save</button> </text>),
                grid.Column("Point_ID", "Point ID"),
                grid.Column("Project No.", "Project No"),
                grid.Column("Project Used on"),
                grid.Column("WGS84 Lat"),
                grid.Column("WGS84 Long"),
                grid.Column("Ellips_Ht"),
                grid.Column("Project Manager"),
                grid.Column("Comments", format: @<text>
                    <span id="comments" class="display-mode">@item.Comments</span>                              
                    @Html.TextBox("Comments", item.Comments, new {@class="edit-mode", size = 45}) </text>)      
            )
        )
        <br/><br/>
    </div>

如您所见，我添加了一个新列来容纳按钮，并在 Comments 列中添加了一个 span 和一个表单。接下来，我添加了以下脚本以在模式之间切换并向按钮添加事件：

    <script>
        $(function () {
            $('.edit-mode').hide();                                 
            $('.edit-comment').on('click', function () {            
                var tr = $(this).parents('tr:first');               
                tr.find('.edit-mode, .display-mode').toggle();      
            });
            $('.save-comment').on('click', function () {            
                var tr = $(this).parents('tr:first');               
                var point_ID = $(this).prop('id');                  
                var comments = tr.find('#Comments').val();          
                $.post(
                    '/EditComments',
                    { Point_ID: point_ID, Comments: comments },     
                    function (updatespan) {
                        tr.find('#comments').text(updatespan.Comments);   
                    }, "json");
                tr.find('.edit-mode, .display-mode').toggle();      
            });
        })
    </script>

最后，我创建了 EditComments，它会更新数据库并检索更新以供显示：

@{  
    var point_ID = Request["Point_ID"];                     
    var comments = Request["Comments"];                     
    var db = Database.Open("ControlPoints");                
    var sql = "UPDATE AllControlMergedND SET Comments = @0 WHERE Point_ID = @1";
    db.Execute(sql, comments, point_ID);                    

    sql = @"SELECT * FROM AllControlMergedND WHERE Point_ID = @0";
    var result = db.QuerySingle(sql, point_ID);             
    Json.Write(result, Response.Output);                    
}

感谢博客 post 我能做到这一切，我在以下内容中找到 link:

http://www.mikesdotnetting.com/article/202/inline-editing-with-the-webgrid

程序在博客中解释得很好。

将 WebGrid 单元格更改为文本框形式

Change WebGrid cell into textbox form

c#

razor

webgrid

asp.net-webpages