Display user image on all pages of MVC 4 (Razor) app (if IsAuthenticated)
I want to display an image of the user logged in on all pages of my application. I've successfully done CRUD for User details, but also want to display the Name and its image on all pages. I can only get a name.
How can I get the image?
_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>
}
Note:
I am using asp.net MVC 4 (Entity Framework).
+3
source to share
1 answer
You will need to write a helper class for this. I'll show you how to do this for Gravatar images:
Add class 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
};
}
}
Add class 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();
}
}
Add this to Bootstrap css. File:
.navbar-image {
float: left;
padding: 10px 5px;
}
Change your _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 , but it will probably make sense if you take all 30 days: P
-1
source to share