ajax update div

Question

Controller action:

    public ActionResult Index()
    {

        ViewData["sample"] = DateTime.Now.ToLongTimeString();
        Thread.Sleep(3000);
        return View();
    }

View page:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Index</h2>

<div id="divId"><%= Html.Encode(ViewData["sample"])%></div>

 <script type="text/javascript">var event = new Object(); $get("panelOneForm").onsubmit();</script>
 <%using (Ajax.BeginForm("Index", "Proba", new AjaxOptions() { UpdateTargetId = "divId" }, new { id = "panelOneForm" })) { } %>

</asp:Content>

I try to make auto update View but failed. What is wrong?

Answer 1

Did you import the microsoft ajax libraries ?

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

here is a tutorial. Do you have firebug? If so, try to see if the libraries are loaded correctly, and no errors where detected while executing

Answer 2

You could define an invisible submit button inside the form:

<div id="divId"></div>

<%using (Ajax.BeginForm("Index", "Proba", new AjaxOptions() { UpdateTargetId = "divId" })) { %>
    <input type="submit" id="btnSubmit" style="display:none;" />
<% } %>

<script type="text/javascript">
    // Make sure you put this script after the form
    // so that the button is loaded into the DOM before
    // manipulating it
    $get("btnSubmit").click();
</script>

Also the Index action on the Proba controller that you are invoking asynchronously needs to return only a partial view or directly some content. Notice that ViewData is no longer used neither in the controller action nor in the resulting div:

public ActionResult Index()
{
    // You probably want to remove the next line before shipping your
    // application in production as it is not good to stall the thread for 3s
    Thread.Sleep(3000);
    return Content(DateTime.Now.ToLongTimeString(), "text/plain");
}