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: 511
        
I have a problem with jQuery, here is how my web app works
- 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()
- After button1 button is clicked the above script from Search web page runs 
- Search() action in controller runs for longer period of time. I simulate this in testing by putting Thread.Sleep(15000); in Search()action. 
- 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();
        }
- 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