Question

我有一个MVC项目，在一个视图中我必须填写表格并发布。我能够做到这一点，但是当我想在文本框中添加屏蔽时，我使用了document.ready函数，它导致提交按钮不对任何内容做出反应。没有document.ready，该功能正常工作。（当然，它并没有包括掩蔽。）我看了几个解决方案，但无法得到任何结果。我做错了什么？

我的代码：

@model Models.model

<script type="text/javascript">

jQuery(function ($) {
    $("#txtPhone").mask("0(999) 999-99-99");
});

function disableSubmitButton() {

    document.getElementById("btnSubmit").value = "Wait";

};

</script>

<div id="dvAjax">
@if (Model.SomeList!= null)
{

    using (Ajax.BeginForm("View", "Controller", new AjaxOptions { UpdateTargetId = "divdiv", HttpMethod = "Post", OnBegin = "disableSubmitButton()" }, new { id = "frmfrm", name = "frmfrm" }))
    {

            <p>
                Your phone: @Html.TextBoxFor(m => m.phone, new { maxlength = 10, size = 10, id = "txtPhone" })


                <input id="btnSubmit" name="btnSubmit" type="submit" class="someClass"
                       value="Cont." />
            </p>
    }

}
</div>

和控制器：

public ActionResult View(Model model, string btnSubmit)
{
   //some code

   return PartialView("View", model);
}

这是我如何包含jquery和掩码文件：

public static void RegisterBundles(BundleCollection bundles)
    {

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery-ui-timepicker-addon.js",
                    "~/Scripts/jquery.maskedinput.js",
                    "~/Scripts/jquery.cookie.js"
                    ));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.min.js", 
                    "~/Scripts/bootstrap-collapse.js", 
                    "~/Scripts/bootstrap-modal.js",
                    "~/Scripts/bootstrap-dropdown.js"));

.......

Answer 1

对于加载了ajax的内容，您必须使用

$(document).ajaxComplete( function() { 
 ...
} );

而不是

$(document).ready( ... )

请参阅here文档。

Answer 2

您必须将脚本放在@section scripts视图中定义的Shared/_Layout占位符中。

我的猜测是jQuery目前还不收费。我希望有一个错误。

同时验证mask是否真的是一个功能。你在用插件吗？该插件是否包含在内？在jquery之后？

试试这个：

@model Models.model
@section scripts{
<script type="text/javascript">

$(function () {
    $("#txtPhone").mask("0(999) 999-99-99");
});

function disableSubmitButton() {

    document.getElementById("btnSubmit").value = "Wait";

};

</script>
}
<div id="dvAjax">
@if (Model.SomeList!= null)
{

    using (Ajax.BeginForm("View", "Controller", new AjaxOptions { UpdateTargetId = "divdiv", HttpMethod = "Post", OnBegin = "disableSubmitButton()" }, new { id = "frmfrm", name = "frmfrm" }))
    {

            <p>
                Your phone: @Html.TextBoxFor(m => m.phone, new { maxlength = 10, size = 10, id = "txtPhone" })


                <input id="btnSubmit" name="btnSubmit" type="submit" class="someClass"
                       value="Cont." />
            </p>
    }

}
</div>

Answer 3

所以最后，我更改了用于屏蔽和管理的插件。第一个是以某种方式冲突，并没有与表单发布工作。我不知道。那就是：http://digitalbush.com/projects/masked-input-plugin/

然后我尝试了这个并且它有效：http://www.jqueryscript.net/form/Input-Field-Data-Formatting-Plugin-Mask.html

谢谢大家。

使用document.ready时，MVC表单不发布

3 个答案: