Problem with jQuery and ASP.Net MVC

Posted by robert_d on Stack Overflow See other posts from Stack Overflow or by robert_d
Published on 2010-05-25T22:16:47Z Indexed on 2010/05/25 22:21 UTC
Read the original article Hit count: 454

Filed under:
|
|

I have a problem with jQuery, here is how my web app works

  1. Search web page which contains a form and jQuery script posts data to Search() action in Home controller after user clicks button1 button.

Search.aspx:

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<GLSChecker.Models.WebGLSQuery>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Title  
</asp:Content>

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

    <h2>Search</h2>

    <% Html.EnableClientValidation(); %>

    <% using (Html.BeginForm()) {%>    
        <fieldset>
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Url) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Url, 
                    new { size = "50" } ) %>
                <%: Html.ValidationMessageFor(model => model.Url) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Location) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Location, 
                    new { size = "50" } ) %>
                <%: Html.ValidationMessageFor(model => model.Location) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.KeywordLines) %>
            </div>
            <div class="editor-field">
                <%: Html.TextAreaFor(model => model.KeywordLines, 10, 60, null)%>  
                <%: Html.ValidationMessageFor(model => model.KeywordLines)%>
            </div>

            <p>
                <input id ="button1" type="submit" value="Search" />
            </p>
        </fieldset>

    <% } %>

    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery("#button1").click(function (e) {
            window.setInterval(refreshResult, 5000);
        });

        function refreshResult()
        {
            jQuery("#divResult").load("/Home/Refresh");
        }
    </script>

   <div id="divResult"> 
   </div>

</asp:Content>
        [HttpPost]
        public ActionResult Search(WebGLSQuery queryToCreate)
        {
            if (!ModelState.IsValid)
                return View("Search");

            queryToCreate.Remote_Address = HttpContext.Request.ServerVariables["REMOTE_ADDR"];
            Session["Result"] = null;

            SearchKeywordLines(queryToCreate);

            Thread.Sleep(15000);

            return View("Search");
        }//Search()
  1. After button1 button is clicked the above script from Search web page runs

  2. Search() action in controller runs for longer period of time. I simulate this in testing by putting Thread.Sleep(15000); in Search()action.

  3. 5 sec. after Submit button was pressed, the above jQuery script calls Refresh() action in Home controller.

        public ActionResult Refresh()
        {               
            ViewData["Result"] = DateTime.Now;

            return PartialView();
        }
  1. Refresh() renders this partial

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= ViewData["Result"] %>

The problem is that in Internet Explorer 8 there is only one request to /Home/Refresh; in Firefox 3.6.3 all requests to /Home/Refresh are made but nothing is displayed on the web page.

I would be grateful for helpful suggestions.

© Stack Overflow or respective owner

Related posts about c#

Related posts about jQuery