在ASP.NET MVC中实现Toastr通知:提升用户体验的分步指南

💡 原文英文,约500词,阅读约需2分钟。
📝

内容提要

Toastr是一个简单而强大的JavaScript库,用于向用户显示通知。本指南将介绍如何将Toastr集成到ASP.NET MVC应用程序中,利用TempData根据控制器中的操作显示成功或错误消息。首先,需要将Toastr添加到项目中。然后创建一个处理Toastr通知的部分视图。接下来,在主布局文件中包含部分视图。然后更新控制器以设置TempData值。最后,运行应用程序并执行操作,应该能看到根据操作结果显示的Toastr通知。

🔎

延伸解读

TempData 在通知机制中的关键作用

文章利用 TempData 在控制器动作之间传递成功或错误消息。TempData 是 ASP.NET MVC 中用于在重定向后保留数据的机制,它基于 Session 或 Cookie 实现,适合一次性消息传递。在示例中,创建、更新或删除操作后,控制器设置 TempData["success"] 或 TempData["error"],随后重定向到 Index 动作,部分视图读取并显示通知。这种方式确保了消息在页面跳转后仍能呈现,但需注意 TempData 的生命周期仅限于下一次请求。

部分视图与布局集成的优势

将通知逻辑封装在 _Notification.cshtml 部分视图中,并在主布局 _Layout.cshtml 中通过 <partial name="_Notification" /> 引入,使得所有使用该布局的页面都能自动显示通知。这种设计避免了在每个视图中重复编写通知代码,提高了可维护性。同时,部分视图内根据 TempData 中是否存在 error 或 success 来条件性渲染脚本,确保只有存在消息时才加载 Toastr 相关资源,减少了不必要的网络请求。

Toastr 集成中的资源加载细节

文章示例中,Toastr 的 JavaScript 和 CSS 通过 CDN 引入,并提供了完整性哈希(integrity)和跨域策略(crossorigin)属性,这有助于确保资源未被篡改。值得注意的是,在部分视图中,jQuery 和 Toastr 的脚本被重复引入,且仅在存在 TempData 消息时加载。这种做法虽然避免了无消息时的资源开销,但可能导致脚本重复加载。实际项目中,建议将脚本引用移至布局或使用捆绑打包,以优化性能。

控制器中通知设置的实践模式

示例控制器 VillaController 在 Create、Update、Delete 动作中,根据 ModelState 验证结果或数据库操作结果设置 TempData 消息。成功时设置 success 消息并重定向到 Index,失败时设置 error 消息并返回原视图。这种模式将通知逻辑与业务逻辑分离,使代码清晰。但需注意,在返回视图时,TempData 消息会在当前请求中立即被部分视图读取并显示,而重定向后则在下一次请求中显示,两者均能正常工作。

🏷️

标签

➡️

继续阅读