Ajax call works great, but non-ajax call renders wrong in browser. What did I miss?

In a non-ajax call, the ordering of divs inside other divs gets messed up and the page renders wrong. When the same call is done via Ajax, the page renders perfectly.

So I have this search form on my mast开发者_StackOverflow社区er page:

 <form action="<%=Url.Action("Search") %>" method="post" id="search1" class="search-form">
            Search:
            <%=Html.TextBox("SearchBox1", null)%>
            <input  type="submit" value="Go" />
 </form>

 .....

 <div id="search-results">
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
 </div>

I also have this javascript to submit the search form using Ajax:

$('.search-form').ajaxSubmit(GetSearchAjaxFormOptions());

and

function GetSearchAjaxFormOptions() {
    return { target: '#search-results',
        data: GetSearchData(),
        success: RunAfterAjaxSubmit()
    };
}

when the form is sumbitted via Ajax, everything renders beautifully. When I turn Ajax off and submit the form, The rendered html is messed up. Like there was a misplaced element or something in there. The divs on the page do not end up inside the right divs. I looked at and diffed and ... all sorts of thing to find the difference, and I cant see any thing that would cause this.

My controller method is:

public ActionResult Search()
{

  if (Request.IsAjaxRequest())
  {
    return View("SearchResultsPartial", sm);
  }
  else
  {
    return View("Index", sm);
  }

}

My Index.aspx is:

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

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
          Html.RenderPartial("SearchResultsPartial");
</asp:Content>

and my SearchResultsPartial.ascx is:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyWebSite.Models.SearchModel>" %>
<% 
            int count = Model.searchResults.Count();
            for (int i = 0; i < count; i++)
            {
                Response.Write(Model.searchResults.ElementAt(i));
            }
%>

My model has:

public IEnumerable<String> searchResults;

So an important thing is that the search engine returns to the model a collection of strings. Each string is an html of a search result. This was generated by using linq to xml and is really the result of the XElement.ToString() call.

And my master page has:

<div id="search-results" class="yui-u"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>

Any help in finding what to do to fix this is most appreciated. I have ran out of things to look at myself.

Many thanks!

Okay,

The linq to xml engine does not understand that div tags are not self closing and for empty div tags it creates <div />. Somehow the browsers handle this just fine when doing an ajax call and mess it up when doing a non-ajax call. This behavior is standard among all browsers.

So the solution was to put a blank space in the empty div tags generated by linq to xml. So we end up with <div> </div> and not <div/>.

new XElement("div", new XAttribute("class", "my-class"), ""); 

And then everything works out perfectly.

Try to replace

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
          Html.RenderPartial("SearchResultsPartial");
</asp:Content>

with

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
 <div id="search-results">
          Html.RenderPartial("SearchResultsPartial");
 </div>
</asp:Content>

in Index.aspx.