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.