How to add a dynamic source to an image using MVC 3 (Razor)

Question

I'm new to Mvc and I'm having an image that can have a correct or wrong image depending on the answer the user gives.

This is my current code:

@if (Model.IsCorrect) 
    {
        <img src="@Url.Content(@"~/Content/images/Default_Correct.png")" alt="correct" />
    }
    else
    {
        <img src="@Url.Content(@"~/Content/images/Default_Wrong.png")" alt="wrong" /> 
    }

This works perfectly but I think there must be a much cleaner/better way to do something like this.

Darin Dimitrov · Accepted Answer · 2011-09-02 13:52:24Z

9

If you are like me and hate polluting your views with spaghetti code you could write a custom helper:

public static class ImageExtensions
{
    public static IHtmlString MyImage(this HtmlHelper htmlHelper, bool isCorrect)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var img = new TagBuilder("img");
        if (isCorrect)
        {
            img.Attributes["alt"] = "correct";
            img.Attributes["src"] = urlHelper.Content("~/Content/images/Default_Correct.png");
        }
        else
        {
            img.Attributes["alt"] = "wrong";
            img.Attributes["src"] = urlHelper.Content("~/Content/images/Default_Wrong.png");
        }
        return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing));
    }
}

and in your view simply:

@Html.MyImage(Model.IsCorrect)

answered Sep 2, 2011 at 13:52

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a dynamic source to an image using MVC 3 (Razor)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related