inline editing table / grid for for MVC - asp.net-mvc

Question

What is the easiest way to create a table where users can edit data directly (excel like) with minimum effort?
There are a lot of libraries and custom control but I am looking for something that is easy to implement and does not require a lot of coding.

Answer 1

In the controller create method for adding where you pass the parameter to with GET:
public bool EditData(int pkId, int statusID, string Comments)
{
// logic to edit
}
In your view add a table of data with your controls add the primary key to the ID of the control so that you can use it in jquery
<table class="table">
<tr>
<th>Status</th>
<th>Comments</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr class="searchable">
<td>
#Html.DropDownList("StatusID" + #Html.DisplayFor(modelItem => item.pkID), new SelectList(ViewBag.Status, "StatusID", "StatusTitle", item.StatusID), htmlAttributes: new { #class = "form-control", style = "width:100px" })
</td>
<td>
<textarea id="Comments_#Html.DisplayFor(modelItem => item.pkID)" rows="5" cols="20">#Html.DisplayFor(modelItem => item.Comments)</textarea>
</td>
<td>
<input type="button" class="btn btn-default" value="save" onclick='updateData("#Html.DisplayFor(modelItem => item.pkID)" )' />
</td>
</tr>
}
</table>
In the javascript add a call to the the edit method
function updateData(pkID) {
// the id of the drop down list is AssetEffectiveness + effectivnessid
var Status = $("#StatusID" + pkID).val();
var Comments= $("#Comments_" + pkID).val();
$.ajax({
url: "YOU_CONTROLLER_URL/EditData?pkId=" + pkID + "&statusID=" + Status + "&Comments=" + Comments,
cache: false
})
.done(function (data) {
if (data == 'True') {
// change bg of the tr
$("#Commects_" + pkID).closest('tr').css('background-color', '#eeffee');
// animate to indicate the save
$("#Commects_" + pkID).closest('tr').fadeOut(500).fadeIn(500);
// return color back after 2 seconds
setTimeout(function () { $("#Commects_" + pkID).closest('tr').css('background-color', ''); }, 1000);
}
else {
alert('not saved');
$("#Commects_" + pkID).closest('tr').css('background-color', '#ffcccc');
}
});
}