6

Ich stehe vor jQuery Ladeproblem in einem ASP.NET MVC 5-Projekt. Ich versuche, eine Teilansicht zu laden, damit ichTeilansichtsproblem - jQuery nicht definiert

@ Html.Action ("GetView", "Home")

Teilansicht enthält einige jQuery-Funktionen verwendet haben. Wenn es geladen wird, zeigt es jQuery nicht definierte Nachricht, aber jQuery arbeitet auf der Hauptseite.

So habe ich zwei andere Methoden versucht, die Teilansicht zu laden und es gibt keine Ausgabe von jQuery mit diesen Methoden

@Html.Partial("_viewname") 

@Ajax.BeginForm() 

Home Controller

public class HomeController : Controller 
    { 

     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult GetView(string id = "") 
     { 
      return PartialView("_ViewName"); 

     } 
    } 

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
    @Scripts.Render("~/bundles/modernizr") 
    @RenderSection("Head", false) 
</head> 
<body> 
    <section > 
     <div> 
      @RenderBody() 
     </div> 

     <div> 
      @RenderSection("Sidebar", false) 
     </div> 

    </section> 

    <!-- jQuery --> 
    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("Scripts", false) 
</body> 

Eltern Seite Index.cshtml

@{ 
    ViewBag.Title = "Admin"; 
} 

<div id="main_content"> 
    @Html.Action("GetView", "Packages") 
</div> 

Teilansicht _view.cshtml

<div class="row"> 
    <div class="col-sm-12"> 
     <select> 
      <option>1</option> 
      <option>2</option> 
     </select> 
    </div> 
</div> 


<script type="text/javascript"> 

    $(document).ready(function() { 
     $("select").addClass("form-control"); 
    }); 

</script> 

Ich denke, es gibt einige jQuery Laden Problem, aber ich verstehe nicht, warum das geschieht auf spezifische Aktion.

Bitte schlagen Sie mir Lösung für dieses Problem vor.

+1

Wo ist die Seite, die das Rendering der Teilansicht enthält? –

+0

können Sie die Teilansicht und die Elternansicht Code? –

+0

Enthalten Sie die Skripte von Ihrem Teil –

Antwort

13

Ihre Ansichten (nicht Teilansichten) müssen den Code in einem Block enthalten. Wie Sie darauf hingewiesen haben @section s arbeiten nicht in Teilansichten.

Stellen Sie Ihren Code in der übergeordneten Ansicht ist in einer wie folgt aus:

@section Scripts{ 
    <script> 
     // DOM ready handler if needed 
     $(function(){ 
       // Your Javascript/jQuery code here 
     }); 
    </script> 
} 

Die @section Direktive teilt die Ansicht Builder, wo dieser Block in der Master-Seite einzufügen. Mit Javascript müssen Sie immer im Bereich Skripte sein, oder es wird inline gerendert wo es deklariert wurde.

Die Alternative ist die jQuery Inklusion vor RenderBody() Anrufe in der Master-Seite zu bewegen:

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
    @Scripts.Render("~/bundles/modernizr") 
    @RenderSection("Head", false) 
    <!-- jQuery --> 
    @Scripts.Render("~/bundles/jquery") 
</head> 
<body> 
    <section > 
     <div> 
      @RenderBody() 
     </div> 

     <div> 
      @RenderSection("Sidebar", false) 
     </div> 

    </section> 

    @RenderSection("Scripts", false) 
</body> 

Der Browser-Caching im Zusammenhang mit Bündeln mit Mitteln nur die erste Seite zu laden, wird ein kleines bisschen ineffizient sein auf Seite? ˅.

+0

Ich denke, Sesion funktioniert nicht in Teilansichten –

+0

Ja, ich denke auch, JS in Kopf zu verwenden, aber ich versuche, eine Lösung zu finden, wenn verfügbar! –

+1

@AskQuestion: Sie haben Recht (vergaß das). Habe eine aktualisierte Antwort. Sie müssen Ihren Code in die Ansicht verschieben, die das partielle Rendering enthält, oder die jQuery verschieben (beide Optionen sind umrissen). –

0

Wenn Sie Skripte auf einem Teilansicht ausgeführt werden muss, wie dies der Fall ist, wenn dynamisch erstellte Inhalt zurückgegeben wird, wenn Teilansichten von einem AJAX-Aufruf aufrufen, sollten Sie feststellen, dass das Problem in der Frage beschriebenen tatsächlich geschieht nur in der Anfangsmutter Seitenladung. Wenn das der Fall ist, können Sie das Problem umgehen, indem NOT das Teil auf der primären Ansicht lädt. Stattdessen können Sie die Teilansicht mit JQuery AFTER die erste Seite Laden laden.

Anstatt also diese Linie mit dem HTML-Code auf der primären Ansicht tun:

@Html.Partial("YourCoolDynamicDashboard") 

Tun Sie dies in einer JS-Datei oder in Ihrer primären JavaScript-Tag Ansicht:

$(document).ready(function() { 
     $.get("/YourController/YourCoolDynamicDashboard", [<... data goes here...>], function (result) { 
      $("#YourDashboardContainer").html(result);  
     }); 
}); 

Diese Arbeit around ermöglicht Ihnen, clientseitigen JQuery-Code sowohl in der primären Ansicht als auch in der Teilansicht auszuführen.

Verwandte Themen