0

現在、1つのページに2つのドロップダウンリストボックスがあります。1つ目は、ユーザーがページに入ると表示され、約12のエントリが読み込まれます。他のドロップダウンリストは、最初のドロップダウンリストで選択が行われるまで、スタイル設定を使用して非表示になります。選択が行われると、最初のddlのchangeイベントが、コントローラーへのajax呼び出しを開始して、2番目のddlにデータを取り込むために必要なデータを取得します。ajax呼び出しは正しいデータを取得しているので、ここまではすべて問題ありません。

2番目のddlにデータを入力しようとすると、問題が発生します。Jsonから戻ると、jQueryは2番目のddlを見つけることができません。私が得るのは、返されたデータをdataBindしようとしたときに指す「未定義」エラーだけです。

以下はコードです。

意見

<table width="100%">
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SpecificationAttribute):
        </td>
        <td class="adminData">
            @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute")
        </td>
    </tr>        
    <tr>
        <td class="adminTitle">
            <div class="SAOptions" style="display:none">
                @Html.NopLabelFor(model => model.SpecificationAttributeOption):
            </div>
        </td>
        <td class="adminData">
            <div class="SAOptions" style="display:none">
                @Html.DropDownListFor(model => model.SpecificationAttributeOptions, Enumerable.Empty<SelectListItem>())
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    $("#SpecificationAttribute").change(function () {
        var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val();
        //User selected one of the Specification Attributes
        if (specificationAttributeId != "") {
            //Show the Specification Attribute Options
            $(".SAOptions").show();

            //Load the now showing dropdownlist
            $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) {
                //**************************
                //This is not finding my ddl
                //**************************
                var ddl = $("#SpecificationAttributeOptions").data("tDropDownList");
                alert(ddl != null);
                if (data.length > 0) {
                    //Bind data and reload
                    //********************
                    //Breaks here
                    //********************
                    ddl.dataBind(data);
                    ddl.reload();
                }
            });
        }
        //User selected "Select a Specification Option" for some reason, so hide everything
        else {
            $(".SAOptions").hide();
            $("#divOptions").hide();
        }
});

コントローラ

public ActionResult ProductBySpecificationAttribute()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports))
            return AccessDeniedView();

        var model = new SpecificationAttributeReportListModel();
        var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes();
        var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes);
        model.SpecificationAttributes = specificationAttributesModel;

        //Return Model data
        return View(model);
    }

    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId)
    {
        var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId);
        var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions);
        var returnData = new SelectList(specificationAttributeOptionsModel, "Id", "Name");
        return Json(returnData, JsonRequestBehavior.AllowGet);
    }

シンプルな感じがしますが、まだわかりません。別のddlを実装すれば、それは機能します。ただし、すべてを一緒に流したいので、このddlを使用しています（選択ではなく、全体的な一貫性のために）。

どんな助けでも大歓迎です。

よろしく、チャドジョンソン

4

2 に答える 2

1 
var ddl = $("#SpecificationAttributeOptions").data("tDropDownList");

tDropDownListその行は、DropDownList に添付されたデータを取得しようとしています。undefinedddl は返されません。ddl にデータが添付されていないため、おそらく返されます。

詳細については、こちらを参照してください: http://api.jquery.com/data/

于 2012-11-26T19:39:40.650 に答える
0

だから私は私自身の解決策を思いつきました。セカンダリ ddl の HTML.DropDownList を単純な に置き換えました。これにより、ドロップダウンリストを別の方法で作成できました。これが私が代わりにしたことです。

意見

<table width="100%">
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SpecificationAttribute):
        </td>
        <td class="adminData">
            @Html.DropDownListFor(model => model.SpecificationAttribute, new SelectList(Model.SpecificationAttributes, "Id", "Name"), "Select a Specification Attribute")
        </td>
    </tr>        
    <tr>
        <td class="adminTitle">
            <div class="SAOptions" style="display:none">
                @Html.NopLabelFor(model => model.SpecificationAttributeOption):
            </div>
        </td>
        <td class="adminData">
            <div class="SAOptions" style="display:none">
                <select id="SpecificationAttributeOptions"></select>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
//Change event for SpecificationAttribute
    $("#SpecificationAttribute").change(function () {
        var specificationAttributeId = $("#@Html.FieldIdFor(model => model.SpecificationAttribute)").val();
        //User selected one of the Specification Attributes
        if (specificationAttributeId != "") {
            //Show the Specification Attribute Options
            $(".SAOptions").show();

            //Load the now showing dropdownlist
            $.getJSON('@Url.Action("GetSpecificationAttributeOptions", "Reports")', { specificationAttributeId: specificationAttributeId }, function (data) {
                var ddl = $("#SpecificationAttributeOptions");
                if (data.length > 0) {
                    //Clear data from dropdownlist
                    ddl.html('');

                    //Bind dropdownlist
                    var elements = "";
                    $.each(data, function (id, option) {
                        elements += '<option value="' + option.id + '">' + option.name + '</option>'
                    });
                    ddl.append(elements);
                }
            });
        }
        //User selected "Select a Specification Option" for some reason, so hide everything
        else {
            $(".SAOptions").hide();
        }
    });
</script>

コントローラ

public ActionResult ProductBySpecificationAttribute()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageReports))
            return AccessDeniedView();

        var model = new SpecificationAttributeReportListModel();
        var specificationAttributes = _specificationAttributeService.GetSpecificationAttributes();
        var specificationAttributesModel = PrepareSpecificationAttributeModel(specificationAttributes);
        model.SpecificationAttributes = specificationAttributesModel;

        //Return Model data
        return View(model);
    }

/// <summary>
    /// Used to load dropdownlist for SpecificationAttributeOptions
    /// </summary>
    /// <param name="specificationAttributeId">SpecificationAttribute Identifier</param>
    /// <returns>Json data to build dropdownlist</returns>
    public JsonResult GetSpecificationAttributeOptions(int specificationAttributeId)
    {
        //Get the SpecificationAttributeOptions for this SpecificationAttributeId
        var specificationAttributeOptions = _specificationAttributeService.GetSpecificationAttributeOptionsBySpecificationAttribute(specificationAttributeId);
        //Load data into SpecificationAttributeOptionModel
        var specificationAttributeOptionsModel = PrepareSpecificationAttributeOptionsModel(specificationAttributeOptions);
        //Pluck Id and Name from data
        var returnData = (from sao in specificationAttributeOptionsModel select new { id = sao.Id, name = sao.Name }).ToList();
        //Return specific data
        return Json(returnData, JsonRequestBehavior.AllowGet);
    }

答えてくれて、助けてくれてありがとう。感謝しています。うまくいけば、これは同じ問題に遭遇する可能性のある他の誰かに役立ちます.

于 2012-11-27T14:08:24.823 に答える