Asp.net mvc 4 表单提交后如何禁用按钮或更改值_Asp.net Mvc 4

Asp.net mvc 4 表单提交后如何禁用按钮或更改值

asp.net-mvc-4

Asp.net mvc 4 表单提交后如何禁用按钮或更改值,asp.net-mvc-4,Asp.net Mvc 4,我的视图中有此代码 <h2>@ViewBag.FileContent</h2> @using (Html.BeginForm("ShowWebSiteLinks", "Home")) { <label>WebSite URL:</label> <input type="text" id="ft" name="fturl" value="http://localho

我的视图中有此代码

<h2>@ViewBag.FileContent</h2>
@using (Html.BeginForm("ShowWebSiteLinks", "Home"))
{            
        <label>WebSite URL:</label>            
        <input type="text" id="ft" name="fturl" value="http://localhost/search/?sr=100" style="width:350px"><br>

        <label>Save to file:</label>            
        <input type="text" id="filename" name="links_filename" value="links.txt"  style="width:200px"><br>
        <input id="btnSubmit" type="submit" value="Start" />                           
}

有人能帮我吗？

您的javascript几乎正确，但选择器错误。试试这个：

$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('disabled', true);
    });
});

注意选择器中的“#”。这告诉jQuery按元素ID查找。如果不放“#”，它将按元素名称查找（即“input”、“div”等）

编辑：

这是一份关于选择器的好的备忘单：

编辑2：

更新为使用“$（this.prop（…）”而不是“$（this.attr（…）”

编辑3：

我建议您将javascript代码放在页面的末尾（而不是页眉）。大概是这样的：

<html>
    <head>[...]</head>
    <body>
        [...]
        <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                $(this).prop('disabled', true);
            });
        });
        </script>
    </body>
 </html>


[...]
[...]
$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（e）{
$（this.prop（'disabled'，true）；
});
});

您的javascript几乎正确，但选择器错误。试试这个：

$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('disabled', true);
    });
});

注意选择器中的“#”。这告诉jQuery按元素ID查找。如果不放“#”，它将按元素名称查找（即“input”、“div”等）

编辑：

这是一份关于选择器的好的备忘单：

编辑2：

更新为使用“$（this.prop（…）”而不是“$（this.attr（…）”

编辑3：

我建议您将javascript代码放在页面的末尾（而不是页眉）。大概是这样的：

<html>
    <head>[...]</head>
    <body>
        [...]
        <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                $(this).prop('disabled', true);
            });
        });
        </script>
    </body>
 </html>


[...]
[...]
$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（e）{
$（this.prop（'disabled'，true）；
});
});

上述答案对我不适用。我注意到，如果绑定到click事件并立即禁用，实际上会阻止表单提交

相反，我会做以下工作：

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('hidden', true);
    });
    $('#myform').bind('invalid-form.validate', function () {
        $('#btnSubmit').prop('hidden', false);
    });
});
</script>


$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（e）{
$（this.prop（'hidden'，true）；
});
$（'#myform'）.bind（'invalid-form.validate'，function（）{
$（'btnSubmit'）.prop（'hidden'，false）；
});
});

这会在单击操作时隐藏“提交”按钮，但仍允许执行该操作。第二条语句用于在验证失败时重新显示按钮。有关这方面的更多详细信息，请参见此处：

上述答案对我不适用。我注意到，如果绑定到click事件并立即禁用，实际上会阻止表单提交

相反，我会做以下工作：

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('hidden', true);
    });
    $('#myform').bind('invalid-form.validate', function () {
        $('#btnSubmit').prop('hidden', false);
    });
});
</script>


$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（e）{
$（this.prop（'hidden'，true）；
});
$（'#myform'）.bind（'invalid-form.validate'，function（）{
$（'btnSubmit'）.prop（'hidden'，false）；
});
});

这会在单击操作时隐藏“提交”按钮，但仍允许执行该操作。第二条语句用于在验证失败时重新显示按钮。更多细节可以在这里找到：

啊，我忘了添加散列。我又试了一次，但还是不行。单击后，按钮仍处于启用状态。我不太了解razor视图的页面结构。我试着在脚本中添加标签和标签。我在页面上添加javascript的任何地方都不起作用。请尝试使用$（this）.prop（'disable'，true）而不是attr来调试javascript。我强烈建议使用Firefox浏览器和Firebug插件之类的工具。然后你可以看到你的JS是如何被加载的，你甚至可以一行一行地调试它。它仍处于启用状态。谢谢，我将尝试Firebug。我不知道为什么它不能用于文档准备活动。当我添加onclik=“onBtnClick（）；”时，效果很好$（“#btnSubmit”）.attr（“disabled”，true）.val（“wait…”）；啊，我忘了加散列。我又试了一次，但还是不行。单击后，按钮仍处于启用状态。我不太了解razor视图的页面结构。我试着在脚本中添加标签和标签。我在页面上添加javascript的任何地方都不起作用。请尝试使用$（this）.prop（'disable'，true）而不是attr来调试javascript。我强烈建议使用Firefox浏览器和Firebug插件之类的工具。然后你可以看到你的JS是如何被加载的，你甚至可以一行一行地调试它。它仍处于启用状态。谢谢，我将尝试Firebug。我不知道为什么它不能用于文档准备活动。当我添加onclik=“onBtnClick（）；”时，效果很好$（“#btnSubmit”）.attr（“disabled”，true）.val（“wait…”）；