ASP.NET MVC 3 与 Razor DropDownListFor 更改未触发

发布于 2024-12-20 19:47:33 字数 2100 浏览 2 评论 0原文

我在这里看到了很多关于 DropDownList 和 DropDownListFor 事件未触发的问题,但没有解决我的问题的答案。我不认为我忽略了任何事情,所以我将发布我自己的问题...

我的视图中有以下代码:

@model MyWebApp.ViewModels.ProductAdminViewModel
@{
    ViewBag.Title = "Manage Products";
}
<script type="text/javascript">
    $(function () {
        $('select#CurrentCategoryId').change(function () {
            alert('We got here!');
        })
    });
</script>

@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "indexGrid" }))
{ 
    <fieldset>
        <legend>Select Category</legend><span>Category: </span>
        @Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, new { @id = "CurrentCategoryId" })
    </fieldset>
}
<div id="indexGrid">
    @Html.Partial("_indexGrid", Model)
</div>

下拉列表是从我的 ViewModel 中的 SelectList 正确填充的,唯一需要注意的是是VM中的CurrentCategoryId是一个公共int属性。

在将下拉菜单与脚本绑定时我忽略了什么?

编辑:我的 _Layout.cshtml 文件中有以下内容:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/Scripts/prototype.js"></script>
<script type="text/javascript" src="/Scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/Scripts/lightbox.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/Scripts/EditorTypes.js"></script>

感谢@Hawkke。这是我的工作代码:

<script type="text/javascript">
    function CategoryChanged(newCategoryId) {
        alert('The category has been changed!');
    };
</script>
...
@Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, new { @onchange = "CategoryChanged(" + @Model.CurrentCategoryId + ")" })

I've seen a lot of questions on here regarding DropDownList and DropDownListFor events not firing but no answers that solve my problem. I don't think I've overlooked anything so I'll post my own question...

I have the following code in my View:

@model MyWebApp.ViewModels.ProductAdminViewModel
@{
    ViewBag.Title = "Manage Products";
}
<script type="text/javascript">
    $(function () {
        $('select#CurrentCategoryId').change(function () {
            alert('We got here!');
        })
    });
</script>

@using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "indexGrid" }))
{ 
    <fieldset>
        <legend>Select Category</legend><span>Category: </span>
        @Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, new { @id = "CurrentCategoryId" })
    </fieldset>
}
<div id="indexGrid">
    @Html.Partial("_indexGrid", Model)
</div>

The drop-down is populated correctly from the SelectList in my ViewModel and the only other thing to note is that the CurrentCategoryId in the VM is a public int property.

What have I overlooked in tying the drop-down to the script?

EDIT: I have the following in my _Layout.cshtml file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/Scripts/prototype.js"></script>
<script type="text/javascript" src="/Scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/Scripts/lightbox.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/Scripts/EditorTypes.js"></script>

Thanks to @Hawkke. This is my working code:

<script type="text/javascript">
    function CategoryChanged(newCategoryId) {
        alert('The category has been changed!');
    };
</script>
...
@Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, new { @onchange = "CategoryChanged(" + @Model.CurrentCategoryId + ")" })

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

秋凉 2024-12-27 19:47:33

'select#CurrentCategoryId' 需要一个名为“CurrentCategoryId”的控件,但下拉列表的名称是虚拟机的 ID。

编辑

我要做的就是将 javascript 从 jQuery 函数更改为常规函数。

<script>
    function ChangeMe(currentCategoryId) {
        // do stuff here
    }
</scrip>

然后更改您的 html 帮助程序:

@Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, 
    new { onchange = "ChangeMe(@Model.CurrentCategoryId)" })

我不是 100% 熟悉 razor 语法,但我认为您明白了。

'select#CurrentCategoryId' is expecting a control named 'CurrentCategoryId', but the name of your dropdown list is the VM's id.

Edit

What I would do is change your javascript from a jQuery function to a regular function.

<script>
    function ChangeMe(currentCategoryId) {
        // do stuff here
    }
</scrip>

Then change your html helper:

@Html.DropDownListFor(model => model.CurrentCategoryId, Model.CategorySelectList, 
    new { onchange = "ChangeMe(@Model.CurrentCategoryId)" })

I'm not 100% on the razor syntax but I think you get the idea.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文