如何在ASP.NET MVC中显示jQuery ui DialogBox

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="openDialog">打开Dialog Box</button>

<div id="dialog" style="display: none;">
    <p>这是Dialog Box的内容。</p>
</div>

<script>
    $(document).ready(function() {
        $("#openDialog").click(function() {
            $("#dialog").dialog({
                modal: true, // 设置为模态对话框，禁止用户操作其他页面元素
                title: "Dialog Box 标题", // 设置Dialog Box的标题
                width: 400, // 设置Dialog Box的宽度
                height: 200, // 设置Dialog Box的高度
                buttons: {
                    "确定": function() {
                        $(this).dialog("close"); // 点击确定按钮后关闭Dialog Box
                    }
                }
            });
        });
    });
</script>