C# 如何在提交第一个表单后导航到Razor页面中的下一个选项卡

在asp.net razor页面的第一个选项卡中提交表单后，是否仍可以导航到下一个选项卡。 当前我正在使用return page（），它将加载第一个表单

在asp.net razor页面的第一个选项卡中提交表单后，是否仍可以导航到下一个选项卡

似乎您正在Razor页面中使用引导导航选项卡。为了达到上述要求，您可以尝试以下方法

方法1:在中存储活动选项卡信息，同时用户单击提交按钮，然后您可以通过JavaScript根据存储的活动选项卡信息激活特定选项卡，如下所示

<!-- Tab panes -->
<div class="tab-content">

    <!-- STAFF DETAILS -->
    <div role="tabpanel" class="tab-pane active" id="StaffDetails">
        <br />
        <form method="post" asp-page-handler="InsertStaffDetails">
            Staff Details Partial Here
            @*<partial name="_StaffDetails" />*@
            <div style="float:right">
                <input type='submit' class='btn btn-success' value='Save' onclick="setNextActiveTabFunc('Biodata')"/>
            </div>
        </form>
    </div>

    <!-- BIODATA -->
    <div role="tabpanel" class="tab-pane" id="Biodata">
        <br />
        <form method="post" asp-page-handler="InsertBioData">
            Bio Data Partial Here
            @*<partial name="_BioData" />*@
            <div style="float:right">
                <input type='submit' class='btn btn-success' value='Save' onclick="setNextActiveTabFunc('EduQualification')" />
            </div>
        </form>

    </div>

    <!-- EDUCATIONAL QUALIFICATION -->
    <div role="tabpanel" class="tab-pane" id="EduQualification">
        <br />
        <form method="post" asp-page-handler="InsertEduDetails">
            Edu Details Partial Here
            @*<partial name="_EduQualification" />*@
            <div style="float:right">
                <input type='submit' class='btn btn-success' value='Save' onclick="setNextActiveTabFunc('Assets')" />
            </div>
        </form>
    </div>
    @*do same on other submit button*@

测试结果

---

您可以使用Jquery覆盖表单提交，提交后可以使用Jquery更改选项卡

 $("#yourFormId").submit(function (event) {
   event.preventDefault();
       var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data
        }).done(function (response) { //
          // switch tab here 
         
        });
  });

---

尝试RedirectToPage方法嗨，我应该在RedirectToPage（）中传递我的标签id吗？嗨，韩菲，非常感谢您的回复。它工作正常，现在我的问题是当它进入Biodata选项卡时，Biodata表单中的selectlist没有预填充。您能帮我弄清楚这一点吗。

Biodata表单中的selectlist没有预填充

对于这个问题，我建议您可以创建一个新线程来详细描述它，这样我们就可以在这方面作进一步的讨论。

$(function () {
    var urlParams = new URLSearchParams(window.location.search);
    var pre_handler = urlParams.get('handler');
    switch (pre_handler) {
        case "InsertStaffDetails":
            //console.log("InsertStaffDetails");
            $('#wizard a[href="#Biodata"]').tab('show');
            break;
        case "InsertBioData":
            $('#wizard a[href="#EduQualification"]').tab('show');
            break;
        case "InsertEduDetails":
            $('#wizard a[href="#Assets"]').tab('show');
            break;
        //...
        //code for other tabs
        //..
        default: $('#wizard a[href="#StaffDetails"]').tab('show');
    }
       
})

 $("#yourFormId").submit(function (event) {
   event.preventDefault();
       var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data
        }).done(function (response) { //
          // switch tab here 
         
        });
  });