C#確認(rèn)對(duì)話框在Web應(yīng)用中的實(shí)現(xiàn)方式

c#
小樊
86
2024-09-04 13:56:31

在ASP.NET Web應(yīng)用程序中，可以使用JavaScript和jQuery UI庫(kù)來實(shí)現(xiàn)確認(rèn)對(duì)話框。這里是一個(gè)簡(jiǎn)單的示例：

  1. 首先，確保在項(xiàng)目中引用了jQuery和jQuery UI庫(kù)。在_Layout.cshtml文件中添加以下代碼：
<head>
    ...
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
  1. 在需要顯示確認(rèn)對(duì)話框的按鈕或鏈接上添加一個(gè)onclick事件處理程序，如下所示：
  1. 創(chuàng)建一個(gè)JavaScript函數(shù)showConfirmDialog()，用于顯示確認(rèn)對(duì)話框。在_Layout.cshtml或其他JavaScript文件中添加以下代碼：
function showConfirmDialog() {
    $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: {
            "確定": function () {
                $(this).dialog("close");
                // 在這里執(zhí)行確認(rèn)操作，例如發(fā)送AJAX請(qǐng)求
            },
            "取消": function () {
                $(this).dialog("close");
            }
        }
    });
}
  1. 創(chuàng)建一個(gè)HTML元素，用于顯示確認(rèn)對(duì)話框的內(nèi)容。將以下代碼添加到視圖文件中：
<div id="dialog-confirm" title="確認(rèn)刪除" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>您確定要?jiǎng)h除這條記錄嗎？</p>
</div>

現(xiàn)在，當(dāng)用戶點(diǎn)擊“刪除”按鈕時(shí)，將顯示一個(gè)確認(rèn)對(duì)話框。用戶可以選擇“確定”或“取消”，并根據(jù)需要執(zhí)行相應(yīng)的操作。

0 踩