i have html table , want when user clicks on count cell, data row updated in database , result updated in row. want update row , not whole page. have far:
view (the view contains partial view represents row:
<table class="table table-striped table-bordered table-condensed table-hover"> <tbody> @foreach (var item in model) { <div class="@item.productid"> @html.partial("tabletransactionstablerow", item) </div> } @if (!string.isnullorempty(log.opmerking)) { <tr> <td></td> <td>@log.opmerking</td> <td></td> </tr> } </tbody> </table> model:
public class transaction { private int productid { get; set; } private int count { get; set; } private string description { get; set; } private decimal total { get; set; } } partial view (tabletransactionrow):
@model transaction <tr> <td class="text-right" style="width: 20%;"> <a class="countclick" href="@url.action("updateproductcount", "tables", new { productid = model.productid, count = -1 })"> <div> @model.count </div> </a> </td> <td> <a href="@url.action("updateproductcount", "tables", new { productid = model.productid, count = 1 })"> <div> @model.description </div> </a> </td> <td class="text-right" style="width: 20%;">@model.total</td> </tr> ajax script:
$(document).ready(function () { $('.countclick').click(function () { var productid = getparameterbyname('productid', $(this).attr("href")); var id = "#" + productid; $.ajax({ cache: false, url: $(this).attr("href"), // used data url datatype: "text", type: "post", success: function (data) { $(id).html(data); }, error: function () { $(id).html("error"); } }); return false; }); }); the tablescontroller:
public actionresult updateproductcount(int? productid, int? count) { if (productid.hasvalue) { transaction t = new transaction(); t.count += count.value; t.total= t.count * t.price; //save transaction database , return partial view return partialview("tabletransactionstablerow", t); } return redirecttoaction(mvcitems.tabletransactions); } how can update values in cells without refreshing whole table? appreciated.
after thinking while have solved problem. used this answer base of solution. return json object of transaction controller ajax jquery. have removed partialview , used html row within main view. have set id's div of count , total div element. when return json object view update values using element.innertext.
controller:
public actionresult updateproductcount(int? productid, int? count) { if (productid.hasvalue) { transaction t = new transaction(); t.count += count.value; t.total= t.count * t.price; if (transaction == null) return json(t, jsonrequestbehavior.allowget); } jquery:
$(document).ready(function () { $('.countclick').click(function () { var productid = getparameterbyname('productid', $(this).attr("href")); var countid = "count" + productid; var totalid = "total" + productid; var countelement = document.getelementbyid(countid); var totalelement = document.getelementbyid(totalid); var rowelement = document.getelementbyid(productid); $.ajax({ cache: false, url: $(this).attr("href"), // used data url datatype: "text", type: "post", success: function (response) { var count = parseint(response.count); if (count > 0) { countelement.innertext = response.count; totalelement.innertext = response.total; } else { rowelement.innerhtml = ""; } }, error: function () { $("#divresult").html("error"); } }); return false; }); }); hope helps else in future.
Comments
Post a Comment