2009-09-04 7 views
1

Ich folgte dem Beispiel here für die Implementierung von AJAX-Panels in MVC. Ich benutze VB.NET, aber die Konvertierung ist ziemlich einfach. Aber ich kann es nicht zur Arbeit bringen, und mir gehen die Ideen aus, warum. Hier ist mein Code:Problem, MVC AJAX Teillast zu arbeiten

Homecontroller:

Function Index() As ActionResult 
    Return View() 
End Function 

Function Archive() As ActionResult 
    Threading.Thread.Sleep(5000) 
    Return View() 
End Function 

Archive.ascx (Teilansicht):

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %> 
Hello World 

Index.aspx (Ansicht):

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 

<asp:Content ID="indexContent" ContentPlaceHolderID="body" runat="server"> 
    <% Using Ajax.BeginForm("Archive", "Home", Nothing, New AjaxOptions With {.UpdateTargetId = "resultDiv"}, New With {.id = "reportFormOne"})%> 
    <% End Using%> 
    <div id="resultDiv"> 
     <img src="../../Content/images/ajax-loader.gif" alt="" /> 
    </div> 

    <script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>'></script> 

    <script type="text/javascript"> 

     $get("reportFormOne").onsubmit(); 

    </script> 

</asp:Content> 

Wenn ich laufen Alles, was ich sehe, ist endlos die Ajax-Lade-Animation. Wenn ich es im Debug-Modus laufe, scheint es niemals die Archivierungsaktion auszulösen. Kann jemand sehen, was ich vermisse?

UPDATE: Dank @Joseph für Hinweis, dass jQuery nicht geladen wurde. Jetzt ist es, aber ich bekomme "Objekt erwartet" auf dem $ get Anruf.

UPDATE 2: So sieht Index.aspx jetzt mit dem "Dokument bereit" -Code aus. Es gibt mir einen Fehler "Objekt unterstützt diese Eigenschaft oder Methode nicht" mit dieser Konfiguration.

<script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>'></script> 
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>'></script> 
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>'></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#reportFormOne").submit(); 
    }); 

</script> 

<% Using Ajax.BeginForm("Archive", "Home", Nothing, New AjaxOptions With {.UpdateTargetId = "resultDiv"}, New With {.id = "reportFormOne"})%> 
<% End Using%> 
<div id="resultDiv"> 
    <img src="../../Content/images/ajax-loader.gif" alt="" /> 
</div> 

UPDATE 3: Realisiert es auf "onsubmit" würgte. Habe es in "submit" geändert und es hat funktioniert. Nachdem die Verzögerung auf 5 Sekunden geändert wurde, drehte sich das animierte GIF nicht - es blieb nur 5 Sekunden statisch, dann wurde die ganze Seite durch "Hello World" ersetzt, anstatt nur das animierte GIF im Div zu ersetzen. AAARRRGGGHHH!

UPDATE 4: hinzugefügt fehlende AJAX-Bibliotheken, um den Code in Update 2. Diese immer noch nicht richtig funktioniert, aber wenn ich die jQuery einreichen nicht verwenden und stattdessen eine Schaltfläche, um das Formular abschicken hinzufügen, es funktioniert korrekt. Warum?

Antwort

2

Sind Sie sicher, dass Sie jquery geladen haben? Wenn nicht, dann werden Sie nie Ihre Webmethode aufrufen.

Wenn Sie es geladen haben, würde ich versuchen, Ihr Skript in document.ready() zu setzen, um sicherzustellen, dass es zur richtigen Zeit ausgeführt wird.

etwas wie folgt aus:

$(document).ready(function() { 
    $("#reportFormOne").submit(); 
}); 
+0

Wow. Du würdest denken, dass das da drin wäre, oder? Ich nahm an, es war in Site.Master und es war nicht. Ich habe es hinzugefügt und jetzt bekomme ich einen Javascript Fehler. Ich habe das Problem aktualisiert. Danke für das Aufzeigen des Offensichtlichen. – gfrizzle

+0

@gfrizzle Sie können nie wissen =) Auch würde ich versuchen, das in einem document.ready() zu verpacken, nur um sicherzustellen, dass alles geladen ist, bevor Sie versuchen, dieses jquery Skript auszuführen – Joseph

1

Die AjaxHelper Klasse (Ajax.BeginForm()) verwendet die Microsoft AJAX-Bibliotheken. Es sieht nicht so aus, als würden Sie auf sie verweisen. Fügen Sie sie Ihrer Masterseite

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

Alternativ können Sie das jQuery Form Plugin verwenden. Ersetzen Sie Ihre Ajax.BeginForm() durch eine Html.BeginForm() und machen Sie so etwas. Bei diesem Ansatz laden wir das Ajax-Bild dynamisch, also entfernen Sie den Tag aus resultDiv.

<script type="text/javascript" src="/path/to/jquery.form.js"></script> 
    $(function(){ 

$("#reportFormOne").ajaxForm({ 
    target: "#resultDiv", 
    resetForm: true, 
    beforeSubmit: function() { 
    $("<img>").attr("src", "../../Content/images/ajax-loader.gif").appendTo("#resultDiv"); 
    }, 
    success: function(data) { 
    $("#resultDiv").hide().html(data).fadeIn("fast"); 
    } 
}); 

}); 

Außerdem sollten Sie sicherstellen, dass es sich bei Ihrer Archivaktion um eine AJAX-Anfrage handelt. (Meine VB ist rostig. Sie müssen nur nach Anfrage überprüfen.IsAjaxRequest())

Function Archive() As ActionResult 
    Threading.Thread.Sleep(5000) 

    If(Request.IsAjaxRequest()) 
     Return PartialView() 
    End If 

    Return View() 
End Function 
+0

Hinzufügen der AJAX-Bibliotheken hat nicht geholfen - es immer noch zurückgegeben eine neue Seite mit nur "Hello World". Ich habe auch Ihre jQuery-Methode ausprobiert, aber ich bekomme "Objekt unterstützt diese Eigenschaft oder Methode nicht" in der AjaxForm-Zeile. – gfrizzle

+0

Hoppla, mein Bad - Tippfehler in den Bibliotheksnamen. Ich bin jetzt näher dran. Es verhält sich immer noch falsch mit den richtigen Bibliotheksnamen, aber wenn ich die Subskription jQuery entferne und eine Submit-Schaltfläche hinzufüge, funktioniert es korrekt. Ist das jQuery-Senden zu schnell erfolgt? – gfrizzle

0

Wenn Sie irgendwelche Formulare auf die teilweise haben, versuchen Sie, sie zu entfernen. Wenn es dann funktioniert, heißt das, dass sie nicht richtig aufgerufen werden.

Das gleiche ist mir zweimal passiert. Es könnte Ihr Problem auch sein ...