Question

以下代码显示了ajax调用中的个人资料图片（如果它尚未存在于会话变量中）。问题是当它首次加载到EDGE中时，它不会显示配置文件图片，而是显示默认的占位符。刷新后，它可以正常工作。以下是我的_Navigation.cshtml部分：

    <nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="side-menu">
            <li class="nav-header">
                @if (User.Identity.IsAuthenticated)
                {
                    <text><div class="dropdown profile-element">
                    @{
                    var strPictureURL = Session[SessionConstant.PictureURL].ToString();
                    var strLiteral = "<div id='ImageSpanId'>";
                    if (strPictureURL != "-1") { strLiteral += "<div alt='' class='profile-picture-size' style='background:url(" + strPictureURL + ")' ></div>"; }
                    strLiteral += "</div>";
                    @Html.Raw(strLiteral);
                    }    
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="clear">
                            <span class="block m-t-xs">
                                <strong class="font-bold">@User.Identity.Name</strong>
                            </span> <span class="text-muted text-xs block">Logged in <b class="caret"></b></span>
                        </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li><a href="@Url.Action("EditUser", "Account")">Edit Profile</a></li>
                        <li><a href="@Url.Action("Index", "Manage")">Settings</a></li>
                        <li><a href="@Url.Action("Notifications", "UserNotifications")">Notifications</a></li>
                        <li class="divider"></li>
                        <li><a href="@Url.Action("LogOff", "Account")">Log out</a></li>
                    </ul>
                    </div>
                    <div class="logo-element">Logo</div>
                    </text>
                }
                else
                {
                    Session[SessionConstant.PictureURL] = "-1";
                    <text><a href="@Url.Action("Login", "Account")"><i class="fa fa-sign-in"></i> Log in</a></text>
                }
            </li>
            <li class="@Html.IsSelected(controller: "Dashboards")">
                <a href="@Url.Action("Dashboard_1", "Dashboards")"><i class="fa fa-th-large"></i> <span class="nav-label" data-i18n="nav.dashboard">Dashboards</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse @Html.IsSelected(controller: "Dashboards", cssClass: "in")">
                    <li class="@Html.IsSelected(action: "Dashboard_1")"><a href="@Url.Action("Dashboard_1", "Dashboards")">Summary</a></li>
                </ul>
            </li>
            <li class="@Html.IsSelected(controller: "Reports")">
                <a href="@Url.Action("Index", "Reports")"><i class="fa fa-bar-chart-o"></i> <span class="nav-label" data-i18n="nav.dashboard">Reports</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse @Html.IsSelected(controller: "Reports", cssClass: "in")">
                    <li class="@Html.IsSelected(action: "Index")"><a href="@Url.Action("Index", "Reports")">All Reports</a></li>
                </ul>
            </li>
        </ul>

    </div>
</nav>
<script>
    $(document).ready(function () {

        if ($("#ImageSpanId").text() == "") {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetUserPictureURL", "AspNetUsers")',
                success: function (data) {
                    alert(data);
                    if ((data != "") && (data != null))
                    { $("#ImageSpanId").html("<img alt='' class='profile-picture-size' src='" + data + "' />"); }
                    else
                    { $("#ImageSpanId").html("<img alt='' class='profile-picture-size' src='https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif' />"); }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError + ": " + xhr.responseText);
                }
            });
        }
    });
</script>

以防它是相关的，这是我的_Layouts.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>My Application | @ViewBag.Title</title>
    @RenderSection("Styles", required: false)
    <link rel="stylesheet" type="text/css" media="print" href="~/Content/print.css" />   
    @Styles.Render("~/bundles/maincss")
    @Scripts.Render("~/bundles/mainjs")
</head>
<body>
    <div id="wrapper" class="@Html.PageClass()">
        @Html.Partial("_Navigation")
        <div id="page-wrapper" class="gray-bg @ViewBag.SpecialClass">
            @Html.Partial("_TopNavbar")
            @RenderBody()
            @Html.Partial("_Footer")
        </div>
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

解决了这个问题，GetUserPictureURL的ajax调用需要有一个“cache：false，”，因此Internet Explorer和EDGE不会返回缓存的响应。如果您使用地址栏或F5打开页面，则Chrome会发送Cache-Control：max-age = 0。

就是这样。很抱歉这个问题很长。

为什么这适用于Chrome，但不适用于IE和EDGE？

1 个答案: