MVC 4 - 级联下拉列表 - 问题与阿贾克斯的JavaScript调用 [英] MVC 4 - Cascading Dropdown Lists - Issue with Ajax JavaScript Call

问题描述

我有一个MVC 4应用程序包含两个下拉列表视图。用户选择第一个下拉的值，然后一个Ajax调用是由基于第一的内容来填充第二个下拉。

我的JavaScript code如下所示，当用户在第一个下拉列表中选择一个项目被调用：

 函数GetAutoModel（_manufacturerId）{    VAR autoSellerListingId =的document.getElementById（AutoSellerListingId）值。    $阿贾克斯（{
        网址：/ AutoSellerListing / GetAutoModel /
        数据：{manufacturerId：_manufacturerId，autoSellerListingId：autoSellerListingId}，
        缓存：假的，
        键入：POST，
        成功：功能（数据）{
            VAR的标记=＆LT;期权价值='0'＆GT;  - 选择 - ＆LT; /选项＆gt;中;            为（变量X = 0; X＆下; data.length; X ++）{
                **如果（数据[X] .Selected）{**
                    标记+ =＆LT;选项选择='选择'值=+数据[X] .value的+＆gt;中+数据[X]。文本+＆LT; /选项＆gt;中;
                }
                其他
                    标记+ =＆LT;期权价值=+数据[X] .value的+＆gt;中+数据[X]。文本+＆LT; /选项＆gt;中;
            }
            $（'＃autoModel'）HTML（标记）.show（）;
        }，
        错误：功能（效应初探）{
            警报（错误：+效应初探）;
        }
    }）;
}
 

AJAX调用工作正常。然而，获取第二个下拉返回的数据中包含所选的项目，我想检测所选择的项目（通过'如果'​​语句），并适当地渲染HTML。问题是，选定似乎并没有被数据的一个属性，因为每个值的计算结果为假，即使值中的一个是真的。

我是不是做错了什么？还是有更好的方式来做到这一点？

以下是控制器code：

  [HttpPost]
公众的ActionResult GetAutoModel（INT manufacturerId，诠释autoSellerListingId）
{
    INT modelId = 0;    //获取与目标相关的生产厂家所有型号
    清单＆LT; AutoModel＆GT; modelList = this._AutoLogic.GetModelListByManufacturer（manufacturerId）;    //如果这是一个现有的上市，让卖家选择了自动模式Id值。
    如果（autoSellerListingId大于0）
        modelId = this._systemLogic.GetItem＆LT; AutoSellerListing＆GT;（行=＆GT; row.AutoSellerListingId == autoSellerListingId）.AutoModel.AutoModelId;    //将所有的模型数据到的SelectList对象
    的SelectList returnList =新的SelectList（modelList，AutoModelId，说明）;    //现在在列表中找到所选模型并将其设置为选中。
    的foreach（在returnList VAR项）
    {
        如果（item.Value == modelId.ToString（））
            item.Selected = TRUE;
    }    返回JSON（returnList）;
}
 

解决方案

试试这个（添加到modelId的的SelectList构造函数，并删除在foreach块）：

  //所有的模型数据转换为对象的SelectList
的SelectList returnList =新的SelectList（modelList，AutoModelId，说明，modelId）;返回JSON（returnList）;
 

I have an MVC 4 app with a View containing two dropdown lists. The user selects a value in the first dropdown and then an Ajax call is made to populate the second dropdown based on the contents of the first.

My JavaScript code looks as follows and gets called when the user selects an item in the first dropdown:

function GetAutoModel(_manufacturerId) {

    var autoSellerListingId = document.getElementById("AutoSellerListingId").value;

    $.ajax({
        url: "/AutoSellerListing/GetAutoModel/",
        data: { manufacturerId: _manufacturerId, autoSellerListingId: autoSellerListingId },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>-- Select --</option>";

            for (var x = 0; x < data.length; x++) {
                **if (data[x].Selected) {**
                    markup += "<option selected='selected' value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }
                else
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            $('#autoModel').html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
}

The Ajax call works correctly. However, the data that gets returned for the second dropdown contains a selected item and I'm trying to detect the selected item (via the 'if' statement), and render the HTML appropriately. The problem is that 'Selected' doesn't seem to be a property of 'data' because each value evaluates to false, even though one of the values is true.

Am I doing something wrong? Or is there a better way to do this?

The following is the controller code:

[HttpPost]
public ActionResult GetAutoModel(int manufacturerId, int autoSellerListingId)
{
    int modelId = 0;

    // Get all the models associated with the target manufacturer
    List<AutoModel> modelList = this._AutoLogic.GetModelListByManufacturer(manufacturerId);

    // If this is an existing listing, get the auto model Id value the seller selected.
    if (autoSellerListingId > 0)
        modelId = this._systemLogic.GetItem<AutoSellerListing>(row => row.AutoSellerListingId == autoSellerListingId).AutoModel.AutoModelId;

    // Convert all the model data to a SelectList object
    SelectList returnList = new SelectList(modelList, "AutoModelId", "Description");

    // Now find the selected model in the list and set it to selected.
    foreach (var item in returnList)
    {
        if (item.Value == modelId.ToString())
            item.Selected = true;
    }

    return Json(returnList);
}

解决方案

Try this instead (add modelId to constructor of SelectList, and remove the foreach block):

// Convert all the model data to a SelectList object
SelectList returnList = new SelectList(modelList, "AutoModelId", "Description", modelId);

return Json(returnList);

这篇关于MVC 4 - 级联下拉列表 - 问题与阿贾克斯的JavaScript调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！