asp.net mvc - inline editing table / grid for for MVC -
what easiest way create table users can edit data directly (excel like) minimum effort?
there lot of libraries , custom control looking easy implement , not require lot of coding.
in controller create method adding pass parameter get:
public bool editdata(int pkid, int statusid, string comments) { // logic edit }
in view add table of data controls add primary key id of control can use 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 javascript add call the edit method
function updatedata(pkid) { // id of drop down list 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 tr $("#commects_" + pkid).closest('tr').css('background-color', '#eeffee'); // animate indicate save $("#commects_" + pkid).closest('tr').fadeout(500).fadein(500); // return color 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'); } }); }
Comments
Post a Comment