带有输入和表单的 AJAX 选项卡 .Net Core答案

【问题标题】：AJAX tabs with inputs and forms .Net Core带有输入和表单的 AJAX 选项卡 .Net Core
【发布时间】：2021-01-23 03:58:03
【问题描述】：

我是 AJAX 和 .Net Core 的新手。我的视图中有一个标签页（这应该是 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）

【问题讨论】：

标签： asp.net-core .net-core asp.net-core-mvc asp.net-ajax

【解决方案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>

<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>

【讨论】：