【问题标题】:Why are these check-boxes not being checked from code-behind?为什么不从代码隐藏中检查这些复选框?
【发布时间】:2010-11-10 06:04:05
【问题描述】:

我有一个用 ASP.NET MVC 编写的网站,我为相关页面设置了一个参数,用于指定前一页是什么。这样做的原因是,当用户从特定页面单击图像时,加载的页面将使用 javascript(尤其是 jQuery)自动检查相应的复选框。

下面是获取和设置参数的代码:

<script type="text/C#" runat="server">
    protected string Referrer = string.Empty;
    protected override void OnLoad(EventArgs e)
    {
        try
        {
            Referrer = Request.UrlReferrer.Segments[2].ToLower();
        }
        catch (System.Exception)
        {

            Referrer = string.Empty;
        }
        base.OnLoad(e);
    }
</script>

接下来,这里是复选框的集合:

<div id="interestSelect1" class="interestPad">
        <%= Html.CheckBoxFor(model => model.Interests[0])%>
        <label for="Interests_0_">Insulation</label>
        <%= Html.CheckBoxFor(model => model.Interests[1])%>
        <label for="Interests_1_">Windows</label>
        <%= Html.CheckBoxFor(model => model.Interests[2])%>
        <label for="Interests_2_">Siding</label>
        <%= Html.CheckBoxFor(model => model.Interests[3])%>
        <label for="Interests_3_">Roofing</label>
    </div>
    <div class="clear">
    </div>
    <div id="interestSelect2" class="interestPad">
        <%= Html.CheckBoxFor(model => model.Interests[4])%>
        <label for="Interests_4_">Gutters/Protection</label>
        <%= Html.CheckBoxFor(model => model.Interests[5])%>
        <label for="Interests_5_">Patio Doors</label>
    </div>

在浏览器中呈现时,每个复选框的外观如下:

<input id="Interests_0_" name="Interests[0]" type="checkbox" value="true" />
<input name="Interests[0]" type="hidden" value="false" />
<label for="Interests_0_">Insulation</label>

这是我正在使用的 javascript,但它不起作用:

<script type="text/javascript">
    var ref = '<%= Referrer %>';
    $(document).ready(function () {
        switch (ref) {
            case "insulation":
                $('Interests_0_').attr('checked', 'checked');
                break;
            case "windows":
                $('Interests_1_').attr('checked', 'checked');
                break;
            case "siding":
                $('Interests_2_').attr('checked', 'checked');
                break;
            case "roofing":
                $('Interests_3_').attr('checked', 'checked');
                break;
            case "gutters":
                $('Interests_4_').attr('checked', 'checked');
                break;
            case "patiodoors":
                $('Interests_5_').attr('checked', 'checked');
                break;
            default:
                // do nothing, not valid ref
        }
    });
</script>

我显然做错了什么,谁能指出我正确的方向?

谢谢!

编辑: 看起来另一个 JS 文件位于 MasterPage 上,该文件在我的 JS 块导致复选框未被选中之前被调用。主要问题是忘记了# 标识符。

【问题讨论】:

  • @ajreal - 你的评论对我来说似乎相当模糊。能详细点吗?
  • 我的错,$('Interests_0_').attr('checked', 'checked');似乎需要更正为 $('#Interests_0_').attr('checked', 'checked');

标签: jquery asp.net-mvc checkbox


【解决方案1】:

#id selectors 需要一个# 前缀,像这样:

$('#Interests_0_').attr('checked', 'checked');

没有#,它是一个element selector,正在寻找一个&lt;Interests_0_&gt; 元素。

不过,你可以用一个对象整体缩小它,如下所示:

var ref = '<%= Referrer %>';
var map = {"insultation":"#Interests_0_",
           "windows":"#Interests_1_",
           "siding":"#Interests_2_",
           "roofing":"#Interests_3_",
           "gutters":"#Interests_4_",
           "patiodoors":"#Interests_5_"};
$(function () {
   var id = map[ref];
   if(id) $(id).attr('checked', true);
});

【讨论】:

  • 嗯,由于某种原因,它仍然无法与该更改正常工作(我觉得忽略这一点很愚蠢)。感谢您提供我所拥有的面向对象版本,但它非常有帮助。另外,$(function () {});$(document).ready(function () {}); 的简写吗?
【解决方案2】:

这不是 MVC,而是经典的 ASP.NET 网络表单。 MVC中没有code-behind的概念,一般情况下不使用OnLoad之类的事件,一般不使用runat=server脚本块。查看 nerd dinner example 了解 MVC 的概述。

【讨论】:

  • 我认为 OP 只是在这里使用了一些不正确的名称,但他正在使用 MVC。 &lt;%= Html.CheckBoxFor(model =&gt; model.Interests[0])%&gt; 不是经典的网络表单。
  • 确实如此,但其中有一个 OnLoad 事件,这肯定不是 MVC。充其量这是两者的混合。我认为这不仅仅是使用错误的术语 - 也许这是从标准网络表单移植过来的?
  • @UpTheCreek - 是否有其他方法可以在不使用 OnLoad 代码的情况下传递引用 URL 的最后一段?这是我把它放在那里的唯一原因。
  • 好吧,我责怪一天的工作。我在
  • @Anders:嗯,严格来说,该代码应该真正进入您的控制器,并通过视图模型或视图数据字典传递给视图。您应该尽可能保持视图愚蠢。即使您修改了代码,您的视图也必须知道 URI/路由的结构,这是它不应该知道的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-06-05
  • 1970-01-01
  • 2011-09-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多