當他們在不使用Jquery的情況下在MVC視圖中的頁面中按Enter時，按鈕觸發

Question

我在MVC視圖中有一個Modal，它具有一個按鈕，該按鈕調用Java腳本發布到控制器。 當他們在頁面中按Enter時，如何使Button觸發。 我不確定在View中我可以在哪里調用JavaScript函數。

請不要使用jQuery。 為此，我只需要使用Javascript。

這是我的看法：

 @using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post))
        {
            @Html.AntiForgeryToken()
            <div>
                <div>Email Address</div>
                <div><input type="email" name="email" placeholder="example@email.com" id="email" class="forgot-password-textbox"></div>
                <div><label id="Message" class="forgot-password-error-message"></label></div>
                <div><input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button"></div>
            </div>
        }

這是Js方法：

function resetPasswordHandler() {
    //Post Data to Controller
};

Answer 1

您可以在按下Enter鍵時調用resetPasswordHandler函數。

document.onkeydown = function () {
    if (window.event.keyCode == '13') {
        resetPasswordHandler();
    }
}

Answer 2

1. 在表單上使用onsubmit函數（而不是在按鈕上單擊onclick ）
2. 從函數返回false以防止表單提交
3. 將按鈕更改為type='submit'

---

    @using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post, new { onsubmit = "return resetPasswordHandler()" }))
        {
            @Html.AntiForgeryToken()
            <div>
                <div>Email Address</div>
                <div><input type="email" name="email" placeholder="example@email.com" id="email" class="forgot-password-textbox"></div>
                <div><label id="Message" class="forgot-password-error-message"></label></div>
                <div><input type="submit" value="Submit" id="btn-reset-password" class="orange-button forgot-password-button"></div>
            </div>
        }

---

function resetPasswordHandler() {
    var postResult = null;
    var data = {
        Email: document.getElementById('email').value
    };
    var path = "/forgotPassword";

    var errorMessage = document.getElementById('Message');

    $.ajax({
        dataType: "text",
        url: path,
        data: data,

        type: "POST",
        cache: false,
        success: function (result) {
            postResult = $.parseJSON(result);
            if (postResult.status == "success") {
                $('#forgot').hide();
                $('#forgot-thank-you').show();
            }
            else {
                errorMessage.innerHTML = postResult.message;
            }
        },
        error: function () {
            errorMessage.innerHTML = "An error occured";
        }
    });
    return false;
};