MVC3/JQuery 中的 Ajaxified 链接在 IE8 中不起作用（缺少标头）

发布于 2024-11-05 03:04:44 字数 2320 浏览 0 评论 0原文

考虑以下代码（它基于在 Visual Web Developer Express 2010sp1 中创建的默认空 MVC3 项目）：

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div id="header">header</div>
    <div id="main">@RenderBody()</div>
</body>
</html>

HomeController 的 Index 方法:

public ActionResult Index()
{
    if (Request.IsAjaxRequest())
    {
        ViewBag.Message = "partial";
        return PartialView();
    }
    else
    {
        ViewBag.Message = "full";
        return View();
    }
}

Index.cshtml:

<script type="text/javascript">
    $(function () {
        $('#myLink').click(function () {
            $.post(this.href, function (result) {
                $('#main').html(result);
                alert(result);
            });
            return false;
            //$('#main').load(this.href);
            //return false;
        });
    });
</script>

HomeController index. @ViewBag.Message
@Html.ActionLink("Index", "Index", new { controller = "Home" }, new { id = "myLink" } );

问题是，在 IE8 中，单击 myLink 链接时，它不会仅使用 Index.cshtml 中的部分 html 更新主 div，而是更新包含布局的完整 html。当然，它在 FF 中工作得很好，我的意思是为什么不应该呢？在 IE8 中，Request.IsAjaxRequest() 的计算结果似乎总是为 false。据我了解，这是由于标头 X-Requested-With 未附加到 IE8 中的请求的结果。我在 Web 开发方面没有太多经验——这是一个常见问题吗？解决这个问题的（最佳）方法是什么？

更新：

昨天我在 IE8 中正常工作，但是当我今天早上再次尝试时，同样的问题又出现了。现在我认为它与 IE8 中的设置不再有任何关系，因为我将设置恢复为默认值。我尝试使用 fiddler 工具检查请求。为了让我能够使用 fiddler 捕获来自 localhost 的流量，我在地址中添加了一个句点：http://localhost.:3157/。所以现在仅当我使用 http://localhost.:3157/ （带句点）时才会出现错误，并且当我使用 http://localhost:3157/ 时它正常工作>（无句点）。我还测试了 Chrome、Opera 和 Safari 中的行为 - ajax 链接在这些浏览器中正常工作。请注意，当我将查询参数附加到 ajax 链接时，我可以让它在 IE8 中正常工作，如下所示：

@Html.ActionLink("Index", "Index", new { controller = "Home", param = "param" }, new { id = "myLink" } )

我真的不想这样做。我这里的想法不多了。我可能遗漏了一些对于经验丰富的 Web 开发人员来说非常明显的东西 =] 有人认识到这些症状吗？

原文

Consider the following code (it is based on a default EMPTY MVC3 project created in visual web developer express 2010sp1):

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div id="header">header</div>
    <div id="main">@RenderBody()</div>
</body>
</html>

Index method of HomeController:

public ActionResult Index()
{
    if (Request.IsAjaxRequest())
    {
        ViewBag.Message = "partial";
        return PartialView();
    }
    else
    {
        ViewBag.Message = "full";
        return View();
    }
}

Index.cshtml:

<script type="text/javascript">
    $(function () {
        $('#myLink').click(function () {
            $.post(this.href, function (result) {
                $('#main').html(result);
                alert(result);
            });
            return false;
            //$('#main').load(this.href);
            //return false;
        });
    });
</script>

HomeController index. @ViewBag.Message
@Html.ActionLink("Index", "Index", new { controller = "Home" }, new { id = "myLink" } );

The problem is that in IE8 when the myLink link is clicked, it doesn't update the main div with only the partial html from Index.cshtml but the complete html including the layout. Ofcourse it works fine in FF, I mean why shouldn't it right? It seems Request.IsAjaxRequest() always evaluates to false in IE8. I understand that it is a result of a header X-Requested-With not being attached to a request in IE8. I don't have a lot of experience with web development -- is this a common issue and what is the (best) way to solve this?

UPDATE:

Yesterday I got it working normally in IE8, but when I tried it again this morning, the same problem was back. Now I don't think it has anything to do with the settings in IE8 anymore as I restored the settings to the default values. I tried examining the request with the fiddler tool. In order for me to be able to capture the traffic from localhost with fiddler, I added a period to the address: http://localhost.:3157/. So now the error occurs only when I use http://localhost.:3157/ (with period) and it works normally when I use http://localhost:3157/ (without period). I additionally tested the behavior in Chrome, Opera and Safari -- the ajax link works normally in these browsers. Note that I can get it working normally in IE8 when I attach a query parameter to the ajax link like so:

@Html.ActionLink("Index", "Index", new { controller = "Home", param = "param" }, new { id = "myLink" } )

I don't really want to do this. I'm running low on ideas here. I'm probably missing something that is blatantly obvious to a seasoned web developer =] Anybody recognize these symptoms?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海的爱人是光 2024-11-12 03:04:44

您可能想使用 .live() 方法而不是 .click ()：

$('#myLink').live('click', function () {
    ...
    return false;
});

因为您要替换包含链接的 AJAX 回调（#main）中的 DOM，所以您将杀死已分配的事件处理程序。

此外，中的 jquery 脚本包含有一个拼写错误。您在 type="text/javascript" 之后缺少结束 >：

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

所以这是一个完整的工作示例：

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

</head>
<body>
    <div id="header">header</div>
    <div id="main">@RenderBody()</div>
</body>
</html>

HomeController:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
        {
            ViewBag.Message = "partial";
            return PartialView();
        }
        else
        {
            ViewBag.Message = "full";
            return View();
        }
    }
}

Index.cshtml:

<script type="text/javascript">
    $(function () {
        $('#myLink').click(function () {
            $.post(this.href, function (result) {
                $('#main').html(result);
            });
            return false;
        });
    });
</script>

HomeController index. @ViewBag.Message
@Html.ActionLink("Index", "Index", new { controller = "Home" }, new { id = "myLink" } )

You probably want to use the .live() method instead of .click():

$('#myLink').live('click', function () {
    ...
    return false;
});

because you are replacing the DOM in the AJAX callback (the #main) which contains the link so you are killing the event handler you have assigned.

Also you have a typo in the jquery script inclusion in the <head>. You are missing a closing > after type="text/javascript":

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

So here's a complete working example:

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

</head>
<body>
    <div id="header">header</div>
    <div id="main">@RenderBody()</div>
</body>
</html>

HomeController:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
        {
            ViewBag.Message = "partial";
            return PartialView();
        }
        else
        {
            ViewBag.Message = "full";
            return View();
        }
    }
}

Index.cshtml:

<script type="text/javascript">
    $(function () {
        $('#myLink').click(function () {
            $.post(this.href, function (result) {
                $('#main').html(result);
            });
            return false;
        });
    });
</script>

HomeController index. @ViewBag.Message
@Html.ActionLink("Index", "Index", new { controller = "Home" }, new { id = "myLink" } )

回复收藏 0 原文

英雄似剑 2024-11-12 03:04:44

添加

jQuery.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    }
});

以确保附加正确的标头。

add

jQuery.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    }
});

to make sure the correct header is attached.

回复收藏 0 原文

~没有更多了~

关于作者

夜还是长夜

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

MVC3/JQuery 中的 Ajaxified 链接在 IE8 中不起作用（缺少标头）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

MVC3/JQuery 中的 Ajaxified 链接在 IE8 中不起作用（缺少标头）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。