Html.TextBox当由库添加时不呈现

时间:2014-02-27 16:05:23

标签: javascript html5 html-helper

我目前正在开设一个网站。到目前为止,一切都在工作,除非我将一个函数移动到库中,因此它可以重复使用。

该功能是一组两个单选按钮的单击事件。单击“是”按钮时,需要显示文本框及其标签。单击“否”按钮时,它们需要消失。

标签在“是”点击时显示正常。整个功能在页面本身上完美运行。但是,当我将脚本移动到库以便在项目中重用时,文本框不再出现。我尝试更换输入标签,结果类似。

相关的html:

@ModelType PROJECT.Form

@Code
    ViewData("Title") = "PageTitle"
    Layout = "~/Views/Shared/_LayoutPage.Desktop.vbhtml"
End Code
<script>
    $(function () { initFunction() })
</script>

@Using Html.BeginForm("Process", "Home")
    @Html.AntiForgeryToken()
    @Html.Hidden("page", 4)
    @<div id="formColumn" class="grid_19 alpha">
        <h3>Process Title</h3>
        <fieldset>
            <legend>Page Title</legend>
            <ol class="grid_18 push_1">
                //a couple yes/no questions here, works fine
                <li><label>Question 3</label></li>
                <li>
                    <ol id="appendHere"class="horizontalList clearfix">
                        <li><label>Yes</label></li>
                        <li>@Html.RadioButtonFor(Function(a) a.Q3Radio, True)</li>
                        <li><label>No</label></li>
                        <li>@Html.RadioButtonFor(Function(a) a.Q3Radio, False)</li>
                    </ol>
                </li>
                //more working stuff
            </ol>
            <div class="clear"></div> 
            <button name="submit" id="submit" value="submit" class="push_1">Submit</button>
            <button name="cancel" id="cancel" value="cancel" class="push_1">Cancel</button>
            <button name="back" id="back" value="back" class="push_1">Back</button>
        </fieldset>
    </div>
End Using

javascript:

function initFunction() {
    $(function () { $("input[name=Q3Radio]").click(function () { handleQ3Check(this) }) })

    var check = true
    function handleQ3Check(elem) {
        if (elem.value == "True") {
                if (check) {
                    $('#appendHere').append('<li class="appended"><label>Amount: $</label></li><li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')
                    $(function () { $("input[name=appendAmount]").blur(function () { handleFees(this, 'stuff') }) })
                    check = false
                }
            } else {
            var appendedInput = $('.appended')
            if (appendedInput != null) {
                handleFees(appendedInput, 'stuff')
                $(appendedInput).remove()
                check = true
            }
        }
    }
}

如上所述,我尝试用输入标签创建文本框,但这不会出现。在这种情况下出现的是Amount: $ @Html.TextboxFor(Function(a) a.appendAmount)与此类似。

在我进一步尝试调试问题的过程中,任何帮助或推动正确的方向将不胜感激。

1 个答案:

答案 0 :(得分:1)

当你在同一个vbhtml文件中包含Javascript时,它的工作原理是vbhtml文件在被发送到客户端的浏览器之前被编译。通过查看源代码或使用您喜欢的浏览器中的开发人员工具等来查看正在呈现的javascript。

当你要求javascript写出来时

$('#appendHere').append('<li class="appended"><label>Amount: $</label></li>
<li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')

它会做到这一点。

根据你的评论判断,似乎你已经意识到了这一点:-)而且你正在取得进展。