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; }
}

我的家控制器动作索引：

    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”的第二个输入（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>

另外，我建议您使用 URL 帮助程序来生成要调用的 url，而不是在您的 javascript 函数中对其进行硬编码。最后但并非最不重要的一点是，我建议您不显眼地执行此操作，以便您可以将其放在单独的 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 回答