Progress Telerik 教程（六）：对话框与通知组件完全指南

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290

1. 对话框组件概述

对话框和通知组件是现代Web应用程序中不可缺少的用户界面元素，它们提供了与用户进行交互、显示信息和获取用户反馈的重要方式。Telerik UI提供了丰富的对话框和通知组件，满足各种用户交互需求。

1.1 主要组件类型

对话框类组件：

Window（窗口）
Dialog（对话框）
Alert（警告框）
Confirm（确认框）
Prompt（输入框）

通知类组件：

Notification（通知）
Tooltip（工具提示）
Popover（弹出框）

1.2 适用场景

用户操作确认和反馈
信息展示和详细查看
表单输入和数据编辑
系统消息和状态通知
帮助信息和操作指导

2. Modal 窗口

2.1 基础 Window 控件

@(Html.Kendo().Window()
    .Name("basicWindow")
    .Title("基础窗口")
    .Content("这是一个基础的 Telerik 窗口控件。")
    .Width(400)
    .Height(300)
    .Position(settings => settings.Top(100).Left(100))
    .Visible(false)
    .Modal(true)
    .Actions(actions => actions
        .Pin()
        .Minimize()
        .Maximize()
        .Close()
    )
)

<button type="button" class="btn btn-primary" onclick="openBasicWindow()">打开窗口</button>

<script>
function openBasicWindow() {
    var window = $("#basicWindow").data("kendoWindow");
    window.center();
    window.open();
}
</script>

2.2 带内容模板的窗口

@(Html.Kendo().Window()
    .Name("templateWindow")
    .Title("用户信息")
    .Width(500)
    .Height(400)
    .Modal(true)
    .Visible(false)
    .LoadContentFrom("GetUserDetails", "User")
    .Events(events => events
        .Open("onWindowOpen")
        .Close("onWindowClose")
        .Refresh("onWindowRefresh")
    )
)

<button type="button" class="btn btn-info" onclick="openUserWindow(123)">查看用户详情</button>

<script>
function openUserWindow(userId) {
    var window = $("#templateWindow").data("kendoWindow");
    
    // 动态设置内容URL
    window.refresh({
        url: "/User/GetUserDetails",
        data: { id: userId }
    });
    
    window.center().open();
}

function onWindowOpen(e) {
    console.log("窗口已打开");
    // 添加加载动画
    e.sender.content("<div class='text-center'><i class='fa fa-spinner fa-spin'></i> 加载中...</div>");
}

function onWindowClose(e) {
    console.log("窗口已关闭");
}

function onWindowRefresh(e) {
    console.log("窗口内容已刷新");
}
</script>

2.3 表单编辑窗口

@(Html.Kendo().Window()
    .Name("editWindow")
    .Title("编辑产品")
    .Width(600)
    .Height(500)
    .Modal(true)
    .Visible(false)
    .Actions(actions => actions.Close())
    .Content(@<text>
        <div id="editForm">
            <div class="form-group mb-3">
                <label class="form-label">产品名称：</label>
                @(Html.Kendo().TextBox()
                    .Name("productName")
                    .Placeholder("请输入产品名称")
                    .HtmlAttributes(new { @class = "form-control" })
                )
            </div>
            
            <div class="form-group mb-3">
                <label class="form-label">价格：</label>
                @(Html.Kendo().NumericTextBox()
                    .Name("productPrice")
                    .Format("c2")
                    .Min(0)
                    .HtmlAttributes(new { @class = "form-control" })
                )
            </div>
            
            <div class="form-group mb-3">
                <label class="form-label">分类：</label>
                @(Html.Kendo().DropDownList()
                    .Name("productCategory")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new[]
                    {
                        new { Text = "电子产品", Value = "electronics" },
                        new { Text = "服装", Value = "clothing" },
                        new { Text = "家居", Value = "home" }
                    })
                    .HtmlAttributes(new { @class = "form-control" })
                )
            </div>
            
            <div class="form-group mb-3">
                <label class="form-label">描述：</label>
                @(Html.Kendo().TextArea()
                    .Name("productDescription")
                    .Rows(4)
                    .HtmlAttributes(new { @class = "form-control" })
                )
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-success" onclick="saveProduct()">
                    <i class="fa fa-save"></i> 保存
                </button>
                <button type="button" class="btn btn-secondary" onclick="closeEditWindow()">
                    <i class="fa fa-times"></i> 取消
                </button>
            </div>
        </div>
    </text>)
)

<button type="button" class="btn btn-warning" onclick="editProduct(1)">编辑产品</button>

<script>
function editProduct(productId) {
    // 加载产品数据
    $.get('/Product/GetProduct/' + productId, function(product) {
        $("#productName").data("kendoTextBox").value(product.Name);
        $("#productPrice").data("kendoNumericTextBox").value(product.Price);
        $("#productCategory").data("kendoDropDownList").value(product.Category);
        $("#productDescription").data("kendoTextArea").value(product.Description);
        
        // 存储产品ID供保存时使用
        $("#editWindow").data("productId", productId);
        
        // 打开编辑窗口
        $("#editWindow").data("kendoWindow").center().open();
    });
}

function saveProduct() {
    var productId = $("#editWindow").data("productId");
    var productData = {
        ID: productId,
        Name: $("#productName").data("kendoTextBox").value(),
        Price: $("#productPrice").data("kendoNumericTextBox").value(),
        Category: $("#productCategory").data("kendoDropDownList").value(),
        Description: $("#productDescription").data("kendoTextArea").value()
    };
    
    $.post('/Product/UpdateProduct', productData, function(result) {
        if (result.success) {
            showNotification("产品保存成功", "success");
            closeEditWindow();
            // 刷新产品列表
            if (typeof refreshProductGrid === 'function') {
                refreshProductGrid();
            }
        } else {
            showNotification("保存失败：" + result.message, "error");
        }
    });
}

function closeEditWindow() {
    $("#editWindow").data("kendoWindow").close();
}
</script>

2.4 动态窗口创建

<button type="button" class="btn btn-primary" onclick="createDynamicWindow()">创建动态窗口</button>

<script>
function createDynamicWindow() {
    // 创建窗口内容
    var content = '<div class="p-3">' +
                  '<h5>动态创建的窗口</h5>' +
                  '<p>这是通过JavaScript动态创建的窗口。</p>' +
                  '<div class="progress mb-3">' +
                  '<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
                  '</div>' +
                  '<button class="btn btn-info" onclick="startProgress()">开始进度</button>' +
                  '</div>';
    
    // 创建窗口
    var window = $("<div></div>").kendoWindow({
        title: "动态窗口",
        content: content,
        width: 400,
        height: 250,
        modal: true,
        visible: false,
        resizable: false,
        actions: ["Close"],
        close: function() {
            // 窗口关闭时销毁
            this.destroy();
        }
    }).data("kendoWindow");
    
    window.center().open();
}

function startProgress() {
    var progressBar = $(".progress-bar");
    var progress = 0;
    
    var interval = setInterval(function() {
        progress += 10;
        progressBar.css("width", progress + "%");
        progressBar.text(progress + "%");
        
        if (progress >= 100) {
            clearInterval(interval);
            setTimeout(function() {
                showNotification("操作完成", "success");
            }, 500);
        }
    }, 200);
}
</script>

3. 提示框组件

3.1 Alert 警告框

<div class="btn-group mb-3" role="group">
    <button type="button" class="btn btn-info" onclick="showInfoAlert()">信息提示</button>
    <button type="button" class="btn btn-warning" onclick="showWarningAlert()">警告提示</button>
    <button type="button" class="btn btn-danger" onclick="showErrorAlert()">错误提示</button>
    <button type="button" class="btn btn-success" onclick="showSuccessAlert()">成功提示</button>
</div>

<script>
function showInfoAlert() {
    kendo.alert("这是一条信息提示消息。").then(function() {
        console.log("信息提示已关闭");
    });
}

function showWarningAlert() {
    kendo.alert("注意：请检查您的输入内容！");
}

function showErrorAlert() {
    kendo.alert("错误：操作执行失败，请稍后重试。");
}

function showSuccessAlert() {
    kendo.alert("成功：您的操作已完成。");
}
</script>

3.2 Confirm 确认框

<div class="btn-group mb-3" role="group">
    <button type="button" class="btn btn-danger" onclick="deleteItem()">删除项目</button>
    <button type="button" class="btn btn-warning" onclick="resetData()">重置数据</button>
    <button type="button" class="btn btn-secondary" onclick="exitApplication()">退出应用</button>
</div>

<script>
function deleteItem() {
    kendo.confirm("确定要删除这个项目吗？删除后无法恢复。")
        .then(function() {
            // 用户点击确定
            showNotification("项目已删除", "success");
            console.log("执行删除操作");
        }, function() {
            // 用户点击取消
            console.log("取消删除操作");
        });
}

function resetData() {
    kendo.confirm({
        title: "重置确认",
        message: "这将清除所有数据，您确定要继续吗？"
    }).then(function() {
        // 显示重置进度
        showProgressDialog("正在重置数据...", function() {
            showNotification("数据重置完成", "info");
        });
    });
}

function exitApplication() {
    kendo.confirm({
        title: "退出应用",
        message: "您有未保存的更改，确定要退出吗？",
        okText: "退出",
        cancelText: "留在这里"
    }).then(function() {
        window.location.href = "/logout";
    });
}
</script>

3.3 Prompt 输入框

<div class="btn-group mb-3" role="group">
    <button type="button" class="btn btn-primary" onclick="getUserName()">获取用户名</button>
    <button type="button" class="btn btn-info" onclick="setCustomValue()">设置自定义值</button>
    <button type="button" class="btn btn-success" onclick="addNewItem()">添加新项</button>
</div>

<script>
function getUserName() {
    kendo.prompt("请输入您的姓名：", "")
        .then(function(data) {
            if (data) {
                showNotification("欢迎，" + data + "！", "success");
            }
        }, function() {
            console.log("用户取消输入");
        });
}

function setCustomValue() {
    kendo.prompt({
        title: "设置数值",
        message: "请输入一个数值（1-100）：",
        value: "50"
    }).then(function(data) {
        var value = parseInt(data);
        if (isNaN(value) || value < 1 || value > 100) {
            showNotification("请输入有效的数值（1-100）", "error");
        } else {
            updateSliderValue(value);
            showNotification("数值已设置为：" + value, "info");
        }
    });
}

function addNewItem() {
    kendo.prompt({
        title: "添加新项",
        message: "请输入项目名称：",
        value: "",
        okText: "添加",
        cancelText: "取消"
    }).then(function(data) {
        if (data && data.trim()) {
            addItemToList(data.trim());
            showNotification("项目 '" + data + "' 已添加", "success");
        } else {
            showNotification("项目名称不能为空", "warning");
        }
    });
}

function updateSliderValue(value) {
    // 更新页面中的滑块值
    if ($("#customSlider").length) {
        $("#customSlider").data("kendoSlider").value(value);
    }
}

function addItemToList(itemName) {
    // 添加项目到列表
    if ($("#itemList").length) {
        $("#itemList").append('<li class="list-group-item">' + itemName + '</li>');
    }
}
</script>

4. 消息通知

4.1 基础 Notification 组件

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(position => position.Pinned(true).Top(30).Right(30))
    .AutoHideAfter(5000)
    .Stacking(NotificationStackingSettings.Up)
    .Templates(templates => {
        templates.Add().Type("info").Template("<div class='alert alert-info'><i class='fa fa-info-circle'></i> #= message #</div>");
        templates.Add().Type("success").Template("<div class='alert alert-success'><i class='fa fa-check-circle'></i> #= message #</div>");
        templates.Add().Type("warning").Template("<div class='alert alert-warning'><i class='fa fa-exclamation-triangle'></i> #= message #</div>");
        templates.Add().Type("error").Template("<div class='alert alert-danger'><i class='fa fa-times-circle'></i> #= message #</div>");
    })
)

<div class="btn-group mb-3" role="group">
    <button type="button" class="btn btn-info" onclick="showInfo()">显示信息</button>
    <button type="button" class="btn btn-success" onclick="showSuccess()">显示成功</button>
    <button type="button" class="btn btn-warning" onclick="showWarning()">显示警告</button>
    <button type="button" class="btn btn-danger" onclick="showError()">显示错误</button>
</div>

<script>
function showNotification(message, type) {
    var notification = $("#notification").data("kendoNotification");
    notification.show(message, type || "info");
}

function showInfo() {
    showNotification("这是一条信息通知", "info");
}

function showSuccess() {
    showNotification("操作执行成功！", "success");
}

function showWarning() {
    showNotification("请注意检查您的输入", "warning");
}

function showError() {
    showNotification("发生错误，请稍后重试", "error");
}
</script>

4.2 自定义通知样式

@(Html.Kendo().Notification()
    .Name("customNotification")
    .Position(position => position.Pinned(true).Top(30).Left(30))
    .AutoHideAfter(0) // 不自动隐藏
    .Width(350)
    .Templates(templates => {
        templates.Add().Type("custom").Template(
            "<div class='custom-notification'>" +
                "<div class='notification-header'>" +
                    "<span class='notification-title'>#= title #</span>" +
                    "<button class='btn-close' onclick='closeNotification(this)'>&times;</button>" +
                "</div>" +
                "<div class='notification-body'>" +
                    "<p>#= message #</p>" +
                    "# if (actions) { #" +
                    "<div class='notification-actions'>" +
                        "# for (var i = 0; i < actions.length; i++) { #" +
                        "<button class='btn btn-sm #= actions[i].class #' onclick='#= actions[i].action #'>" +
                            "#= actions[i].text #" +
                        "</button>" +
                        "# } #" +
                    "</div>" +
                    "# } #" +
                "</div>" +
            "</div>"
        );
    })
)

<button type="button" class="btn btn-primary" onclick="showCustomNotification()">显示自定义通知</button>

<style>
.custom-notification {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
}

.notification-header {
    background: #f8f9fa;
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-title {
    font-weight: 600;
    color: #333;
}

.btn-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
}

.notification-body {
    padding: 16px;
}

.notification-actions {
    margin-top: 12px;
    text-align: right;
}

.notification-actions .btn {
    margin-left: 8px;
}
</style>

<script>
function showCustomNotification() {
    var notification = $("#customNotification").data("kendoNotification");
    
    notification.show({
        title: "系统更新通知",
        message: "系统将在今晚23:00进行维护更新，预计需要2小时。更新期间服务可能不可用。",
        actions: [
            {
                text: "了解详情",
                class: "btn-info",
                action: "showUpdateDetails()"
            },
            {
                text: "稍后提醒",
                class: "btn-secondary",
                action: "remindLater()"
            }
        ]
    }, "custom");
}

function closeNotification(element) {
    $(element).closest('.k-notification').find('.k-notification-wrap').trigger('click');
}

function showUpdateDetails() {
    kendo.alert("更新详情：本次更新将优化系统性能，修复已知问题，并添加新功能。");
    closeAllCustomNotifications();
}

function remindLater() {
    showNotification("将在1小时后再次提醒您", "info");
    closeAllCustomNotifications();
}

function closeAllCustomNotifications() {
    var notification = $("#customNotification").data("kendoNotification");
    notification.hide();
}
</script>

4.3 进度通知

<button type="button" class="btn btn-success" onclick="startFileUpload()">开始文件上传</button>

<script>
function showProgressNotification(title, initialProgress) {
    var progressHtml = 
        '<div class="progress-notification">' +
            '<h6>' + title + '</h6>' +
            '<div class="progress mb-2">' +
                '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                     'role="progressbar" style="width: ' + initialProgress + '%">' +
                    '<span class="progress-text">' + initialProgress + '%</span>' +
                '</div>' +
            '</div>' +
            '<button class="btn btn-sm btn-outline-secondary" onclick="cancelOperation()">取消</button>' +
        '</div>';
    
    var notification = $("#notification").data("kendoNotification");
    notification.show(progressHtml, "info");
    
    return notification;
}

function updateProgress(progress) {
    var progressBar = $('.progress-notification .progress-bar');
    var progressText = $('.progress-notification .progress-text');
    
    progressBar.css('width', progress + '%');
    progressText.text(progress + '%');
    
    if (progress >= 100) {
        progressBar.removeClass('progress-bar-animated');
        progressBar.addClass('bg-success');
        setTimeout(function() {
            showNotification("文件上传完成！", "success");
        }, 1000);
    }
}

function startFileUpload() {
    showProgressNotification("正在上传文件...", 0);
    
    var progress = 0;
    var interval = setInterval(function() {
        progress += Math.random() * 15;
        if (progress > 100) progress = 100;
        
        updateProgress(Math.round(progress));
        
        if (progress >= 100) {
            clearInterval(interval);
        }
    }, 500);
    
    // 存储定时器ID供取消使用
    window.uploadInterval = interval;
}

function cancelOperation() {
    if (window.uploadInterval) {
        clearInterval(window.uploadInterval);
        showNotification("操作已取消", "warning");
    }
}
</script>

5. 用户交互设计与常见用法

5.1 Tooltip 工具提示

<div class="tooltip-examples mb-4">
    <h5>工具提示示例</h5>
    
    <button type="button" 
            class="btn btn-primary me-2" 
            title="这是一个基础的工具提示">
        基础提示
    </button>
    
    <button type="button" 
            class="btn btn-info me-2" 
            data-tooltip="custom"
            data-title="自定义工具提示"
            data-content="这是一个带有自定义样式的工具提示">
        自定义提示
    </button>
    
    <button type="button" 
            class="btn btn-warning me-2"
            id="richTooltip">
        富内容提示
    </button>
</div>

@(Html.Kendo().Tooltip()
    .For("body")
    .Filter("[title]")
    .Position(TooltipPosition.Top)
    .Width(200)
)

@(Html.Kendo().Tooltip()
    .For("body")
    .Filter("[data-tooltip='custom']")
    .Content(content => content.Template(
        "<div class='custom-tooltip'>" +
            "<h6>#= target.data('title') #</h6>" +
            "<p>#= target.data('content') #</p>" +
        "</div>"
    ))
    .Position(TooltipPosition.Right)
    .Width(250)
)

@(Html.Kendo().Tooltip()
    .For("#richTooltip")
    .Content(content => content.Template(
        "<div class='rich-tooltip'>" +
            "<div class='tooltip-header'>" +
                "<i class='fa fa-info-circle text-primary'></i>" +
                "<strong>帮助信息</strong>" +
            "</div>" +
            "<div class='tooltip-body'>" +
                "<p>这个按钮可以执行以下操作：</p>" +
                "<ul>" +
                    "<li>创建新项目</li>" +
                    "<li>编辑现有项目</li>" +
                    "<li>删除选中项目</li>" +
                "</ul>" +
                "<small class='text-muted'>点击获取更多帮助</small>" +
            "</div>" +
        "</div>"
    ))
    .Width(300)
    .Height(180)
    .Position(TooltipPosition.Bottom)
)

<style>
.custom-tooltip {
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
}

.custom-tooltip h6 {
    margin: 0 0 8px 0;
    font-weight: 600;
}

.rich-tooltip {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.tooltip-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
}

.tooltip-header i {
    margin-right: 8px;
}

.tooltip-body {
    padding: 15px;
}

.tooltip-body ul {
    margin: 10px 0;
    padding-left: 20px;
}
</style>

5.2 Popover 弹出框

<div class="popover-examples mb-4">
    <h5>弹出框示例</h5>
    
    <button type="button" 
            class="btn btn-outline-primary me-2" 
            id="userProfile">
        用户信息
    </button>
    
    <button type="button" 
            class="btn btn-outline-success me-2" 
            id="quickActions">
        快速操作
    </button>
    
    <button type="button" 
            class="btn btn-outline-info" 
            id="settingsMenu">
        设置选项
    </button>
</div>

@(Html.Kendo().Popover()
    .For("#userProfile")
    .ShowOn(PopoverShowOn.Click)
    .Position(PopoverPosition.Bottom)
    .Width(300)
    .Height(200)
    .Body("<div id='userProfileContent'></div>")
    .Events(events => events.Show("loadUserProfile"))
)

@(Html.Kendo().Popover()
    .For("#quickActions")
    .ShowOn(PopoverShowOn.Click)
    .Position(PopoverPosition.Right)
    .Width(250)
    .Body(@<text>
        <div class="quick-actions-menu">
            <h6 class="mb-3">快速操作</h6>
            <div class="d-grid gap-2">
                <button class="btn btn-sm btn-primary" onclick="newDocument()">
                    <i class="fa fa-plus"></i> 新建文档
                </button>
                <button class="btn btn-sm btn-info" onclick="openRecent()">
                    <i class="fa fa-clock"></i> 打开最近
                </button>
                <button class="btn btn-sm btn-success" onclick="saveAll()">
                    <i class="fa fa-save"></i> 保存全部
                </button>
                <button class="btn btn-sm btn-secondary" onclick="showHelp()">
                    <i class="fa fa-question-circle"></i> 帮助
                </button>
            </div>
        </div>
    </text>)
)

@(Html.Kendo().Popover()
    .For("#settingsMenu")
    .ShowOn(PopoverShowOn.Click)
    .Position(PopoverPosition.Left)
    .Width(280)
    .Body(@<text>
        <div class="settings-menu">
            <h6 class="mb-3">设置选项</h6>
            <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="darkMode" checked>
                <label class="form-check-label" for="darkMode">深色模式</label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="notifications" checked>
                <label class="form-check-label" for="notifications">推送通知</label>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="autoSave">
                <label class="form-check-label" for="autoSave">自动保存</label>
            </div>
            <hr>
            <button class="btn btn-sm btn-outline-primary w-100">高级设置</button>
        </div>
    </text>)
)

<script>
function loadUserProfile() {
    // 模拟加载用户数据
    var userHtml = 
        '<div class="user-profile">' +
            '<div class="text-center mb-3">' +
                '<img src="/images/avatar.jpg" class="rounded-circle" width="60" height="60" alt="头像">' +
                '<h6 class="mt-2 mb-1">张三</h6>' +
                '<small class="text-muted">软件工程师</small>' +
            '</div>' +
            '<div class="user-stats row text-center">' +
                '<div class="col-4">' +
                    '<strong>128</strong><br>' +
                    '<small>项目</small>' +
                '</div>' +
                '<div class="col-4">' +
                    '<strong>1.2k</strong><br>' +
                    '<small>提交</small>' +
                '</div>' +
                '<div class="col-4">' +
                    '<strong>95%</strong><br>' +
                    '<small>完成率</small>' +
                '</div>' +
            '</div>' +
        '</div>';
    
    $("#userProfileContent").html(userHtml);
}

function newDocument() {
    showNotification("正在创建新文档...", "info");
    closeAllPopovers();
}

function openRecent() {
    showNotification("显示最近文档列表", "info");
    closeAllPopovers();
}

function saveAll() {
    showNotification("已保存所有文档", "success");
    closeAllPopovers();
}

function showHelp() {
    showNotification("打开帮助文档", "info");
    closeAllPopovers();
}

function closeAllPopovers() {
    $("[data-role='popover']").each(function() {
        $(this).data("kendoPopover").hide();
    });
}
</script>

5.3 交互式反馈设计

<div class="interaction-examples">
    <h5>交互反馈示例</h5>
    
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">操作反馈</div>
                <div class="card-body">
                    <button class="btn btn-primary w-100 mb-2" onclick="performAction('save')">
                        保存文档
                    </button>
                    <button class="btn btn-danger w-100 mb-2" onclick="performAction('delete')">
                        删除文件
                    </button>
                    <button class="btn btn-success w-100" onclick="performAction('export')">
                        导出数据
                    </button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">状态提示</div>
                <div class="card-body">
                    <button class="btn btn-info w-100 mb-2" onclick="checkConnection()">
                        检查网络连接
                    </button>
                    <button class="btn btn-warning w-100 mb-2" onclick="validateForm()">
                        验证表单
                    </button>
                    <button class="btn btn-secondary w-100" onclick="systemStatus()">
                        系统状态
                    </button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">确认操作</div>
                <div class="card-body">
                    <button class="btn btn-outline-danger w-100 mb-2" onclick="confirmDelete()">
                        清空回收站
                    </button>
                    <button class="btn btn-outline-warning w-100 mb-2" onclick="confirmReset()">
                        重置设置
                    </button>
                    <button class="btn btn-outline-secondary w-100" onclick="confirmLogout()">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function performAction(action) {
    var messages = {
        save: { text: "文档保存成功", type: "success" },
        delete: { text: "文件删除成功", type: "success" },
        export: { text: "数据导出完成", type: "success" }
    };
    
    // 显示加载状态
    showLoadingNotification("正在执行操作...");
    
    // 模拟异步操作
    setTimeout(function() {
        hideLoadingNotification();
        var message = messages[action];
        showNotification(message.text, message.type);
    }, 2000);
}

function checkConnection() {
    showLoadingNotification("正在检查网络连接...");
    
    setTimeout(function() {
        hideLoadingNotification();
        var isOnline = Math.random() > 0.3; // 模拟网络状态
        
        if (isOnline) {
            showNotification("网络连接正常", "success");
        } else {
            showNotification("网络连接异常，请检查您的网络设置", "error");
        }
    }, 1500);
}

function validateForm() {
    var errors = [];
    var warnings = [];
    
    // 模拟表单验证
    if (Math.random() > 0.7) errors.push("邮箱格式不正确");
    if (Math.random() > 0.8) errors.push("密码长度不足");
    if (Math.random() > 0.6) warnings.push("建议使用更强的密码");
    
    if (errors.length > 0) {
        showNotification("表单验证失败：" + errors.join("，"), "error");
    } else if (warnings.length > 0) {
        showNotification("验证通过，但有提示：" + warnings.join("，"), "warning");
    } else {
        showNotification("表单验证通过", "success");
    }
}

function systemStatus() {
    var status = {
        cpu: Math.floor(Math.random() * 100),
        memory: Math.floor(Math.random() * 100),
        disk: Math.floor(Math.random() * 100)
    };
    
    var statusText = `系统状态：CPU ${status.cpu}%，内存 ${status.memory}%，磁盘 ${status.disk}%`;
    
    if (status.cpu > 80 || status.memory > 80 || status.disk > 90) {
        showNotification(statusText + " - 系统负载较高", "warning");
    } else {
        showNotification(statusText + " - 运行正常", "info");
    }
}

function confirmDelete() {
    kendo.confirm({
        title: "确认清空",
        message: "确定要清空回收站吗？此操作不可撤销。",
        okText: "确定清空",
        cancelText: "取消"
    }).then(function() {
        showProgressDialog("正在清空回收站...", function() {
            showNotification("回收站已清空", "success");
        });
    });
}

function confirmReset() {
    kendo.confirm({
        title: "重置设置",
        message: "这将恢复所有设置为默认值，您确定要继续吗？",
        okText: "重置",
        cancelText: "取消"
    }).then(function() {
        showNotification("设置已重置为默认值", "info");
    });
}

function confirmLogout() {
    kendo.confirm({
        title: "退出登录",
        message: "您确定要退出当前账户吗？",
        okText: "退出",
        cancelText: "取消"
    }).then(function() {
        showNotification("正在退出...", "info");
        setTimeout(function() {
            window.location.href = "/login";
        }, 1000);
    });
}

var loadingNotification;

function showLoadingNotification(message) {
    hideLoadingNotification(); // 先隐藏现有的
    
    var notification = $("#notification").data("kendoNotification");
    loadingNotification = notification.show(
        '<div class="loading-notification">' +
            '<i class="fa fa-spinner fa-spin me-2"></i>' +
            message +
        '</div>',
        "info"
    );
}

function hideLoadingNotification() {
    if (loadingNotification) {
        var notification = $("#notification").data("kendoNotification");
        notification.hide();
        loadingNotification = null;
    }
}

function showProgressDialog(message, onComplete) {
    var progressWindow = $("<div></div>").kendoWindow({
        title: "处理中",
        content: 
            '<div class="text-center p-4">' +
                '<div class="mb-3">' + message + '</div>' +
                '<div class="progress">' +
                    '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                         'style="width: 0%"></div>' +
                '</div>' +
            '</div>',
        width: 400,
        height: 200,
        modal: true,
        resizable: false,
        actions: [],
        open: function() {
            var progress = 0;
            var interval = setInterval(function() {
                progress += Math.random() * 20;
                if (progress > 100) progress = 100;
                
                $(this.element).find('.progress-bar').css('width', progress + '%');
                
                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(function() {
                        progressWindow.close();
                        if (onComplete) onComplete();
                    }, 500);
                }
            }.bind(this), 300);
        },
        close: function() {
            this.destroy();
        }
    }).data("kendoWindow");
    
    progressWindow.center().open();
}
</script>

<style>
.user-profile img {
    border: 3px solid #f8f9fa;
}

.user-stats {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    margin-top: 15px;
}

.quick-actions-menu,
.settings-menu {
    padding: 15px;
}

.loading-notification {
    padding: 10px 15px;
    color: #0066cc;
    font-weight: 500;
}

.interaction-examples .card {
    margin-bottom: 20px;
}

.progress-notification {
    padding: 15px;
    min-width: 300px;
}

.progress-notification h6 {
    margin-bottom: 10px;
    color: #333;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
}
</style>

6. 综合实例：用户管理界面

<div class="container-fluid user-management">
    <div class="row">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2>用户管理</h2>
                    <p class="text-muted mb-0">管理系统用户和权限设置</p>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary" onclick="addNewUser()">
                        <i class="fa fa-plus"></i> 新增用户
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="exportUsers()">
                        <i class="fa fa-download"></i> 导出
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="showHelp()">
                        <i class="fa fa-question-circle"></i> 帮助
                    </button>
                </div>
            </div>
            
            <!-- 用户列表表格 -->
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>角色</th>
                            <th>状态</th>
                            <th>最后登录</th>
                            <th width="200">操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="/images/avatar1.jpg" class="rounded-circle me-2" width="32" height="32">
                                    <strong>张三</strong>
                                </div>
                            </td>
                            <td>zhangsan@example.com</td>
                            <td><span class="badge bg-primary">管理员</span></td>
                            <td><span class="badge bg-success">活跃</span></td>
                            <td>2024-01-15 10:30</td>
                            <td>
                                <div class="btn-group-sm" role="group">
                                    <button class="btn btn-outline-info btn-sm" onclick="viewUser(1)" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="btn btn-outline-warning btn-sm" onclick="editUser(1)" title="编辑">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="btn btn-outline-success btn-sm" onclick="resetPassword(1)" title="重置密码">
                                        <i class="fa fa-key"></i>
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm" onclick="deleteUser(1, '张三')" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <!-- 更多用户行... -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 用户编辑窗口 -->
@(Html.Kendo().Window()
    .Name("userEditWindow")
    .Title("编辑用户")
    .Width(600)
    .Height(500)
    .Modal(true)
    .Visible(false)
    .Actions(actions => actions.Close())
    .LoadContentFrom("EditUser", "User")
)

<script>
function addNewUser() {
    var window = $("#userEditWindow").data("kendoWindow");
    window.setOptions({
        title: "新增用户"
    });
    window.refresh("/User/NewUser");
    window.center().open();
}

function viewUser(userId) {
    // 创建用户详情弹出框
    var userDetailHtml = 
        '<div class="user-details p-3">' +
            '<div class="row mb-3">' +
                '<div class="col-md-4 text-center">' +
                    '<img src="/images/avatar1.jpg" class="rounded-circle mb-2" width="80" height="80">' +
                    '<h5>张三</h5>' +
                    '<span class="badge bg-primary">管理员</span>' +
                '</div>' +
                '<div class="col-md-8">' +
                    '<table class="table table-borderless">' +
                        '<tr><td><strong>用户ID:</strong></td><td>' + userId + '</td></tr>' +
                        '<tr><td><strong>邮箱:</strong></td><td>zhangsan@example.com</td></tr>' +
                        '<tr><td><strong>部门:</strong></td><td>技术部</td></tr>' +
                        '<tr><td><strong>创建时间:</strong></td><td>2023-06-15</td></tr>' +
                        '<tr><td><strong>最后登录:</strong></td><td>2024-01-15 10:30</td></tr>' +
                    '</table>' +
                '</div>' +
            '</div>' +
            '<div class="text-end">' +
                '<button class="btn btn-primary" onclick="editUser(' + userId + ')">编辑用户</button>' +
                '<button class="btn btn-secondary ms-2" onclick="closeUserDetail()">关闭</button>' +
            '</div>' +
        '</div>';
    
    var detailWindow = $("<div></div>").kendoWindow({
        title: "用户详情",
        content: userDetailHtml,
        width: 500,
        height: 400,
        modal: true,
        resizable: false,
        actions: ["Close"],
        close: function() {
            this.destroy();
        }
    }).data("kendoWindow");
    
    detailWindow.center().open();
}

function editUser(userId) {
    var window = $("#userEditWindow").data("kendoWindow");
    window.setOptions({
        title: "编辑用户"
    });
    window.refresh("/User/EditUser/" + userId);
    window.center().open();
}

function resetPassword(userId) {
    kendo.confirm({
        title: "重置密码",
        message: "确定要重置该用户的密码吗？新密码将发送到用户邮箱。",
        okText: "确定重置",
        cancelText: "取消"
    }).then(function() {
        showLoadingNotification("正在重置密码...");
        
        // 模拟API调用
        setTimeout(function() {
            hideLoadingNotification();
            showNotification("密码重置成功，新密码已发送到用户邮箱", "success");
        }, 2000);
    });
}

function deleteUser(userId, userName) {
    kendo.confirm({
        title: "删除用户确认",
        message: "确定要删除用户 \"" + userName + "\" 吗？<br/><small class='text-danger'>此操作不可撤销，用户的所有数据都将被删除。</small>",
        okText: "确定删除",
        cancelText: "取消"
    }).then(function() {
        showLoadingNotification("正在删除用户...");
        
        setTimeout(function() {
            hideLoadingNotification();
            showNotification("用户 \"" + userName + "\" 已删除", "success");
            // 从表格中移除行
            removeUserRow(userId);
        }, 1500);
    });
}

function exportUsers() {
    kendo.confirm({
        title: "导出用户数据",
        message: "选择导出格式：",
        okText: "Excel",
        cancelText: "CSV"
    }).then(function() {
        exportToFormat("excel");
    }, function() {
        exportToFormat("csv");
    });
}

function exportToFormat(format) {
    showLoadingNotification("正在生成 " + format.toUpperCase() + " 文件...");
    
    setTimeout(function() {
        hideLoadingNotification();
        showNotification("用户数据已导出为 " + format.toUpperCase() + " 格式", "success");
    }, 2000);
}

function removeUserRow(userId) {
    // 移除表格行（实际项目中应该刷新数据）
    $("tr[data-user-id='" + userId + "']").fadeOut(300, function() {
        $(this).remove();
    });
}

function closeUserDetail() {
    $(".k-window").each(function() {
        var window = $(this).data("kendoWindow");
        if (window && window.options.title === "用户详情") {
            window.close();
        }
    });
}
</script>

<style>
.user-management .table img {
    border: 2px solid #f8f9fa;
}

.user-details .table td {
    padding: 8px 12px;
}

.user-details img {
    border: 3px solid #e9ecef;
}

.btn-group-sm .btn {
    margin-right: 4px;
}

.btn-group-sm .btn:last-child {
    margin-right: 0;
}

.table-responsive {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}
</style>

总结

本教程全面介绍了Telerik对话框与通知组件的使用：

Modal 窗口：
- 基础Window控件配置和使用
- 动态内容加载和表单编辑
- 窗口事件处理和生命周期管理
提示框组件：
- Alert警告框的多种样式
- Confirm确认框的交互设计
- Prompt输入框的数据收集
消息通知：
- Notification组件的基础和高级用法
- 自定义通知样式和进度显示
- 实时反馈和状态更新
用户交互设计：
- Tooltip工具提示的多种形式
- Popover弹出框的复杂内容展示
- 交互式反馈设计模式

通过掌握这些组件，您可以构建用户体验良好的交互界面，提供清晰的操作反馈和信息展示，提升应用程序的整体可用性和专业性。

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290