Question

我有一个MVC Razor应用程序，我试图根据选择列表更改来更改表格数据。我找到了this文章，但表格数据刚刚删除，没有添加任何内容（该表最终为空）。知道我做错了吗？

剃刀

<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>

控制器Ajax功能

 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);
    });
});

我将以下代码添加到我的JQuery中并确认结果已成功返回

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

Answer 1

您直接在表的html中附加json对象。你必须迭代json结果并在js：

中生成html

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);

动态更改表数据

1 个答案: