1

这里茫然和困惑......有问题的字段是一个布尔值，我希望 UI 是一个复选框（或一个是/否或开/关 jQuery 滑块）。每次我尝试添加此复选框输入时，我最终都会得到一个

Microsoft JScript runtime error: DOM Exception: HIERARCHY_REQUEST_ERR (3)

错误。

这是 HTML+Razor

 <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
       <legend>End Game:</legend>
       @Html.TextBoxFor(model => model.HandicapSession.WinByTwo, new { @type="checkbox" })
       <label for="WinByTwo">Win By Two?</label>
    </fieldset>
</div>

这是生成的 HTML：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
       <legend>End Game:</legend>
       <input data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="False" />
       <label for="WinByTwo">Win By Two?</label>
    </fieldset>
</div>

显然，当 jQuery Mobile 创建其复选框小部件时存在冲突或重叠的 id 时会发生此错误

$.widget( "mobile.checkboxradio", $.mobile.widget, { ...etc...

但是如何使用 HTML 和/或 razor 使一个简单的复选框在 jQuery Mobile 中工作？

4

2 回答 2

2

如果 jQuery Mobile 的问题确实是 HTML 标记的重复名称，那么您必须input type=checkbox在 HTML 中呈现您自己的标记，因为 ASP.NET MVCHtml.CheckBoxFor帮助器方法将呈现input type=hidden具有重复名称值的标记。请参阅此帖子进行讨论。

隐藏的表单标签在那里，因为如果您向服务器提交未选中的复选框，则该字段的表单值不包括在内。因此包含一个隐藏input标签，value=false因此如果未选中该复选框，false则仍会提交该值。MVC 中的模型绑定过程将为您过滤掉重复的表单值，但如果您遇到重复名称属性的客户端问题，则必须在 HTML 中呈现您自己的复选框和标签，然后处理事实上，HandicapSession.WinByTwo当未选中该框时，不会为该属性提交任何值。如果没有HandicapSession提交其他属性，则整个对象将为空。

因此，您可以手动创建复选框输入并仍然根据需要从模型中加载checked和value属性，但您可能会遇到模型绑定问题，即使选中该框，WinByTwo 的值仍然为 false。

另请注意，for您的属性label与示例中复选框的 ID 不匹配。你需要完整的HandicapSession_WinByTwo.

以下手动创建输入标签：

<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />  
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<div data-role="page">
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
               <legend>End Game:</legend>
               <input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" @(Model.HandicapSession.WinByTwo ? "checked=checked" : "") value="@(Model.HandicapSession.WinByTwo.ToString().ToLower())" />
               <label for="HandicapSession_WinByTwo">Win By Two?</label>
            </fieldset>
        </div>
    </div>
</div>

加载时选中的复选框的 HTML 输出如下：

<div data-role="page">
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
               <legend>End Game:</legend>
               <input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" checked=checked value="true" />
               <label for="HandicapSession_WinByTwo">Win By Two?</label>
            </fieldset>
        </div>
    </div>
</div>

最好的办法就是使用 MVC 辅助方法，所以我不确定您是否尝试过以下方法。默认Html.CheckBoxFor和Html.LabelFor辅助方法适用于 jQuery Mobile 1.0a4.1 或 1.1.0 就好了。以下对我有用：

<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />  
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<div data-role="page">
    <div data-role="content"> 
        @using (Html.BeginForm())
        { 
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                   <legend>End Game:</legend>
                   @Html.CheckBoxFor(m => m.HandicapSession.WinByTwo)
                   @Html.LabelFor(m => m.HandicapSession.WinByTwo, "Win By Two?")

                   <input type="submit" id="SubmitForm" value="submit" />
                </fieldset>
            </div>
        }
    </div>
</div>

这将产生 HTML 输出：

<div data-role="page">
    <div data-role="content"> 
        <form action="/Mobile/Mobile" method="post">            
             <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                   <legend>End Game:</legend>

                   <input checked="checked" data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="true" />
                   <input name="HandicapSession.WinByTwo" type="hidden" value="false" />
                   <label for="HandicapSession_WinByTwo">Win By Two?</label>

                   <input type="submit" id="SubmitForm" value="submit" />
                </fieldset>
            </div>
        </form>    
    </div>
</div>
于 2012-04-17T20:18:54.253 回答
0

修复可能非常简单。

选择 1：去焦土并关闭基于 Ajax 的导航。这将确保唯一 ID 保持唯一。这将确保您再也不会遇到此问题。唯一的缺点是你失去了从页面到页面的非常小的转换（有人称之为 whambulance）。您可以通过设置全局配置脚本来做到这一点...

script src="jquery.js"
script src="custom-scripting.js"
script src="jquery-mobile.js"

在里面你会覆盖ajax设置来禁用它们......

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});

选择 2：调用需要此唯一性的页面，其链接具有的属性rel='external'或target='_black'将在不禁用所有基于 ajax 的导航的情况下完成相同的事情。如果您是作为表单发布的结果到达该页面，则可以使用data-ajax='false'表单标签来完成干净的加载。

于 2012-04-11T17:59:45.420 回答