如何强制用户在mvc中使用jquery将一些值插入@htmel.textbox

Question

我有一个搜索页面，我想在其中强制用户使用 jquery 插入一些有效的输入，我尝试的方法不起作用，请帮助。

<script type="text/javascript">
        $('#btn-gn').click(function () {
            if ($('#firstName').length == 0) {
                alert("please enter username");
            }
            $.ajax({
                url: '@Url.Action("Search","User")',
                type: 'POST'
                success: function (result) {
                    alert("success");
                },
                error: function (result) {
                    alert("error!");
                }
            });   //end ajax
        });
</script>
 @using (Html.BeginForm("Search", "User", FormMethod.Post))
    {
        @Html.AntiForgeryToken()

  @Html.TextBox("firstName", null, new { @class = "complete" })
 @Html.TextBox("lastName", null, new { @class ="complete" })
  <button type="submit" id="btn-gn">submit</button>

    }

任何帮助将不胜感激..

Answer 1

有几处需要更改：

$('#firstName').length 只是检查页面上是否有带有 id="firstName" 的元素。您想检查他们是否在框中输入了某些内容，因此您需要 val()，即 if($('#firstName').val().length == 0)。
如果他们不输入姓名，您只是在提醒他们，但并没有阻止任何事情发生。如果您只是在警报后添加 return false;，这将停止 ajax 并停止提交表单。
同样，按钮的默认操作是提交表单。这种情况仍在发生，这就是为什么您被重定向到索引页面并且您的 ajax 被忽略的原因。同样，函数末尾的简单 return false; 或更好的 event.preventDefault() 应该可以解决这个问题。
看起来您的脚本出现在元素之前，因此 jquery 找不到 btn-gn 并且未绑定任何内容。如果将整个脚本放在 jquery 调用 $(function() { ... }) 中，它将在 DOM 准备就绪且页面上存在按钮时运行。
最后，检查按钮点击应该可以正常工作，但处理 form.submit 事件更安全，因为这将通过按下按钮触发，但也可能由其他事件触发。

这应该更适合你：

<script type="text/javascript">
    // wrap it in a jquery call so it runs on document ready
    $(function() {
        // find the form and listen to the submit event
        $('#btn-gn').closest('form').on('submit', function () {
            event.preventDefault(); // stop the form submitting

            if ($('#firstName').val().length == 0) {
                alert("please enter username");
                return; // exit the function so ajax doesn't happen
            }

            $.ajax({
                url: '@Url.Action("Search","User")',
                type: 'POST'
                success: function (result) {
                    alert("success");
                },
                error: function (result) {
                    alert("error!");
                }
            });   //end ajax
        });
    });
</script>

@using (Html.BeginForm("Search", "User", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    @Html.TextBox("firstName", null, new { @class = "complete" })
    @Html.TextBox("lastName", null, new { @class ="complete" })
    <button type="submit" id="btn-gn">submit</button>
}

如何强制用户在mvc中使用jquery将一些值插入@htmel.textbox

how to force user to insert some value into a @htmel.textbox using jquery in mvc

jquery

asp.net-mvc-4