CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcrazor
joetinger
joetinger

Reputation: 2729

Dynamically Changing Table Data

I have an MVC Razor application and I'm trying to change a table's data based on a selectlist change.I found this article but the table data just gets deleted, nothing gets added (the table ends up empty). Any idea what I am doing wrong?

Razor

<div class="editor-field">
    <select class="filterby dropdown" id="OrderTypes">
        <option selected>Sales Orders</option>
        <option>Sample Orders</option>
    </select>
</div>

<table  id="OrderTable">
 <thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model[0].order_id)</th>
        <th>@Html.DisplayNameFor(model => model[0].order_number)</th>
        <th>@Html.DisplayNameFor(model => model[0].Sell_to_Customer_No)</th>
        <th>@Html.DisplayNameFor(model => model[0].Ship_to_Code)</th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model) {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.order_id)</td>
            <td>@Html.DisplayFor(modelItem => item.order_number)</td>
            <td>@Html.DisplayFor(modelItem => item.Sell_to_Customer_No)</td>
            <td>@Html.DisplayFor(modelItem => item.Ship_to_Code)</td>
            <td>@Html.ActionLink("Edit", "orderEdit", new { id = item.order_id }) </td>
        </tr>
    }
</tbody>

Controller Ajax function

 public ActionResult ChangeOrders(string ordertype)
 {
    List<SalesOrderModel> orders = _repository.getOrders(ordertype);

    return Json(orders);
 }

JQuery

$('#OrderTypes').on('change', function () {
    //gets the orders (sales or samples)
    $.post(url, { ordertype: $ordertype.val() }, function (results) {
        $('#OrderTable').children('tbody').html(results);
    });
});

I added the code below to my JQuery and confirmed the results are being returned successfully

$.each(results, function (k,v) {
    alert(v.order_number);
});

Upvotes: 0

Views: 206

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

You are directly appending json object in html of table. You have to iterate on json result and generate html in js:

var html;
$.each(results, function (k,v) {
alert(v.order_number);
     html+= "<tr>
        <td>" + v.order_id +"</td>
        <td>"+v.order_number+"</td>
        <td>"+v.Sell_to_Customer_No+"</td>
        <td>"+v.Ship_to_Code+"</td>

    </tr>";
  });
$('#OrderTable').find('tbody').html(html);

Upvotes: 2

Related Questions