jQuery change函数在带有RadioButton的POST上返回错误值

jQuery change函数在带有RadioButton的POST上返回错误值,jquery,asp.net-mvc,asp.net-mvc-3,razor,Jquery,Asp.net Mvc,Asp.net Mvc 3,Razor,根据所选单选按钮的值,我有一些jQuery用于“做事情”。它工作得非常好,正如预期的那样…直到我提交页面并发回自己。POST后,函数中的“this”值始终是第一个单选按钮-“filterByCategory1”。我认为这与MVC滥用单选按钮id(多个按钮的id相同)有关,但这是一个未经教育的猜测 jQuery: $('input[id^="filterBy"]').change(function (e) { if ($(this).val() == 'filterByCategory1'

根据所选单选按钮的值,我有一些jQuery用于“做事情”。它工作得非常好,正如预期的那样…直到我提交页面并发回自己。POST后,函数中的“this”值始终是第一个单选按钮-“filterByCategory1”。我认为这与MVC滥用单选按钮id(多个按钮的id相同)有关,但这是一个未经教育的猜测

jQuery:

$('input[id^="filterBy"]').change(function (e) {
    if ($(this).val() == 'filterByCategory1') {
        // do stuff
    } else if ($(this).val() == 'filterByCategory2') {
        // do other stuff
    }
});

// Just to make "do stuff" happen on initial page load
$('#filterBy').change();
剃刀头

@Html.RadioButtonFor(x => x.filterBy, "filterByCategory1", new { @checked = "checked" }) One <br />
@Html.RadioButtonFor(x => x.filterBy, "filterByCategory2") Two
@Html.radiobutton(x=>x.filterBy,“filterByCategory1”,新的{@checked=“checked”})一个
@RadioButton(x=>x.filterBy,“filterByCategory2”)2
事实上,两台收音机使用相同的id,导致标记无效。我建议您使用类名:

@Html.RadioButtonFor(
    x => x.filterBy, 
    "filterByCategory1", 
    new { id = "filterByCategory1", @class = "myradio" }
) 

@Html.RadioButtonFor(
    x => x.filterBy, 
    "filterByCategory2",
    new { id = "filterByCategory2", @class = "myradio" }
)
然后:

$('.myradio').change(function (e) {
    if ($(this).val() == 'filterByCategory1') {
        // do stuff
    } else if ($(this).val() == 'filterByCategory2') {
        // do other stuff
    }
});
注意,我已经从第一个单选中删除了checked属性以及javascript中显式的
.change()
调用。在ASP.NET MVC中选择选中单选按钮的正确方法是在呈现此视图的控制器操作中提供一个值:

MyViewModel model = ...
model.filterBy = "filterByCategory1"; // set the first button as checked
return View(model);

如果单选按钮未按名称分组,则更改事件将无法工作,事实上,即使单选按钮也无法按预期工作。您应该使用Html.RadioButtonListFor将它们组合在一起,以便在呈现它们时具有相同的名称属性,但具有不同的id。请查看下面的链接


回帖后,您是否看到页面上呈现的“filterByCategory2”?感谢您在模型中设置所选值这一点-从概念上讲,我并没有想到这一点。这条路线很容易实现,然后我需要做的就是在“myradio”上附加一个。每个都可以处理页面加载时的“正在做的事情”(而不仅仅是单击).做得很好。谢谢!