image - 在 MVC 4 (Razor) 应用程序的所有页面中显示用户图像(如果经过 IsAuthenticated)

Question

我想在我的应用程序的所有页面上显示登录用户的图像。我已经成功地为用户详细信息制作了 CRUD，但还想在所有页面上显示名称及其图片。我只能检索名称。

如何检索图片？

_LoginPartial.cshtml:

@if (Request.IsAuthenticated)
{
    Convert.ToString(ViewBag.EmployeeName);

    <text> Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account",routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })
    @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
    {
        @Html.AntiForgeryToken()
        <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
    }
    </text>
}
else
{
    <ul>
    <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })
    </li>
    </ul>
}

注意:

我正在使用 asp.net MVC 4( Entity Framework )。

Answer 1

你必须为此编写一个帮助程序类，我将告诉你如何为 Gravatar 图像执行此操作:

添加类GravatarOptions:

public class GravatarOptions
{
    public string DefaultImageType { get; set; }
    public string RatingLevel { get; set; }
    public int Size { get; set; }
    public string CssClass { get; set; }

    public class DefaultImage
    {
        public const string Default = "";
        public const string Http404 = "404";
        public const string MysteryMan = "mm";
        public const string Identicon = "identicon";
        public const string MonsterId = "monsterid";
        public const string Wavatar = "wavatar";
        public const string Retro = "retro";
    }

    public class Rating
    {
        public const string G = "g";
        public const string PG = "pg";
        public const string R = "r";
        public const string X = "x";
    }


    internal static GravatarOptions GetDefaults()
    {
        return new GravatarOptions
        {
            DefaultImageType = GravatarOptions.DefaultImage.Retro,
            Size = 150,
            RatingLevel = GravatarOptions.Rating.G
        };
    }
}

添加类GravatarHelper:

public static class GravatarHelper
{
    public static HtmlString GravatarImage(this HtmlHelper htmlHelper, string emailAddress, GravatarOptions options = null)
    {
        if (options == null)
            options = GravatarOptions.GetDefaults();

        var imgTag = new TagBuilder("img");

        emailAddress = string.IsNullOrEmpty(emailAddress) ? string.Empty : emailAddress.Trim().ToLower();

        if (!string.IsNullOrEmpty(options.CssClass))
        {
            imgTag.AddCssClass(options.CssClass);
        }

        imgTag.Attributes.Add("src", string.Format("http://www.gravatar.com/avatar/{0}?s={1}{2}{3}",
        GetMd5Hash(emailAddress),
            options.Size,
            "&d=" + options.DefaultImageType,
            "&r=" + options.RatingLevel
            )
        );

        return new HtmlString(imgTag.ToString(TagRenderMode.SelfClosing));
    }

    // Source: http://msdn.microsoft.com/en-us/library/system.security.cryptography.md5.aspx
    private static string GetMd5Hash(string input)
    {
        byte[] data = MD5.Create().ComputeHash(Encoding.UTF8.GetBytes(input));
        var sBuilder = new StringBuilder();
        for (int i = 0; i < data.Length; i++)
        {
            sBuilder.Append(data[i].ToString("x2"));
        }
        return sBuilder.ToString();
    }
}

将此添加到 Bootstrap css 文件:

.navbar-image {
  float: left;
  padding: 10px 5px;
}

修改您的 _LoginPartial.cshtml:

using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{

@Html.AntiForgeryToken()

<div class="navbar-image">
    @Html.GravatarImage(User.Identity.GetUserName();, new GravatarOptions { Size = 30, CssClass = "img-circle" })
</div>

<ul class="nav navbar-nav navbar-right">
    <li>
        @Html.ActionLink("Hello " + User.Identity.GetUserName(); + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
    </li>
    <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
}

<子> Link但如果你花上整整 30 天，这可能会有些意义:P