MVC3-HTML-Hilfsmittel und Javascript

Question

Ich habe eine Html-Hilfe in MVC3, die einen benutzerdefinierten Abschnitt von Html, die als ein Suchsteuerelement verwendet wird gerendert. Das Problem ist, dass es Javascript (Jquery), die geschrieben wurde, um mit dem Steuerelement zu interagieren (es sollte wirklich nur für dieses Steuerelement verwendet werden). Gibt es eine Möglichkeit, das Javascript eingebettet zu machen, so dass das Steuerelement weiterhin die Javascript-Funktionalität haben. (Mit der Erstellung des Helper, können wir kontrollieren, wie die html strukturiert ist und machen es einfacher, das Javascript zu schreiben. Dies würde die Verwendung des Steuerelements in unserer Anwendung standardisieren).

ex.

<div>
@Html.SearchControl("searchControlSelector")
</div>

<script>
     $("searchControlSelector").timeout();
<script>

Ich möchte in der Lage sein, die "Timeout"-Funktionalität beim Aufruf von @Html.SearchControl([einige Parameter]) einzustellen, so dass das Javascript und der Helfer kombiniert werden und die Benutzer des Helfers sich nicht darum kümmern müssen, welche Selektoren sie beim Aufruf von "Timeout" verwenden sollten. Weiß jemand, wie man dies erreichen kann? Gibt es eine bessere Möglichkeit, dies zu handhaben?

Answer 1

Wenn ich so etwas machen will, neige ich dazu, es so einfach wie möglich zu halten. Hier ist einige Code, der klingt wie es die Rechnung passen würde.

using System;
using System.Text;
namespace MvcApplication1.Helpers
{
    public class Html
    {
        public static string SearchControl(string selector)
        {
            StringBuilder returnString = new StringBuilder();
            //put your existing code here.
            returnString.Append(String.Format("<label >{0}</label>", selector));
            //just add the JS as string, (wrapped in a 'ready' if you need that)
            returnString.Append(String.Format("<script>$(function(){$(\"{0}\").timeout();});<script>", selector));
            return returnString.ToString();
        }
    }
}

Wenn dies nicht hilfreich ist, fügen Sie bitte eine genauere Beschreibung Ihrer Frage hinzu und wir werden versuchen, Ihnen zu helfen.

Answer 2

Es ist schwierig, vollständig wiederverwendbare HTML-Helfer mit einer einzigen gemeinsamen Javascript-Datei zu erstellen.

Zunächst ist es nicht möglich, nur eine <script>$(".searchControl").timeout()</script> Codeblock pro Seite ohne zusätzliche Methodenaufrufe in der Layoutseite etc.

Sie könnten Ihr eigenes kontrollspezifisches Datenattribut wie data-search-control hinzufügen und es in Selektoren wie $("input[data-search-control]").timeout() um nur HTML zu unterscheiden, das von Ihrem Helfer erzeugt wurde.

Wenn es für Sie in Ordnung ist, mehrere Skripte auf der Seite zu blockieren, vergessen Sie nicht, dass sie einige Male ausgeführt werden, so dass Sie sich darum kümmern müssen, die mehrfache Ausführung zu verhindern. Sie können einige Daten mit HTML-Knoten verknüpfen, die bereits vom Skript verarbeitet wurden, z. B. mit jQuery $("").data() Methode. Optional können Sie auch prüfen, ob das angegebene Objekt im globalen Bereich deklariert ist, und wenn ja, dann nichts tun, andernfalls deklarieren Sie es und rufen Ihre Methode auf.