C# MVC 應用程序中的 ERR_HTTP2_PROTOCOL_ERROR

Question

在其中一個頁面將表單提交到 controller 然后 controller 顯示不同的視圖之后，我在開發工具中收到了一堆 ERR_HTTP2_PROTOCOL_ERROR 消息。

這是事件的順序：

1. OnlineEnrollmentController 提供 Index.cshtml。
2. View Index.cshtml 向用戶顯示文本，用戶單擊按鈕提交表單。
3. 表單被發送到返回 View 的 OnlineEnrollmentController/Agreement。
4. View Agreement.cshtml 呈現給用戶，用戶單擊按鈕提交表單。
5. 表單被發送到 OnlineEnrollmentController/Profile，ActionResult Profile 從數據庫讀取數據，填充 model 並將 model 返回到 View Profile.cshtml。
6. View Profile.cshtml 呈現給用戶，用戶單擊按鈕提交表單。
7. 表單被發送到 OnlineEnrollmentController/Rate，其中 ActionResult Rate 從數據庫讀取數據，填充 model 並將 model 返回到 View Rate.cshtml。
8. View Rate.cshtml 呈現給用戶，並要求用戶在文本框中輸入價格。 用戶輸入費率並單擊按鈕提交表單。
9. 表單被發送到 OnlineEnrollmentController/Election，其中 ActionResult Election 獲取填充的速率並存儲在 TempData 字段中。 創建了一個新的 object 列表，其中每個 object 包含 3 個字段並返回到 View Election.cshtml。
10. View Election.cshtml 使用 foreach 循環顯示 object 列表的內容。

除了現在我在加載 View Election.cshtml 時收到此 ERR_HTTP2_PROTOCOL_ERROR 之外，所有這些邏輯都有效。

以下是具體情況：

該應用程序有一個名為 _NoMenu.cshtml 的共享視圖。 這是文件的內容：

 <!DOCTYPE html>

 <html>
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <title>@ViewData["Title"]</title>

     <link rel="stylesheet" href="~/css/site.css" />
     <script src="https://use.fontawesome.com/54ec0da54f.js"></script>
     <script src="~/lib/jquery/dist/jquery.min.js"></script>

     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

     <!-- font awesome  -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />


     <style>
         /* Style for showing in progress bar
    --------------------------------------------------*/

        .submit-progress {
           position: fixed;
           top: 30%;
           left: 50%;
           height: 6em;
           padding-top: 2.3em;
           /* The following rules are the
           ones most likely to change */
           width: 20em;
           /* Set 'margin-left' to a negative number
           that is 1/2 of 'width' */
           margin-left: -10em;
           padding-left: 2.1em;
           background-color: #17a2b8a8;
           color: black;
           -webkit-border-radius: 0.4em;
           -moz-border-radius: 0.4em;
           border-radius: 0.4em;
           box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
           -webkit-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
           -moz-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
       }

       .hidden {
          visibility: hidden;
       }

       .submit-progress i {
          margin-right: 0.5em;
       }

       .mb-5, .my-5 {
          margin-bottom: 1.5rem !important;
       }

       .scrollHeight {
           height: 85vh;
       }

       .hideit {
           display: none;
       }

       .width95 {
           width: 95%;
       }

       .myDIV {
          height: 75%;
          overflow: auto;
       }

       .content500 {
          height: 500px;
       }

       .content600 {
          height: 600px;
       }

       .content800 {
          height: 800px;
       }
   </style>
 </head>
 <body>
     <div>
         @RenderBody()
    </div>
 </body>
 </html>

我將它用於我的應用程序中不想顯示標准引導菜單結構的任何頁面。

這是視圖 Rate.schtml 的內容：

 @model AccuRecordV3.Models.OnlineEnrollment_Indicative_Verify
 @{
     ViewData["Title"] = "Online Enrollment - Rate";
     Layout = "~/Views/Shared/_NoMenu.cshtml";
 }
 @using (Html.BeginForm("Election", "OnlineEnrollment", FormMethod.Post))
 {
 <section id="rate" class="vh-100" style="background-color: #508bfc;">
    <div class="container py-5 h-100">

        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card shadow-2-strong" style="border-radius: 1rem;">
                    <div class="card-body p-5 text-center scrollHeight">

                        <h3 class="mb-5">Online Enrollment</h3>

                        <h5 class="mb-5">Step 1 of 3</h5>

                        <div id="rateDIV" class="myDIV">
                            <div id="ratecontent" class="content500">

                                <div class="form-outline mb-4">
                                    <label class="form-label text-left width95">
                                        @Model.messageLiteral
                                    </label>
                                </div>
                                <div class="form-outline mb-4">
                                    <label class="form-label text-left width95">
                                        The minimum contribution rate allowed by your plan is @Model.outputMinPct and the
                                        maximum contribution rate allowed by your plan is @Model.outputMaxPct
                                    </label>
                                </div>
                                <div class="form-outline mb-4">
                                    <label class="form-label text-left">
                                        How much would you like to contribute?
                                    </label>
                                </div>
                                <div class="form-outline mb-4">
                                    <input type="number" id="electedRate" asp-for="electedRate" class="form-control form-control-lg rate" value="@Model.electedRate" placeholder="0" min="@Model.ss_CtrbKMinPct" step="1" max="@Model.ss_CtrbKMaxPct" />
                                    <label class="form-label text-danger" for="electedRate" id="rateerrorLabel">&nbsp;</label>
                                </div>

                                <button class="btn btn-primary btn-lg btn-block" type="button" id="rateButton" disabled onclick="return DisplayProgressMessage(this, 'rate');">Next</button>
                                <button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelRateButton" onclick="return Cancel(this, 'rate');">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </section>
 }
 <script>

 $(function () {


    var rate = 0;
    $('.rate').each(function () {
        rate += parseInt($(this).val());
    });
    var minRate = parseInt("@Model.ss_CtrbKMinPct");
    var maxRate = parseInt("@Model.ss_CtrbKMaxPct");
    if (rate < minRate || rate > maxRate) {
        $("#rateButton").prop("disabled", true);
    } else {
        $("#rateButton").prop("disabled", false);
    }

    $('.rate').change(function () {
        var rate = 0;
        $('.rate').each(function () {
            rate += parseInt($(this).val());
        });
        var minRate = parseInt("@Model.ss_CtrbKMinPct");
        var maxRate = parseInt("@Model.ss_CtrbKMaxPct");
        if (rate < minRate || rate > maxRate) {
            $("#rateButton").prop("disabled", true);
        } else {
            $("#rateButton").prop("disabled", false);
        }
    })
 })


 function DisplayProgressMessage(ctl, msg) {
    $(ctl).prop("disabled", true).text(msg);
    $("#submitButton").prop("disabled", true);

    $(".submit-progress").removeClass("hidden");
    const myTimeout = setTimeout(function () {
        $("form").submit();
    }, 5);
}
</script>

視圖 Rate.schtml 工作正常，使用 jquery 驗證用戶輸入的速率，然后將表單提交回 controller。

這是 Election.cshtml 的內容：

 @model AccuRecordV3.Models.OnlineEnrollment_Indicative_Verify
 @{
     ViewData["Title"] = "Online Enrollment - Rate";
     Layout = "~/Views/Shared/_NoMenu.cshtml";
 }
 @using (Html.BeginForm("Summary", "OnlineEnrollment", FormMethod.Post))
 {
 <section id="elections" class="vh-100" style="background-color: #508bfc;">
    <div class="container py-5 h-100">

        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card shadow-2-strong" style="border-radius: 1rem;">
                    <div class="card-body p-3 text-center scrollHeight">

                        <h3 class="mb-5">Online Enrollment</h3>

                        <h5 class="mb-5">Step 2 of 3</h5>

                        <div id="electionsDIV" class="myDIV">
                            <div id="electionscontent" class="content600">

                                <div class="form-outline mb-4">
                                    <label class="form-label text-left width95">
                                        These are the funds that are available to you.  You can allocate your contribution to any/all of these funds.  Remember, you wont be able to submit your elections all your total elections added together equal 100%.
                                    </label>
                                </div>
                                @foreach (var localRecord in Model.electionData)
                                {
                                    <div class="row width95">
                                        <label for="NewPct" class="col-sm-9 col-form-label text-left">@localRecord.FundName</label>
                                        <div class="col-sm-3">
                                            <input type="number" class="form-control election" id="NewPct" name="NewPct" min="@localRecord.MinPct" max="@localRecord.MaxPct" value="0">
                                            <input type="number" id="HostFID" name="HostFID" hidden value="@localRecord.HostFID" />
                                        </div>
                                    </div>

                                }
                                <div class="row width95">
                                    <label class="col-sm-9 col-form-label text-left">Total</label>
                                    <label id="ElectionTotal" name="ElectionTotal" class="col-sm-3 col-form-label text-right">0%</label>
                                </div>
                                <button class="btn btn-primary btn-lg btn-block" type="button" id="electionButton" disabled onclick="return DisplayProgressMessage(this, 'elections');">Next</button>
                                <button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelElectionButton" onclick="return Cancel(this, 'elections');">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </section>
 }
 <script>


 $(function () {

    $('.election').change(function () {
        var sum = 0;
        $('.election').each(function () {
            sum += parseInt($(this).val());
        });
        var totalElection = sum + "%";
        $("#ElectionTotal").text(totalElection)
        if (sum == 100) {
            $("#electionButton").prop("disabled", false);
        } else {
            $("#electionButton").prop("disabled", true);
        }
    })

 })


 function DisplayProgressMessage(ctl, msg) {
    $(ctl).prop("disabled", true).text(msg);
    $("#submitButton").prop("disabled", true);

    $(".submit-progress").removeClass("hidden");
    const myTimeout = setTimeout(function () {
        $("form").submit();
    }, 5);
 }
 </script>

當此視圖加載時，我查看開發工具，這就是我所看到的：

和

因此，由於某種原因，此錯誤會阻止 jquery.min.js 加載，這反過來又會導致“$”未定義錯誤。

看起來這個錯誤也阻止了樣式表的正確加載。

對此的一些研究表明這是一個 CORS 問題，但我不明白如何在一個頁面 (Elections.schtml) 而不是其他頁面 (Index.schtml、Agreement.schtml、Profile.schtml 和 Rate.schtml) 上出現 CORS 問題）。

知道如何解決這個問題嗎？

謝謝。