Was ist der empfohlene Ansatz zur Bereitstellung von Benutzer-Benachrichtigungen / Bestätigungen in MVC?

Question

Ein häufiges Szenario, das mir begegnet, ist die Bereitstellung von Benachrichtigungen/Bestätigungen für Benutzer, nachdem sie eine Aktion durchgeführt haben, um sie über den Erfolg zu informieren.

Nehmen wir zum Beispiel an, ein Benutzer gibt ein Feedback in einem Feedback-Formular und klickt dann auf Feedback abgeben . Möglicherweise möchten Sie eine Nachricht "Danke für Ihr Feedback" anzeigen 後 Sie haben eine Validierung durchgeführt, z. B. haben sie eine gültige E-Mail in der Datenbank. Einige Pseudocode:

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);
}

Ich weiß, wie man Einträge validiert, indem man Html.ValidationMessage usw. Das ist in Ordnung, und ich überprüfe in der Regel auf ungültige Einträge entweder mit jQuery auf der Client-Seite oder früh in meiner Aktion (d. h. bevor ich auf die Datenbank zugreife) und beende meine Aktion, wenn es ungültige Einträge gibt.

Wie sieht es jedoch aus, wenn alle Einträge gültig sind und Sie eine Bestätigungsmeldung anzeigen möchten?

Option 1 : Haben Sie eine völlig separate Ansicht

Dies scheint gegen die DRY-Prinzipien zu verstoßen, da eine völlig neue Ansicht (und ein neues ViewModel) benötigt wird, um fast identische Informationen anzuzeigen, mit Ausnahme der Benutzerbenachrichtigung.

Option 2 : Bedingte Logik in der Ansicht

In diesem Szenario könnte ich eine bedingte Anweisung in der Ansicht haben, die das Vorhandensein einiger TempData überprüft, die in der SubmitFeedback Aktion. Nochmals, Pseudocode:

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

Option 3 : Verwenden Sie jQuery, um beim Laden der Seite nach TempData zu suchen

In diesem Szenario würde ich ein verborgenes Feld haben, das ich mit TempData über die SubmitFeedback Aktion. Ich würde dann jQuery verwenden, um den Wert des verborgenen Feldes zu überprüfen. Mehr Pseudocode:

<%=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);
});

Meine ersten Gedanken dazu sind:

• Option 1: Vollständige Trennung der Ansichten, scheint aber übertrieben und ineffizient zu sein (verstößt gegen DRY)
• Option 2: Einfach genug, aber mit bedingter Logik in der Ansicht (werde ich dafür nicht auf dem MVC-Altar geopfert?!?)
• Option 3: Ich habe das Gefühl, dass es die Dinge zu sehr verkompliziert. Es vermeidet jedoch Logik in der Ansicht.

Was sagen Sie dazu? Option 1, 2, 3 oder keine? Gibt es einen besseren Weg?

Bitte ergänzen Sie meine Kodierungsmuster!

Answer 1

Mir gefällt Option 1. Außerdem brauchst du keine Bedingungen und es funktioniert auch mit deaktiviertem Javascript. Kleben Sie es einfach irgendwo in der Masterpage und es sollte OK sein:

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

Sie könnten dies natürlich schrittweise verbessern/animieren, indem Sie ein nettes Plugin wie jGrowl o Gritter oder sogar einen Blick auf wie StackOverflow das macht .

Eine andere Lösung besteht darin, einen Helfer zu schreiben, was wahrscheinlich die sauberste Lösung ist:

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());
    }

}

Und dann in deinem Meister:

<%= Html.Notification() %>

Answer 2

Für allgemeine Benachrichtigungen erstelle ich in der Regel eine partielle Ansicht, um den hässlichen bedingten Code auszublenden, und füge sie in mein Stammlayout ein.

Also, an einer geeigneten Stelle im Master:

<% Html.RenderPartial("_Notifications") %>

Und in einer Teilansicht:

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