带有输入和表单.Net核心的AJAX标签

Question

我是AJAX和.Net核心的新手。我的视图中有一个选项卡页(这应该是一个ForgotMyPassword页)

<div id="tab1">
        <input id="UserKeyInput" type="text" autofocus placeholder="UserKey">
        <button id="btnn">Next</button>

</div>
<div id="tab2"> <!-IF VALIDATION=TRUE SWITCH TO THIS TAB-->
        <input id="UserKeyInput" type="text" autofocus placeholder="newpassword">
        <button id="btnn">done</button>

</div>

在JS中我有

    <script>
    $(function () {
    $("#btnn").click(function () {
        alert("ss");
        var UserKey;
        UserKey = $("#UserKeyInput").val();
        $.ajax({
            type: "POST",
            url: '@Url.Action("ValidateUser")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
            },
            error: function () {
            }
        });
        return false;
    });
});
</script>

如果验证成功，如何让AJAX更改选项卡？我应该只有一个切换选项卡和执行操作的功能，还是应该为每个选项卡都有一个功能？另一件事是，如果用户在ValidateUser完成后刷新页面，而我们在第二个选项卡页上，会发生什么情况？(它会显示tab1还是tab2)

Answer 1

在同一视图中不能有相同的id。

视图

<div id="tab1">
        <input id="UserKeyInput1" type="text" autofocus placeholder="UserKey">
        <button id="btnn1">Next</button>

</div>
<div id="tab2" style="display: none;"> <!-IF VALIDATION=TRUE SWITCH TO THIS TAB-->
        <input id="UserKeyInput2" type="text" autofocus placeholder="newpassword">
        <button id="btnn2">done</button>

</div>

JS

<script>
   $("#btnn1").click(function () {
      var UserKey = $("#UserKeyInput1").val();
      $.post('@Url.Action("ValidateUser")', { userkey: UserKey }).done(function (e) {
         if (e.success === false)
         {
             return false;
         }
         $("#tab1").hide();
         $("#tab2").show();
      });
   });
</script>