Question

在非ajax调用中，其他div中div的排序变得混乱，页面呈现错误。当通过Ajax完成相同的调用时，页面呈现完美。

所以我在我的母版页上有这个搜索表单：

 <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>

我也有这个javascript使用Ajax提交搜索表单：

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

和

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

当表单通过Ajax进行汇总时，一切都呈现出色。当我关闭Ajax并提交表单时，渲染的html搞砸了。就像有一个错位的元素或其他东西。页面上的div不会在右侧div中结束。我看着并且分散了......各种各样的东西来找到差异，我无法看到任何可能导致这种情况的事情。

我的控制器方法是：

public ActionResult Search()
{

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

}

我的Index.aspx是：

<%@ 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>

和我的SearchResultsPartial.ascx是：

<%@ 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));
            }
%>

我的模特有：

public IEnumerable<String> searchResults;

所以重要的是搜索引擎会向模型返回字符串集合。每个字符串都是搜索结果的html。这是通过使用linq到xml生成的，实际上是XElement.ToString（）调用的结果。

我的母版页有：

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

任何帮助找到解决这个问题的方法都是非常感谢的。我已经没有东西可以看自己了。

非常感谢！

Answer 1

好，

linq to xml引擎不理解div标签不是自动关闭的，而对于它创建的空div标签<div />。不知何故，浏览器在执行ajax调用时处理这个问题就好了，并且在执行非ajax调用时搞砸了。此行为是所有浏览器的标准。

所以解决方案是在linq生成的空div标签中添加一个空格到xml。因此，我们最终得到<div> </div>而不是<div/>。

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

然后一切都很完美。

Answer 2

尝试替换

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

与

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

在Index.aspx。

Ajax调用效果很好，但非Ajax调用在浏览器中呈现错误。我错过了什么？

2 个答案: