Question

在我的ASP.NET MVC 5应用程序中，我有一个使用此代码的部分视图：

<a href="#" onclick="resendCode()" class="btn btn-link btn-sm">Resend</a>

在View上我有 resendCode（）功能：

 function resendCode() {

        var newEmail= $('#hdnEmail').val();
        $.getJSON("/User/ResendCode", { email: newEmail}, function (data) {
            showMessage(data.Message);
        });
    };

但是这个局部视图保留在视图的底部，并且总是在我点击href链接后焦点转到页面顶部。为什么会发生这种情况以及如何预防？

如果我将<a href标记更改为<input type="button" onclick="resendCode()" value="Resend" />，则效果非常好。

Answer 1

尝试将return if; 它应该阻止该方法执行其默认行为，并且不会转到锚点

function resendCode() {

        var newEmail= $('#hdnEmail').val();
        $.getJSON("/User/ResendCode", { email: newEmail}, function (data) {
            showMessage(data.Message);
        });
        return false;
    };

Answer 2

尝试

<a href="#" onclick="resendCode(); return false;" class="btn btn-link btn-sm">Resend</a>

阻止滚动

Answer 3

将您的HTML更改为：

<a href="#" onclick="resendCode(event)" class="btn btn-link btn-sm">Resend</a>

将功能定义更改为：

 function resendCode(event) {
    event.preventDefault(); 

    var newEmail= $('#hdnEmail').val();
    $.getJSON("/User/ResendCode", { email: newEmail}, function (data) {
        showMessage(data.Message);
    });
};

请注意，我们正在通过＆＃39;事件＆＃39; object作为函数的参数，将点击＆＃39;在这种情况下。然后我们使用jQuery＆＃39; preventDefault＆＃39;阻止事件默认操作的方法。在您的HTML中，您使用的是href =＆＃34;＃＆＃34;这会导致页面在用户单击链接后跳转到顶部。这可以通过调用jQuery的preventDefault（）来避免。

了解更多： http://api.jquery.com/event.preventdefault/

链接点击后阻止进入页面顶部

3 个答案: