c# - MVC3 Ajax.BeginForm OnSuccess 无法在 Firefox 中运行

Question

最终编辑:

按照 Darin Dimitrov 的回答，我发现问题最终是 AJAX 调用 Controller 的方法 UpdateForm() 返回一个空字符串。这是我前段时间遇到不同问题后发现有必要进行的修改。传递空字符串会导致 Firefox 的解析器阻塞(而 Chrome 和 IE 显然不在乎)所以我用空 div 替换了空字符串。

编辑:

感谢 Darin Dimitrov 在下面的建议，我发现我遇到麻烦的原因是每当提交相关表单时都会抛出错误。

错误显示“无法在层次结构中的指定点插入节点”。每次提交表单时都会抛出此问题。我在 POST 数据中注意到它似乎认为这是一个 XMLHttpRequest。这是原因吗(有问题的 AJAX 请求只是返回 HTML)？这是来自 Firebug 的 POST 数据:

此错误显示为“XML 解析错误 -- 未找到元素”。

仅供引用 - 返回的 HTML 始终为空字符串...

---

我有一个在 IIS7 上运行的 MVC3 应用程序。在我的一个观点中，我有一个使用 Microsoft HTML 辅助函数构建的表单:

@using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "TargetDiv", InsertionMode = InsertionMode.InsertAfter, OnSuccess = "ClearTextBox" }))
{
    @Html.TextArea("txtInput", new { id = "txtInput", cols = "20", rows = "5", wrap = "virtual" })
    <input id="send" class="button" type="submit" value="Send"/><br />
} 

当 Controller 提供此 View 时，这会生成以下 HTML:

<form action="/RootName/ControllerName/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post">
     <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>    
     <input id="send" class="button" type="submit" value="Send"><br>
</form>

我基本上想在这里做的是将 TextArea 中名为 txtInput 的文本附加到 Div 的末尾> 每当点击上面的 Send 按钮时调用 TargetDiv 并在附加完成后从 txtInput 中清除文本通过 ClearTextBox() 方法 (Javascript)。 append 总是适用于所有浏览器；当我在 Internet Explorer 或 Chrome 中运行时，文本清除工作正常。但是，Firefox 似乎并不想调用 ClearTextBox() 方法。

Firefox 是否与表单签名中的这个data-ajax-success 选项不兼容？

---

我尝试过的事情

我找到了这个人: Ajax.BeginForm doesn't call onSuccess

解决方案是添加这个脚本:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

我正在调用这个脚本:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

...但为了以防万一，我试着换掉它。没有快乐。

C# 聊天室中的一些人要求我尝试更改方法调用以包含括号，以便 HTML 如下所示:

<form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox()" data-ajax-update="#chatText" id="form0" method="post">
     <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>    
     <input id="send" class="button" type="submit" value="Send"><br>
</form>

但这并没有帮助。

C# Chat 中的人们还建议我用警告替换 Javascript 调用 - 如下所示:

<form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="alert('yo!')" data-ajax-update="#chatText" id="form0" method="post">
     <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>    
     <input id="send" class="button" type="submit" value="Send"><br>
</form>

Chrome 会弹出消息框，而 Firefox 不会!

Answer 1

新创建的 ASP.NET MVC 3 应用程序中的状态没有重现。

Controller :

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult UpdateForm()
    {
        return Content(DateTime.Now.ToLongTimeString());
    }
}

View (~/Views/Home/Index.cshtml):

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
    function ClearTextBox() {
        $('textarea').val(''); 
    }
</script>

<form action="/Home/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post">
     <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea>    
     <input id="send" class="button" type="submit" value="Send"><br>
</form>

<div id="TargetDiv"></div>

在 Chrome、FF 和 IE 中完美运行。

您可能还想确保 Content-Type 响应 HTTP header 与您发送的实际响应相匹配。例如，我看到很多人在响应正文中发送带有一些无效 JSON 的 application/json 响应 header ，这会导致更敏感的解析器阻塞。