Wie verwende ich jquery in asp.net mvc 4?

Question

Ich arbeite auf einer Website mit ASP.Net 4 mit MVC. Ich bin sehr vertraut mit WebForms & Javascript, und habe jquery verwendet, aber die Bündelung verwirrte mich. Soweit ich das beurteilen kann, sind alle Javascript-Dateien in BundleConfig.cs verpackt und werden mit dem Header in der Datei site.master heruntergeladen. Also, ich sollte einfach in der Lage sein, meine zusätzlichen Funktionen und jquery Aufrufe in neue Tags zu setzen.

Aber es ist offensichtlich, dass die Art und Weise jquery Funktionen sollen in die Dateien gehen, sind völlig anders als das, was ich gewohnt bin, und ich kann nichts, überhaupt zu arbeiten bekommen.

Gibt es kurze Tutorials, die mir den richtigen Weg, dies in MVC zu tun zeigen kann? Und nicht Razor, ich brauche hier keine zwei Lernkurven.

Answer 1

Ich verstehe dein Problem nicht, aber weißt du, welches Bündel ist? Werfen Sie zunächst einen Blick auf diese Artciel, um das komplette Feature zu verstehen: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Sie brauchen keine Bundles in asp.net mvc zu verwenden. Sie können es einfach aus dem Projekt entfernen und Ihre Javascripts-Dateien auf Ihrer Layoutseite ohne Probleme hinzufügen. Sie können die Layout-Seite manuell hinzufügen und Ihre Funktionen in einer anderen js-Datei hinzufügen, einschließlich der Ansicht (oder des Layouts). Asp.Net MVC ist eine weitere Alternative zu WebForms.

Razor ist ein Viewengine und Sie können Server-Side-Code mit dem @ char, für Probe schreiben: @Html.TextBox("Name"), die wir haben seit dem asp.net Mvc 3, aber Sie können auch schreiben ASPX-Motor, für Beispiel: <%: Html.TextBox("Name") %> wie Sie tun etwas in WebForms. (Ich empfehle Razor, weil es schneller zu schreiben, zu lesen und zu benutzen ist).

Erfahren Sie mehr über ViewEngines hier: http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx

Answer 2

Es gibt keinen ‚richtigen‘ Weg, dies in MVC zu tun, ist es für Sie ganz oben.

Es gibt verschiedene Möglichkeiten, dies zu tun.

Sie können JQuery-Funktionen "inline" innerhalb Ihrer Ansichten platzieren, indem Sie sie in script Tags z.

<script> 
    $('a').click(function() { alert("Click"); }); 
</script> 

Dies ist jedoch im Allgemeinen nicht empfohlen, da es Ihr JS schwieriger macht die Verwaltung und Wiederverwendung und bläht Ihre HTML. Sie würden das wahrscheinlich nur tun, wenn Sie ein echtes kleines Skript hätten und nicht das Gefühl hätten, es wäre eine neue Datei wert.

Alternativ können Sie Ihre HTML in separaten js Dateien platzieren und schließen Bezug auf diese in Ihren Ansichten z.B.

<script src="~/Scripts/mycusomtjquery.js"></script>

Das ist besser, als es die Weiterverwendung erlaubt und aufblasen nicht Ihre HTML, und der Browser ist in der Lage, es cachen.

Eine noch bessere Option ist in MVC 4 und nutzen diese Vorteile der Bündelung Funktion zu übernehmen. Legen Sie Ihre js in einer separaten Datei, registrieren Sie es als ein Bündel, und macht dies aus Ihrer Sicht

z.B. dort

Erstellen Sie js in seperates Dateien und Ihrem eigenen Code platzieren.

Diese in App_Start \ BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/mycustomjquery") 
        .Include("~/Scripts/mycustomjquery.js") 
        .Include("~/Scripts/myothercustomjquery.js")); 

einen Anruf hinzufügen das Bündel in Ihrer Ansicht

@Scripts.Render("~/bundles/mycustomjquery") 

dies Ihre js rendert in einem und Weise verschmolzen minfied zu machen, dass seine zwischengespeichert vom Broswer.

Sie können dies entsprechend konfigurieren. Wählen Sie, wie Sie Ihre js-Dateien bündeln, wie viele tatsächliche js-Dateien erstellt werden sollen, wo sie zu rendern sind usw.