0

私は現在、このチュートリアルに従ってカスケード ドロップダウン リストの新しいセットを作成しようとしています: http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net -mvc.aspx

問題は、それが機能せず、基本的に JavaScript を読み書きできないことです (現在、座って学習する時間がありません)。どういうわけか、ドロップダウン リストが機能せず、最初の階層情報のみが表示されます。

これは私がやったことです：

まずコントローラ：

インデックスメソッドは次のとおりです。

public ActionResult Index()
    {
        var list = repo.GetParentEstablishments();

         ViewBag.Parent = (new SelectList(list.ToArray(),"EstablishmentId","Name"));
        return View();

    }

選択した父親の子供のリストを返すメソッドは次のとおりです。

 [HttpPost]
    public ActionResult Children(int parentId)
    {
        var parents = repo.GetChildrenEstablishments(parentId);
        return Json(new SelectList(parents, "EstablishmentId", "Name"));
    }

index メソッドのビューは次のとおりです。

@using (Html.BeginForm("Index", "Ticket", FormMethod.Post, new { id =     "ParentChildrenFormID", data_childrenListAction = @Url.Action("ChildrenList") }))
{
<fieldset>
    <legend> Parent/Children</legend>
    @Html.DropDownList("Parents", ViewBag.Parent as SelectList, "Select a Parent", new {id="ParentsID"})
    <div id="ChildrenDivId">
        <label for="Children">Children </label>
        <select id="ChildrenID" name="Children"></select>
    </div>
    <p>
        <input type ="submit" value="Submit" id="SubmitID" />
    </p>
 </fieldset>
}
<script src ="@Url.Content("~/Scripts/parentChildren.js")"></script>

最後に、スクリプト ファイルを次に示します。

$(function () {

$('#ChildrenDivId').hide();
$('#SubmitID').hide();

$('#ParentsID').change(function () {
    var URL = $('#ParentChildrenFormID').data('childrenListAction');
    $.getJSON(URL + '/' + $('#ParentsID').val(), function (data) {
        var items = '<option>Select a Children</option>';
        $.each(data, function (i, child) {
            items += "<option value='" + child.value+ "'>" + child.Name + "</option>";
            // state.Value cannot contain ' character. We are OK because state.Value = cnt++;
        });
        $('#ChildrenID').html(items);
        $('#StatesDivID').show();

    });
});

$('#ChildrenID').change(function () {
    $('#SubmitID').show();
});
});

私がjavascript関数から理解したことについては、ページが読み込まれると子のラベルとドロップダウンを持つdivが非表示になり、ユーザーが最初のリストから親を選択すると表示されますが、現在これは発生していません代わりに、ページが読み込まれるとすべてが表示されます。また、親を選択すると、2 番目のリストで何も起こらないので、javascrip ファイルがユーザーのブラウザで実行されていないと推測できます。実行されないのはなぜですか? 私は何を間違っていますか？

事前に感謝します。どんな助けでも大歓迎です。

4

1 に答える 1

1

次の行にエラーがあります

items += "<option value='" + child.value + "'>" + child.Name + "</option>";

次のようになります。

items += "<option value='" + child.Value + "'>" + child.Text + "</option>";

コントローラー アクションは を返すためSelectList、このクラスは と というIEnumerable<SelectListItem>2SelectListItemつのプロパティを持つValueですText。

コードには別の問題もあります。以下を使用して、コントローラー アクションへの URL を作成しました。

URL + '/' + $('#ParentsID').val()

これにより、次の形式の URL が生成されます。

/SomeController/Children/123

しかし、アクションのアクション引数Childrenは と呼ばれparentIdます。デフォルト ルート設定を使用している場合は、{id}パラメーターのみが uri パスの一部として送信されます (これはデフォルト ルート パターン{controller}/{action}/{id}であり、 ではありません{controller}/{action}/{parentid})。したがって、ルート設定を変更するか、次のようにparentIdパラメーターを渡す必要があります。

$.getJSON(URL, { parentId: $('#ParentsID').val() }, function (data) {
    ...
});

コードのさらに別の問題は、 Children コントローラー アクションが[HttpPost]属性で装飾されているにもかかわらず、$.getJSONメソッドが GET 要求を送信することです。だからうまくいかない。$.post代わりに次のメソッドを使用できます。

$.post(URL, { parentId: $('#ParentsID').val() }, function (data) {
    ...
});

もう 1 つの問題は、非表示にStatesDivIDなっている実際の div が表示されていることですChildrenDivId。適切な要素を表示していることを確認してください。

$('#ChildrenDivId').show();

また、スクリプトの前に jQuery スクリプトが参照されていることを確認してくださいparentChildren.js。現在、スクリプトをビュー内に含めていますが、jQuery が含まれていることを確認できません。_Layout にあるかもしれません。

FireBug や Chrome 開発者ツールバーなどの JavaScript デバッグ ツールを使用して JavaScript コードを分析することをお勧めします。

于 2013-03-30T17:28:03.410 に答える