Question

我正在使用Jquery / Ajax根据级联下拉列表返回数据。选择select1时，它将填充select2。该功能似乎运行良好，但为select2返回的数据是重复的第一行的值x返回的行数的次数。为什么会这样？

DBContext：

public class FulfillmentContext : DbContext
{
    public FulfillmentContext()
        : base("name=FulfillmentContext")
    {
    }

    public virtual DbSet<Carrier> Carriers { get; set; }
    public virtual DbSet<Fulfillment> Fulfillments { get; set; }
    public virtual DbSet<CarrierService> CarrierServices { get; set; }
}

控制器：

public class FulfillmentController : Controller
{
FulfillmentContext db = new FulfillmentContext();

//GET Fulfillment
public ActionResult Index()
{
    return View();
}

public JsonResult GetCarriers()
{
    return Json(db.Carriers.ToList(), JsonRequestBehavior.AllowGet);
}

public JsonResult GetServicesByCarrierId(string carrierId)
{
    int Id = Convert.ToInt32(carrierId);

    try
    {
        var services = db.CarrierServices.Where(s => s.CarrierId == Id).ToList();

        return Json(services);
    }
    catch (Exception e)
    {
        Debug.WriteLine("ERROR: " + e.Message);
        throw;
    }                        
}      
}

查看：

<div class="panel panel-primary">
<div class="panel-heading">REPORT OPTIONS</div>
<div class="panel-body" style="padding-left:35px;">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.Label("Carrier:")
@Html.DropDownList("carriers", new SelectList(string.Empty, "Value", "Text"), "Select a Carrier", new { @class = "form-control", @style = "width: auto; margin: 0 0 25px 0;" })

@Html.Label("Carrier Services:")
@Html.DropDownList("services", new SelectList(string.Empty, "Value", "Text"), "Select a Service", new { @class = "form-control", @style = "width: auto; margin: 0 0 25px 0;" })
</div>
}
</div>
</div>
</div>
@section scripts{
<script src="~/assets/scripts/form-plugin.js"></script>
<script>
$(function () {
$.ajax({
type: "GET",
url: "/Fulfillment/GetCarriers",
datatype: "Json",
success: function (data) {
    $.each(data, function (index, value) {
        $('#carriers').append('<option value="' + value.CarrierId + '">' + value.CarrierName + '</option>');
    });
}
});

$('#carriers').change(function () {

$('#services').empty();

$.ajax({
    type: "POST",
    url: "/Fulfillment/GetServicesByCarrierId",
    datatype: "Json",
    data: { CarrierId: $('#carriers').val() },
    success: function (data) {
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });
    }
});
});

});
}

CONSOLE.LOG（数据）

(7) […]

0: {…}

CarrierId: 1

Code: "1DM"

Description: "UPS Next Day Air® Early"

SortOrder: 2

WebName: "UPS Next Air Early"

<prototype>: Object { … }

1: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

2: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

3: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

4: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

5: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

6: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }

length: 7

Answer 1

在使用$('#services').empty()从Ajax数据附加数据之前，您需要清除选择标记。

success: function (data) {
        $('#services').empty();
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });

脚本更改为：

$(function () {
$.ajax({
type: "GET",
url: "/Fulfillment/GetCarriers",
datatype: "Json",
success: function (data) {
    $.each(data, function (index, value) {
        $('#carriers').empty();
        $('#carriers').append('<option value="' + value.CarrierId + '">' + value.CarrierName + '</option>');
    });
}
});

$('#carriers').change(function () {

$('#services').empty();

$.ajax({
    type: "POST",
    url: "/Fulfillment/GetServicesByCarrierId",
    datatype: "Json",
    data: { CarrierId: $('#carriers').val() },
    success: function (data) {
        $('#services').empty();
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });
    }
});
});

});
}

使用JQuery / Ajax返回数据的Cascading Dropdown重复第一个表行

1 个答案: