How to retrieve image url in MVC view from model

Question

I am new to Sitecore. I am trying to create a small demo which will display all the products with its image and description.
But i am getting error in my view also i am not able to display anything.

here is my code:
ProductController

        using MicrosoftDemo.Models;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web.Mvc;
        using Sitecore.Data.Fields;
        using Sitecore.Resources.Media;

        namespace MicrosoftDemo.Controllers
       {
       public class ProductController : Controller
       {
        // GET: Product
        public ActionResult Index()
        {
            var context = Sitecore.Context.Item;

            var products = context
                .GetChildren()
                .Where(x => x.TemplateID
                                .ToString() == "{6BDC57DE-9C93-4922-9GA8- 
                                      049J387ACBE2}");

            var productModelList = new List<ProductModel>();

            if (products != null && products.Any())
            {
                foreach (var product in products)
                {
                    if (product == null)
                        continue;

                    var imgField = (ImageField)product
                        .Fields["ProductImage"];

                    var items = new ProductModel
                    {
                        ProductImage = MediaManager
                            .GetMediaUrl(imgField.MediaItem),
                        ProductName = product
                            .Fields["ProductName"]
                            .Value,
                        ProductDescription = product
                            .Fields["ProductDescription"]
                            .Value
                    };
                    productModelList.Add(items);
                }
            }
            return View(productModelList);
        }
    }
}

Index.cshtml

 @model IEnumerable<MicrosoftDemo.Models.ProductModel>
@using Sitecore.Mvc;


@if (Model.Any())
{
    <br/><br/>
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                @foreach (var item in Model)
                {
//                    how do i print multiple items am i doing anything wrong here [email protected]().Field not displaying anything
                    <div class="col-md-5">
                        <h3>
                            <span>
                                @*I am getting error below cannot convert from string to SiteCore.Data.Items.Item*@
                                @Html.Sitecore().Field("ProductImage", item.ProductImage, new {@class = "img-responsive"})
                            </span>
                            @Html.Sitecore().Field("ProductName", item.ProductName)
                        </h3>
                        <br/>
                        <p class="myfont">@Html.Sitecore().Field("ProductDescription", item.ProductDescription)</p>
                    </div>
                }
            </div>
        </div>
    </div>
}

Can anybody tell me how to achieve this ? Any help would be much appreciated

Answer 1

To explain why you are getting that, @Html.Sitecore().Field requires a field name and the item to work with. Right now you are passing it a property on your model which is a string.

To solve that you have 2 options.

Option 1, write the markup yourself:

Change:

@Html.Sitecore().Field("ProductImage", item.ProductImage, new {@class = "img-responsive"})

to

<img src="@item.ProductImage" class="img-responsive" />

That would work, but it will not allow the content editor to edit the image in the Experience Editor.

Option 2, pass the item into the model

Currently your model is a list of:

var items = new ProductModel
{
    ProductImage = MediaManager
        .GetMediaUrl(imgField.MediaItem),
    ProductName = product
        .Fields["ProductName"]
        .Value,
    ProductDescription = product
        .Fields["ProductDescription"]
        .Value
};

Rather than keep that, make your main model class an enumerable of Item

var productModelList = new List<Item>();

You can then replace this entire block:

if (products != null && products.Any())
{
    foreach (var product in products)
    {
        if (product == null)
            continue;

        var imgField = (ImageField)product
            .Fields["ProductImage"];

        var items = new ProductModel
        {
            ProductImage = MediaManager
                .GetMediaUrl(imgField.MediaItem),
            ProductName = product
                .Fields["ProductName"]
                .Value,
            ProductDescription = product
                .Fields["ProductDescription"]
                .Value
        };
        productModelList.Add(items);
    }
}

with

productModelList.AddRange(products);

Finally your markup would change to use the item and not the property name:

@foreach (var item in Model)
{
    <div class="col-md-5">
        <h3>
            <span>
                @Html.Sitecore().Field("ProductImage", item, new {@class = "img-responsive"})
            </span>
            @Html.Sitecore().Field("ProductName", item)
        </h3>
        <br/>
        <p class="myfont">@Html.Sitecore().Field("ProductDescription", item)</p>
    </div>
}

Its a bit more work, but it will enable the Experience Editor for all your fields.

Answer 2

The reason why you're getting cannot convert from string to SiteCore.Data.Items.Item error is the fact that Field helper expects parameters:

• Name of the field
• Item from which the field should be taken
• optional parameters

Your ProductImage field is coming from product items you're looping in the controller. You need to pass that item in the model to your view:

1. Add ProductItem of type Item to your model class.

2. Set ProductItem in your loop like:

var items = new ProductModel
{
    ProductImage = MediaManager
        .GetMediaUrl(imgField.MediaItem),
    ProductName = product
        .Fields["ProductName"]
        .Value,
    ProductDescription = product
        .Fields["ProductDescription"]
        .Value,
    ProductItem = product
};

3. and in cshtml:

@Html.Sitecore().Field("ProductImage", item.ProductItem, new {@class = "img-responsive"})