Question

我的simpel测试模型：

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，该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），即使我更改了下拉列表中的值？我究竟做错了什么？非常感谢您提前回答。如果您需要任何信息或任何不清楚的信息，请告诉我。

Answer 1

我的问题是为什么Model.SelectCategorieID为零（Model.SelectCategorieID = 0）即使我改变了值 DROPDOWNLIST？

那是因为你在你的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);
        });
    });
});

Answer 2

为您的下拉列表提供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。

无法将选定值DropDownListFor传递给javascript函数

2 个答案: