Question

有一个View表，在用户选择那一天时显示特定日期类型的List的静态元素，或者当Model为空时不显示任何内容。我之前更改了单个唯一字段的值，但从未更改过模型列表的字段。在搜索SO时，我没有找到问题解决这个确切的情况，但一些相关的问题建议使用序列化。我已经尝试引用List名称并使用/将其设置为等于返回的数据来填充它，但无济于事。此外，ActionResult没有错误，因此问题可能在于AJAX将返回值分配给List字段。有没有办法做到这一点？

HTML：

<div class="row">
    <div class="col-lg-8">
        @Html.LabelFor(m => m.PriceDate, "Pricing Date")
        @Html.DropDownListFor(m => m.PriceDate, Model.PricingDates, "--New Pricing--")
    </div>
</div>
<div class="row">
<table id="dt_terms" class="table table-striped">
    <tbody>
        <tr><th></th><th class="text-center">ID</th><th class="text-center">Price</th><th class="text-center">Adder Fee</th></tr>
        @if (Model.Prices.Any()) //NEEDS POPULATING!
        {
            for (var i = 0; i < 100; i++)
            {
                <tr>
                    <td><input type="submit" class="btn btn-info" id="priceToOffer" value="Add To Offers"></td>
                    <td class="text-center">@Html.DisplayFor(m => m.Prices[i].ID)</td>
                    <td class="text-center">@Html.TextBoxFor(m => m.Prices[i].Price, new { @class = "form-control", data_parsley_required = "true" })</td>
                    <td class="text-center">@Html.DisplayFor(m => m.Prices[i].AdderFee)</td>
                </tr>
            }
        }
    </tbody>
</table>

脚本：

$(function () {
    $("#PriceDate").change(function () {
        var $priceTable = $("#dt_terms"),
            $priceValue = $("#PriceDate").val(),
            $pID = { iD: $priceValue };
        if ($(this).val()) {
            //make AJAX call for historical Price data and populate table
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetPrices", "Sales")',
                data: $pID,
                success: function (data) {
                    //Fill data
                    $("#Prices").val(data);
                }
            });
            $priceTable.prop("disabled", true);
        }
        else {
            //clear data
            $("#Prices").val('');
            $priceTable.prop("disabled", false);
        }
    }).change();
});

控制器：

public ActionResult GetPrices(string iD)
{
    int priceID;
    Int32.TryParse(iD, out priceID);
    //priceID = iD;

    dbEntities db = new dbEntities();
    var selectedPrice = new List<PricesModel>();
    var accountPrices = db.uspGetPrices(priceID);
    foreach (var result in accountPrices)
    {
        var price = new PricesModel
        {
            ID = result.PriceID,
            Price = result.Price,
            AdderFee = result.AdderFee,
        };
        selectedPrice.Add(price);
    }

    return Json(selectedPrice, JsonRequestBehavior.AllowGet);
}

生成的HTML：

<div class="row">
    <div class="col-lg-8">
        <label for="PriceDate">Pricing Date</label>
        <select data-val="true" data-val-number="The field PriceDate must be a number." data-val-required="The PriceDate field is required." id="PriceDate" name="PriceDate"><option value="">--New Pricing--</option>
<option value="2">1/4/2016 6:33 PM</option>
</select>
    </div>
</div>
<div class="row">
    <table id="dt_terms" class="table table-striped">
        <tbody>
            <tr><th></th><th class="text-center">ID</th><th class="text-center">Price</th><th class="text-center">Adder Fee</th></tr>
        </tbody>
    </table>
</div>

Answer 1

这是服务器端代码：

@if (Model.Prices.Any()) //NEEDS POPULATING!

当页面在客户端上呈现时，该代码在完成后很长时间并且不再执行。在您的AJAX响应处理程序中，您需要使用新数据填充客户端标记。

那是什么数据？它是一个全新的数据集吗？在这种情况下，您可能只是从表中删除行并添加新行。像这样：

success: function (data) {
    $('#dt_terms tbody tr').remove();

    for (var i = 0; i < data.length; i++) {
        var row = $('<tr></tr>');

        var idCell = $('<td></td>').append($('<input type="submit" class="btn btn-info" id="priceToOffer" value="Add To Offers">'));
        row.append(idCell);

        // continue for other cells in the table

        $('#dt_terms tbody').append(row);
    }
}

这个想法是你用新数据重新构建标记，类似于服务器端代码首先构建标记。

您可能会注意到这会将某些标记结构复制到jQuery代码中。随着系统变得越来越复杂并且这种情况继续发生，您可能需要研究一个客户端框架，例如AngularJS，它允许您定义视图并将模型绑定到它们，类似于服务器端代码。

在类似的情况下，你基本上会做一些与你最初尝试的非常相似的：

$("#Prices").val(data);

语法当然会有所不同，所做内容的基本原理会有所不同（更新内存对象而不是DOM元素的值），但语义上它似乎可能更直观地了解您最初想要解决的问题。它将更新视图绑定的对象，并且视图将自动更新。

如果客户端代码中没有这样的MVC或MVVM框架，那么您将使用jQuery手动更新表。在这样的小案件中，这并不可怕。

通过AJAX Get填充显示迭代表

1 个答案: