I have a dataset and I'm required to display it in a Web Application. Here is what the dataset looks like:
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
Here is what I have for my code:
@{
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>
What I have been trying to do is turning the 'Comments' cells into form elements (text box), so that anybody with access to the Application will be able to add comments, edit or update statuses of the current condition of the points. Could you please help me achieving that?
Thank you beforehand.
UPDATE
I was able to add the text box field in the 'Comments' column (I have updated my code above). Now what I have left is saving the comments that are entered into the database.
I have been able to solve my problem. Here is the modifications I have made to my 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>
As you can see, I added a new column to hold the buttons, and to the Comments column I added a span and a form. Next, I added the following script to toggle between modes and add events to the buttons:
<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>
Finally, I created EditComments, which updates the database and retrieves back the update for display:
@{
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);
}
All of this I was able to do thanks to a blog post I found in the following link:
http://www.mikesdotnetting.com/article/202/inline-editing-with-the-webgrid
The procedures are very well explained in the blog.