Проверка JQuery ASP.NET MVC не запускается при отправке ввода .click

Question

У меня проблемы с проверкой логина. Мой JQuery не запускается, поэтому данные Json не передаются. Я хочу, чтобы он сначала вызвал JQuery, прежде чем идти к контроллеру. Он идет к контроллеру, но проблема в том, что функция .submit () не была запущена, поэтому данные ajax не передаются. Спасибо.

LogIn.cshtml

@model DTS.Models.User
<h2>LogIn</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.UserID)

        <div class="form-group">
            @Html.LabelFor(model => model.Username, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Username, new {@id = "Username" })
                @Html.ValidationMessageFor(model => model.Username)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { @id = "Password" })
                @Html.ValidationMessageFor(model => model.Password)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Log In" class="btn btn-default" id="Login"/>
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script>
    $("#Login").submit(function () {
        var dataObject = { UsernName: $("#Username").val(), Password: $("#Password").val() };

        $.ajax({
            url: Url.Action("LogIn", "User"),
            type: "POST",
            data: dataObject,
            datatype: "json",
            success: function(result)
            {
                if (result.toString()=="Success!") {
                    alert(result);
                }
                else
                {
                    alert(result);
                }
            },
            error: function(result)
            {
                alert("Error");
            }
        });

    })

</script>

UserController.cs

    [HttpPost]
        public ActionResult LogIn(User user)
        {
            string message = "";
            DynamicParameters param = new DynamicParameters();
            param.Add("@Username", user.Username);
            param.Add("@UserID", user.Password);

            if (ModelState.IsValid)
            {
                if (DapperORM.ExecuteReturnScalar<User>("LogInUser", param) == null)
                {
                    message = "Success!";
                }
                else
                {
                    message = "Username or Password is incorrect!";
                }
            }
            else
            {
                message = "Required fields.";
            }

            if (Request.IsAjaxRequest())
            {
                return Json(message, JsonRequestBehavior.AllowGet);
            }
            else
            {
                return RedirectToAction("Index", "Document");
            }
        }

Answer 1

Попробуйте код ниже. Это будет работать.

$(document).ready(function() {

    $("form").submit(function(e) {

        e.preventDefault();

        // rest code goes here

    });
});

Здесь я сделал две модификации.

1. Сначала я завернул код в document.ready ().
2. Во-вторых, я применил событие submit к форме вместо кнопки.
3. В-третьих, я использовал e.preventDefault(). Это предотвратит нажатие кнопки «Отправить» при полном постбеке.