Question

我已经进行了广泛的搜索，以获得一些指导，我有一个下拉列表：

    <div class="form-group-sm">
        @Html.LabelFor(model => model.CustomerId, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.CustomerId, new SelectList(ViewBag.CustomerList, "Value", "Text"), new { @class = "form-control", id = "CustomerId" })
            @*<input id="test" type="text" />*@
            @Html.ValidationMessageFor(model => model.CustomerId, "", new { @class = "text-danger" })
        </div>
    </div>

...级联到此下拉列表：

<div class="form-group-sm">
    @Html.LabelFor(model => model.ShipToId, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10">
        <select id="ShipToId" name="ShipToId" class="form-control"></select>
        @Html.ValidationMessageFor(model => model.ShipToId, "", new { @class = "text-danger" })
    </div>
</div>

我需要从上面获取ShipToId并获取以下文本框的字段（我不会在这里列出所有这些字段，但有一些指导我可以弄清楚如何填充多个字段）：

<div class="form-group-sm">
    @Html.LabelFor(model => model.Address1, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10">
        @Html.EditorFor(model => model.Address1, new { htmlAttributes = new { @class = "form-control", id = "Address1" } })
        @Html.ValidationMessageFor(model => model.Address1, "", new { @class = "text-danger" })
    </div>
</div>

我有以下JQuery，它为CustomerId和ShipToId填充我的级联下拉列表：

$(document).ready(function () {
    $.getJSON('/Order/GetCustomerIds/' + $('#CustomerId option:selected').val(), function (data) {
        var items = '<option value="">Select ShipTo</option>';
        $.each(data, function (i, ShipToIdSelectList) {
            items += "<option value='" + ShipToIdSelectList.Value + "'>" + ShipToIdSelectList.Text + "</option>";
        });
        $("#ShipToId").html(items);
        //$(function () {
        //    $("#State").val(StateCode);
        //})
    })
})

$('#CustomerId').change(function () {
    $.getJSON('/Order/GetCustomerIds/' + $('#CustomerId').val(), function (data) {
        var items = '<option>Select ShipTo</option>';
        $.each(data, function (i, ShipToIdSelectList) {
            items += "<option value='" + ShipToIdSelectList.Value + "'>" + ShipToIdSelectList.Text + "</option>";
        });
        $("#ShipToId").html(items);
    })
})

级联工作正常。我还有一个方法可以使用ShipToId并返回一个包含我需要的字段的列表：

    var sta = (from o in db.Ord
               join s in db.ShipTo on o.ShipToId equals s.ShipToId
               where o.CompanyId == CurrentCompanyId && s.CustomerId == id
               select new
               {
                   ShipToId = o.ShipToId,
                   Name = s.Name,
                   Address1 = s.Address1,
                   Address2 = s.Address2,
                   Address3 = s.Address3,
                   Address4 = s.Address4,
                   City = s.City,
                   County = s.County,
                   Country = s.CountryCode,
                   State = s.StateCode,
                   PostalCode = s.PostalCode

               }).Distinct().ToList();

结果：

[0] = { ShipToId = "1~0", Name = "Big Head Productions", Address1 = null, Address2 = null, Address3 = null, Address4 = null, City = "Boonville", County = "...", Country = "US", State = "..." ... }

我有我需要的信息我不知道如何使用JQuery填写正确的文本框。我不知道使用Angular或Knockout等框架可能会更容易。有什么建议吗？

Answer 1

在我看来，您需要为#ShipToId下拉列表另外更改一次。

在更改时调用另一种获取送货信息的方法。这也意味着你第一次不需要返回所有的运输信息，只需要建立下拉列表所需的信息。所以，如果有人有一个＆＃34; Home＆＃34;和＃34;工作＆＃34;地址，您只需返回ID和说明以填充下拉菜单，然后使用该ID检索送货信息。

如果您希望在加载时填充运费信息，那就取决于您，就好像您正在进行前两次下降。

asp.net mvc 5 Jquery级联下拉列表填充文本框

1 个答案: