如何在 ASP.NET Core MVC razor 视图中使用脚本标签答案

【问题标题】：How to use script tag in an ASP.NET Core MVC razor view如何在 ASP.NET Core MVC razor 视图中使用脚本标签
【发布时间】：2023-01-03 01:16:01
【问题描述】：

我想在 MVC 项目的剃刀视图中使用 javascript。我想通过单击发布按钮向用户显示一条消息。我将脚本标记放在页面下方的 Section 中，但在按 F12 时它显示 'btn' is null。我正在 Firefox 的 IISExpress 上测试我的项目

<form method="post">
--------a few input fields in a form-------
 <button id="button" type="submit" class="btn btn-lg btn-success">send</button>
</form>
<div class="submit-progress d-none">
    <label>be patient please...</label>
</div>
@section scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.7/js/fileinput.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const btn = document.getElementById("#button");
            btn.addEventListener("click", function () {
                $(btn).prop("disabled", true);
                $(".submit-progress").removeClass("d-none");
            })
        });
    </script>
}

【问题讨论】：

标签： javascript jquery asp.net-core

【解决方案1】：

您的代码存在多个问题，主要是由于混合了 jQuery 和本机 JavaScript 方法。您可以通过修复显示的 3 行以使用 jQuery 来使其工作。请注意，“this”指的是事件处理程序所附加到的元素，在本例中是按钮。

$(document).ready(function() {
  // const btn = document.getElementById("#button"); <-- REMOVE
  $("#button").click(function() { // <-- CHANGE
    $(this).prop("disabled", true); // <-- CHANGE
    $(".submit-progress").removeClass("d-none");
  })
});

【讨论】：

谢啦！你能帮我解决另一个问题吗？在我的表单中，我有一个客户端验证，这意味着如果您在没有填写表单的情况下点击发送按钮，则会出现验证标记错误，而不会发送到服务器。问题在于出现 .submit-progress div。我希望它仅在用户填写表格并点击发送按钮时出现

【解决方案2】：

使用 getElementById 时，您只需要传递名称而不是选择器#

const btn = document.getElementById("button");

您已正确使用脚本部分。

【讨论】：

投了赞成票，因为这是最简单的答案，尽管我认为 OP 还需要了解他们在混乱的代码沙拉中混合了 jQuery 和本机 js。