我有一个数据集，我需要在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>
我一直在尝试将“注释”单元格转换为表单元素（文本框），以便任何有权访问应用程序的人都能够添加注释，编辑或更新当前条件的状态。点。你能帮助我实现这个目标吗？
事先谢谢你。
更新
我能够在“评论”栏中添加文本框字段（我已更新上面的代码）。现在我剩下的就是保存输入数据库的注释。
答案 0 :(得分：1)
您可以指定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>
答案 1 :(得分：0)
嗨，奥斯卡，你让我给你一个答案......
我不用这种方式编写asp.net razor代码。在我看来，你应该学习如何使用模型，视图和控制器对其进行编码。你在这里有一个非常糟糕的做法。包含所有内容的一个文件并不好。
但要具体回答你的问题......我将指出你的教程，该教程展示了如何用webgrid做你想做的事。
答案 2 :(得分：0)
我能够解决我的问题。以下是我对 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);
}
所有这一切都归功于我在以下链接中找到的博客文章：
http://www.mikesdotnetting.com/article/202/inline-editing-with-the-webgrid
这些程序在博客中得到了很好的解释。