0

私のシンペルテストモデル：

public class MovieModel {

    public string SelectedCategorieID { get; set; }

    public List<CategorieModel> Categories { get; set; }

    public MovieModel() {
        this.SelectedCategorieID = "0";
        this.Categories = new List<CategorieModel>() {new CategorieModel {ID = 1,
            Name = "Drama"},
        new CategorieModel {ID = 2,
            Name = "Scifi"}};
    }
}

public class CategorieModel {
    public int ID { get; set; }
    public string Name { get; set; }
}

My Home Controllerアクションインデックス：

    public ActionResult Index() {

        Models.MovieModel mm = new Models.MovieModel();

        return View(mm);
    }

私の強くタイプされたビュー：

@model MvcDropDownList.Models.MovieModel
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    function categoryChosen(selectedCatID) {
//        debugger;
        var url = "Home/CategoryChosen?SelectedCategorieID=" + selectedCatID;
        $.post(url, function (data) {
            $("#minicart").html(data);
        });
    }
</script>

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>
        Movie Type
        @Html.DropDownListFor(m => m.SelectedCategorieID, new SelectList(Model.Categories, "ID", "Name", Model.SelectedCategorieID), "---Select categorie---")
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>

}
<input type="button" value="Minicart test" onclick="categoryChosen('@Model.SelectedCategorieID');" />
<div id="minicart">
    @Html.Partial("Information")
</div>

'Minicart test'が付いた2番目の入力を使用しているため、最初の入力は無視してください（HTML.Beginformは、後で何かを学ぶためにあります）。ミニカートのものは別のチュートリアルからのものです、お詫び申し上げます。気を散らさないでください。

ボタンがクリックされると、categoryChosen jQueryが呼び出され、アクションが呼び出されます。

    [AcceptVerbs("POST")]
    public ActionResult CategoryChosen(string SelectedCategorieID) {

        ViewBag.messageString = SelectedCategorieID;

        return PartialView("Information");

    }

部分ビュー情報は次のようになります。

@{
    ViewBag.Title = "Information";
}

<h2>Information</h2>
<h2>You selected: @ViewBag.messageString</h2>

私の質問は、ドロップダウンリストの値を変更した後でも、Model.SelectCategorieIDがゼロ（Model.SelectCategorieID = 0）である理由です。私は何が間違っているのですか？よろしくお願いします。ご不明な点がございましたら、お気軽にお問い合わせください。

4

2 に答える 2

3

私の質問は、ドロップダウンリストの値を変更した後でも、Model.SelectCategorieIDがゼロ（Model.SelectCategorieID = 0）である理由です。

これは、onclickハンドラーでその値をハードコーディングしているためです。

onclick="categoryChosen('@Model.SelectedCategorieID');"

これを適切に実行したい場合は、ドロップダウンリストから値を読み取る必要があります。

onclick="categoryChosen(this);"

次に、categoryChosen関数を変更します。

<script type="text/javascript">
    function categoryChosen(ddl) {
        // debugger;
        var url = 'Home/CategoryChosen';
        $.post(url, { selectedCategorieID: $(ddl).val() }, function (data) {
            $('#minicart').html(data);
        });
    }
</script>

また、JavaScript関数でハードコーディングする代わりに、URLヘルパーを使用して呼び出すURLを生成することをお勧めします。最後になりましたが、これを目立たないようにすることをお勧めします。そうすれば、これを別のjavascriptファイルに入れて、マークアップとスクリプトの混合をやめることができます。

私の意見を考慮した後のコードは次のようになります。

@model MvcDropDownList.Models.MovieModel
@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) 
{
    <fieldset>
        Movie Type
        @Html.DropDownListFor(
            m => m.SelectedCategorieID, 
            new SelectList(Model.Categories, "ID", "Name"), 
            "---Select categorie---",
            new { 
                id = "categoryDdl"
                data_url = Url.Action("CategoryChoosen", "Home") 
            }
        )
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>

}

<input type="button" value="Minicart test" id="minicart-button" />

<div id="minicart">
    @Html.Partial("Information")
</div>

次に、別のjavascriptファイルで、ボタンのクリックハンドラーを目立たないようにサブスクライブし、AJAXリクエストを送信します。

$(function() {
    $('#minicart-button').click(function() {
        // debugger;
        var $categoryDdl = $('#categoryDdl');
        var selectedCategorieID = $categoryDdl.val();
        var url = $categoryDdl.data('url');
        $.post(url, { selectedCategorieID: selectedCategorieID }, function (data) {
            $('#minicart').html(data);
        });
    });
});
于 2013-03-05T13:45:27.617 に答える
0

ドロップダウンリストのIDを指定します。

@Html.DropDownListFor(m => m.SelectedCategorieID, new SelectList(Model.Categories, "ID",
  "Name", Model.SelectedCategorieID), new {id = "myDropDownList"})

そしてあなたのjavascript関数は次のようになります：

<script type="text/javascript">
  function categoryChosen() {
    var cat = $("#myDropDownList").val();

    var url = "Home/CategoryChosen?SelectedCategorieID=" + cat;
    $.post(url, function (data) {
        $("#minicart").html(data);
    });
  }
</script>

コードが機能しなかったのはなぜですか？

onclick="categoryChosen('@Model.SelectedCategorieID')

として生成されます

onclick="categoryChosen('0')

の値SelectedCategorieIDは生成時に0であるためです。

于 2013-03-05T13:53:00.520 に答える