jquery - 在 MVC 中提供用户通知/确认的推荐方法是什么？

Question

我遇到的一个常见场景是在用户执行操作后向他们提供通知/确认以告知他们成功。

例如，假设用户在反馈表单上提供反馈，然后单击提交反馈。您可能希望在执行一些验证后显示“感谢您的反馈”消息，例如他们在数据库中有有效的电子邮件。一些伪代码:

public ActionResult SubmitFeedback(string Feedback, int UserID)
{
    MyDataContext db = new DataContext()

    if(db.usp_HasValidEmail(UserID)) //Check user has provided a valid email
        return View("Index"); //Return view and display confirmation
    else
        ModelState.AddModelError("InvalidEmail", "We do not hold an email record for you. Please add one below");
        return View("Index);
}

我了解如何使用 Html.ValidationMessage 等来验证条目。这很好，我通常在客户端使用 jQuery 或在操作的早期(即在开始之前)检查无效条目点击数据库)，如果存在无效条目，则退出我的操作。

但是，如果所有条目都有效并且您想要显示确认消息，该怎么办？

选项 1:拥有完全独立的 View

这似乎违反了 DRY 原则，因为使用全新的 View(和 ViewModel)来显示几乎相同的信息(除了用户通知)。

选项 2: View 中的条件逻辑

在这种情况下，我可以在 View 中添加一个条件语句，用于检查在 SubmitFeedback 操作中传递的某些 TempData 是否存在。再次，伪代码:

   <% if(TempData["UserNotification"] != null {%>
   <div class="notification">Thanks for your Feedback&#33;</div>
   <% } %>

选项 3:使用 jQuery 在页面加载时检查 TempData

在这种情况下，我将有一个隐藏字段，我将通过 SubmitFeedback 操作填充 TempData。然后我将使用 jQuery 来检查隐藏字段的值。更多伪代码:

<%=Html.Hidden("HiddenField", TempData["UserNotification"])%> //in View

$(document).ready(function() {
    if ($("input[name='HiddenField']").length > 0)
        $('div.notification').show();
        setTimeout(function() { $('div.notification').fadeOut(); }, 3000);
});

我对此的初步想法是:

• 选项 1:完全分离 View ，但似乎杀伤力过大且效率低下(违反了 DRY)
• 选项 2:足够简单，但 View 中具有条件逻辑(我不会因此而被牺牲在 MVC 祭坛上吗？!？)
• 选项 3:感觉事情过于复杂。但它确实避免了 View 中的逻辑。

你说什么？选项 1、2、3 还是没有？有没有更好的办法？

请增强我的编码模式!

Answer 1

我喜欢选项 1。而且您不需要条件，并且它可以在禁用 javascript 的情况下工作。只需将其粘贴在母版页中的某个位置就可以了:

<div class="notification">
    <%= Html.Encode(TempData["Notification"]) %>
</div>

您当然可以通过使用一些不错的插件(例如jGrowl)来逐步增强/动画化它。或Gritter或者甚至看看 how StackOverflow does it .

另一个解决方案是编写一个可能是最简洁的助手:

public static class HtmlExtensions
{
    public static MvcHtmlString Notification(this HtmlHelper htmlHelper)
    {
        // Look first in ViewData
        var notification = htmlHelper.ViewData["Notification"] as string;
        if (string.IsNullOrEmpty(notification))
        {
            // Not found in ViewData, try TempData
            notification = htmlHelper.ViewContext.TempData["notification"] as string;
        }

        // You may continue searching for a notification in Session, Request, ... if you will

        if (string.IsNullOrEmpty(notification))
        {
            // no notification found
            return MvcHtmlString.Empty;
        }

        return FormatNotification(notification);
    }

    private static MvcHtmlString FormatNotification(string message)
    {
        var div = new TagBuilder("div");
        div.AddCssClass("notification");
        div.SetInnerText(message);
        return MvcHtmlString.Create(div.ToString());
    }

}

然后在你的主人中:

<%= Html.Notification() %>