Asp – Problem getting MVC AJAX partial load to work

ajaxasp.net-ajaxasp.net-mvcvb.net

I was following the example laid out here for implementing AJAX panels in MVC. I'm using VB.NET, but the conversion is pretty straightforward. However, I can't seem to get it to work, and I'm running out of ideas as to why. Here is my code:

HomeController:

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

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

Archive.ascx (partial view):

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

Index.aspx (view):

<%@ 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>

When I run it, all I see is the ajax-loader animation endlessly. When I run it in debug mode, it never seems to trigger the Archive action. Can anyone see what I'm missing?

UPDATE: Thanks to @Joseph for pointing out that jQuery wasn't loaded. Now it is, but I'm getting "Object expected" on the $get call.

UPDATE 2: Here's what Index.aspx looks like now with the "document ready" code. It's giving me a "Object doesn't support this property or method" error with this configuration.

<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: Realized it was choking on "onsubmit". Changed it to "submit" and it functioned. However, after changing the delay to 5 seconds, the animated gif did not spin – it just stayed static for 5 seconds, then the whole page was replaced by "Hello World" instead of just replacing the animated gif in the div. AAARRRGGGHHH!

UPDATE 4: Added missing AJAX libraries to the code in Update 2. This still doesn't work correctly, but if I don't use the jQuery submit and instead add a Submit button to the form, it works correctly. Why?

Best Answer

Are you sure you have jquery loaded? If not then you'll never call your webmethod.

If you do have it loaded I would try putting your script inside document.ready() to make sure it gets executed at the correct time.

something like this:

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