【问题标题】:Why doesn't Ajax.BeginForm work in Chrome?为什么 Ajax.BeginForm 在 Chrome 中不起作用?
【发布时间】:2012-03-07 18:27:52
【问题描述】:

我正在使用 c#.NET MVC2,我正在尝试创建一个 ajax 表单,该表单调用一个删除数据库记录 (RemoveRelation) 的方法。删除记录的过程按预期工作。 删除记录后,表单应调用从视觉对象中删除记录的 javascript 函数 (RemoveRelation(10))。这是通过 AJAX 调用完成的,在 Internet Explorer 9 和 Firefox 4 上都按预期工作,但是在 Chrome 上由于某种原因更新没有通过 AJAX 调用发生,并且当删除记录的表单正在刷新时,整个页面正在刷新提交(这是不正确的,因为表单应该是使用 AJAX 功能生成的)。这是我用来生成表单的代码:

 <% using (Ajax.BeginForm("RemoveRelation", "Relations",
       new AjaxOptions { OnSuccess = "function() { RemoveRelation(10); } ", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Relation10" },
       new { id = "DeleteForm10" }))
   { %>

另外,在 Chrome 上,我还有一个单独的 Ajax.BeginForm 的问题。

<% using (Ajax.BeginForm("AddRelation", "Relations", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "AddRelation" }, new { id = "AddRelationForm" }))
  { %>

上面的 Begin Form 代码用于将关系添加到列表中,而不是删除它们。我再次强调,在 IE9 和 FF4 上,上述内容按预期工作,在 chrome 上不是添加一个并通过 ajax 更新,而是添加两次记录并再次刷新整个页面而不是进行 ajax 更新。

为什么这会在 chrome 中崩溃?

【问题讨论】:

标签: c# asp.net asp.net-mvc-2 asp.net-ajax


【解决方案1】:

Microsoft AJAX 和某些 webkit 浏览器存在问题。前段时间我自己也遇到过这个问题,解决方法很简单。创建一个webkit.js 文件并将其放入内容中:

Sys.Browser.WebKit = {}; //Safari 3 is considered WebKit
if( navigator.userAgent.indexOf( 'WebKit/' ) > -1 )
{
    Sys.Browser.agent = Sys.Browser.WebKit;
    Sys.Browser.version = parseFloat( navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
    Sys.Browser.name = 'WebKit';
}

然后在您的 ScriptManager 中或页面中的某个位置(最好在母版页中,我在接近结尾处添加它),添加脚本引用:

<Scripts>
    <asp:ScriptReference Path="webkit.js" />
</Scripts>
//OR
<script src="webkit.js">

不记得我找到该信息的原始网站,但我可以从this page 获得。祝你好运!

【讨论】:

  • 废话,我以为这行得通,但现在我发现它没有,它仍在刷新整页。
  • 查看控制台中是否出现任何 XmlHttpRequest 错误。 Chrome 控制台类似于 Firebug,但它是内置的并且(IMO)更易于使用。这就是我最初发现问题的方式,因为它在一个 .NET AJAX JS 文件中失败(就在文件的开头)。
  • 我没有收到任何 XmlHttpRequest 错误或任何错误或警告。
【解决方案2】:

你可以更新你的项目以使用 asp.net MVC 3,在 mvc 3 中,jquery ajax 是默认的

【讨论】:

  • 我想在项目的这个阶段更新 MVC 是不可能的。这是一个工作项目,更改框架中的任何内容都意味着必须重新测试每个表单,而且其中有很多。我的老板不会乐意再花一个月的时间进行测试。
【解决方案3】:

我找到了一个奇怪的解决方案。我通过像这样的“a”标签调用 ajax 表单的提交:

<A href='#' onclick="javascript:$('#ajaxform').submit();">Remove</a>

由于某种原因,从 'a' 标记调用 '.submit()' 在 chrome 中搞砸了,导致整个页面刷新而不是 ajax 调用。我改用以下代码解决了这个问题:

<input type='submit' value='Remove' />

当我需要在输入中添加 javascript 命令以在删除之前要求确认时,此解决方案也有效。唯一的抱怨是我需要交换一些标记以确保我的按钮在他们提交的表单中发生(我理解这在所有情况下并不总是可能的)。

【讨论】:

  • 你可以保留它。您只需要在 onclick 结束时返回 false(所以它会是 onclick="javascript:$('#ajaxform').submit();return false;")。原因是a 标签导致浏览器导航到链接(即使它没有去任何地方)并返回 false 只是阻止默认浏览器操作发生。来源:jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html
猜你喜欢
  • 2015-10-27
  • 2012-05-04
  • 1970-01-01
  • 1970-01-01
  • 2021-07-31
  • 2012-11-08
  • 1970-01-01
  • 2014-12-08
  • 2018-08-11
相关资源
最近更新 更多