Razor 页面内的 Razor 组件内的 HTML 按钮答案

【问题标题】：HTML button inside a Razor component within a Razor pageRazor 页面内的 Razor 组件内的 HTML 按钮
【发布时间】：2021-10-07 13:51:50
【问题描述】：

我有一个名为 CreateForm 的页面在我的 CreateForm 页面上，客户输入数据后，他们可以在我将其保存到数据库之前预览他们的输入。他们的 Preview 是一个 Razor 组件，包含一个要提交的 html 按钮。

我遇到的问题是，如果客户点击满意，他可能会多次点击按钮创建多个副本。因此，我想在第一次单击后禁用该按钮。如何抓住按钮的手柄？

从 CreateForm razor 页面，我有这个嵌入的 Razor 组件

    <CustomerPreviewRequest HeadingToShow="@HeadingToShowPreviewCustomerScreen"
                            onBack="MoveToPreviousPage"
                            CurrentCustomerSubmission="@_model">

    </CustomerPreviewRequest>

在 CustomerPreviewRequest 中，我是这样定义按钮的

            <button aria-label="Submit Request." type="submit" class="login100-form-btn" style="background-color:#1a2b57"
                    tabindex="0" id="submitForm">
                Submit Request
            </button>

【问题讨论】：

标签： html asp.net-core button razor

【解决方案1】：

您是否只希望客户提交一次数据然后禁用提交按钮？你可以看看这个简单的演示：

查看：

<p style="text-align:center"> 
    <form id="yourFormId" name="yourFormId" method="post" action="#">

        <input type="text" /><br />
        <input type="submit" class="submitBtn" value="Submit Requestt" />
    </form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>

结果：

【讨论】：

我希望用 C#/Blazor 做到这一点，而不是求助于 jQuery/JavaScript。