urgent split multi media picker display first image partial view macro - Templates, (partial) views and macros

Peter Alcock 113 posts 176 karma points

Apr 23, 2016 @ 22:40

URGENT! Split multi media picker, display first image - partial view macro

Umbraco 7

Hey all,

I have a partial view macro file which is my search feature which works really well displaying the found node details, i want it to also display the first image from the multimedia picker for that node and having trouble getting it working!

Here is the snippet of code that pulls/displays the node data, the multimedia field alias is 'images' could someone help!

<table cellpadding="10" cellspacing="5" style="width:98%;">
            <tr>
                <th>
                    Deal Name
                </th>
                <th>
                    Price
                </th>
                <th>
                   Holiday Dates
                </th>
                <th>
                    Detail
                </th>
                <th></th>
            </tr>         
             @foreach (Node c in listDeals)
            {
                var link = Umbraco.Url(c.Id);
                var sDate = c.GetProperty("startDate").Value;
                var beginDate = umbraco.library.FormatDateTime(sDate, "d - ");
                var eDate = c.GetProperty("endDate").Value;
                var endingDate = umbraco.library.FormatDateTime(eDate, "d MMMM yyyy");

                <tr>
                    <td>
                    @c.GetProperty("name").Value 
                    </td>
                    <td>@c.GetProperty("price").Value</td>
                    <td>@{@beginDate @endingDate}</td>
                    <td>
                        @Html.Raw(c.GetProperty("mainText").Value)
                    </td> 
                    <td><a class="pSubmit" href="@{@link}">
                    View Deal</a><td>
                </tr>
            }
        </table>

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 23, 2016 @ 22:57

Hi Peter,

How are you creating/setting the listDeals variable?

Jeavon

Copy Link

Peter Alcock 113 posts 176 karma points

Apr 23, 2016 @ 23:02

Here's the full code buddy if that helps

@using System.Text.RegularExpressions
@using System.Xml
@using umbraco.NodeFactory
@inherits Umbraco.Web.Macros.PartialViewMacroPage



@{
    var rootNode = new Node(1064);

    var listDeals = new List<Node>();
    listDeals = rootNode.GetDescendantNodesByType("Deal").ToList();
    var locationSearch = Request["location"];
    if (!string.IsNullOrEmpty(locationSearch))
    {
        listDeals = listDeals.Where(x => x.Parent.Id.ToString() == locationSearch).ToList();
    }

    var agentSearch = Request["agent"];
    if (!string.IsNullOrEmpty(agentSearch))
    {
        listDeals = listDeals.Where(x => x.GetProperty("client")!=null && x.GetProperty("client").Value == agentSearch).ToList();
    }

    var price = Request["price"];
    if (!string.IsNullOrEmpty(price))
    {
        var p = Convert.ToDecimal(price);
        listDeals = listDeals.Where(x => x.GetProperty("price") != null && Convert.ToDecimal(Regex.Match(x.GetProperty("price").Value, @"\d+").Value) >= p && ((p!=500 && Convert.ToDecimal(Regex.Match(x.GetProperty("price").Value, @"\d+").Value) < p+100) || p==500)).ToList();
    }

    var startDate = Request["startDate"];
    if (!string.IsNullOrEmpty(startDate))
    {
        DateTime? st=null;
        try
        {
            st =  DateTime.ParseExact(startDate, "yyyy-MM-dd", null).Date;
        }
        catch { }

        if (st != null)
        {
            listDeals = listDeals.Where(x => x.GetProperty("startDate") != null && XmlConvert.ToDateTime(x.GetProperty("startDate").Value).Date >= st).ToList();
        }
    }

    var endDate = Request["endDate"];
    if (!string.IsNullOrEmpty(endDate))
    {
        DateTime? ed = null;
        try
        {
            ed = DateTime.ParseExact(endDate, "yyyy-MM-dd", null).Date;
        }
        catch { }

        if (ed != null)
        {
            listDeals = listDeals.Where(x => x.GetProperty("endDate") != null && XmlConvert.ToDateTime(x.GetProperty("endDate").Value).Date <= ed).ToList();
        }
    }
}

<form method="post">
    <fieldset>
        <div>
            <label for="location">Location</label>
            <select name="location">
                <option value="">--All--</option>
                @{
                    var locationNodes = rootNode.Children;
                    foreach (Node node in locationNodes)
                    {
                        <option value="@node.Id" @(!string.IsNullOrEmpty(locationSearch) && locationSearch == node.Id.ToString()?"selected":"")>@node.Name</option>
                    }
                }
            </select>
        </div>
        <div>
            <label for="price">Price</label>
            <select name="price">
                <option value="">--All--</option>
                <option value="0" @(price=="0"? "selected":"")>0-100</option>
                <option value="100" @(price=="100"? "selected":"")>100-200</option>
                <option value="200" @(price=="200"? "selected":"")>200-300</option>
                <option value="300" @(price=="300"? "selected":"")>300-400</option>
                <option value="400" @(price=="400"? "selected":"")>400-500</option>
                <option value="500" @(price=="500"? "selected":"")>500+</option>
            </select>
        </div>
        <div>
            <label for="startDate">Valid From</label><input type="date" name="startDate" id="startDate" value="@startDate" />
        </div>
        <div>
            <label for="endDate">Valid To</label><input type="date" name="endDate" id="endDate" value="@endDate"/>
        </div>
        <div>
            <label for="agent">Agents</label>
            <select name="agent">
                <option value="">--All--</option>
                @{
                    var agents = Membership.GetAllUsers();
                    foreach (MembershipUser agent in agents)
                    {
                        <option value="@agent.UserName" @(!string.IsNullOrEmpty(agentSearch) && agentSearch == agent.UserName ? "selected":"")>@agent.UserName</option>
                    }
                }
            </select>
        </div>
        <div>
            <input type="submit" value="Search" />
        </div>
    </fieldset>
    <div class="clientPageDeals">
        <table cellpadding="10" cellspacing="5">
            <tr>
                <th>
                    Deal Name
                </th>
                <th>
                    Price
                </th>
                <th>
                   Holiday Dates
                </th>
                <th>
                    Detail
                </th>
                <th></th>
            </tr>          
            @foreach (Node c in listDeals)
            {
                var link = Umbraco.Url(c.Id);
                var sDate = c.GetProperty("startDate").Value;
                var beginDate = umbraco.library.FormatDateTime(sDate, "d - ");
                var eDate = c.GetProperty("endDate").Value;
                var endingDate = umbraco.library.FormatDateTime(eDate, "d MMMM yyyy");
                <tr>
                    <td>
                    @c.GetProperty("name").Value 
                    </td>
                    <td>@c.GetProperty("price").Value</td>
                    <td>@{@beginDate @endingDate}</td>
                    <td>
                        @Html.Raw(c.GetProperty("mainText").Value)
                    </td> 
                    <td><a class="pSubmit" href="@{@link}">
                    View Deal</a><td>
                </tr>
            }
        </table>
    </div>

</form>

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 23, 2016 @ 23:13

Ok, you really don't want/need to be using the old NodeFactory, I've had a quick go at updating your code to use the current methods and added what I think your after with the image:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using System.Text.RegularExpressions

@{
    var rootNode = Umbraco.TypedContent(1064);

    var listDeals = rootNode.Descendants("Deal");
    var locationSearch = Request["location"];
    if (!string.IsNullOrEmpty(locationSearch))
    {
        listDeals = listDeals.Where(x => x.Parent.Id.ToString() == locationSearch);
    }

    var agentSearch = Request["agent"];
    if (!string.IsNullOrEmpty(agentSearch))
    {
        listDeals = listDeals.Where(x => x.GetProperty("client") != null && x.GetPropertyValue<string>("client") == agentSearch);
    }

    var price = Request["price"];
    if (!string.IsNullOrEmpty(price))
    {
        var p = Convert.ToDecimal(price);
        listDeals = listDeals.Where(x => x.GetProperty("price") != null && Convert.ToDecimal(Regex.Match(x.GetPropertyValue<string>("price"), @"\d+").Value) >= p && ((p != 500 && Convert.ToDecimal(Regex.Match(x.GetPropertyValue<string>("price"), @"\d+").Value) < p + 100) || p == 500)).ToList();
    }

    var startDate = Request["startDate"];
    if (!string.IsNullOrEmpty(startDate))
    {
        DateTime? st = null;
        try
        {
            st = DateTime.ParseExact(startDate, "yyyy-MM-dd", null).Date;
        }
        catch { }

        if (st != null)
        {
            listDeals = listDeals.Where(x => x.GetProperty("startDate") != null && x.GetPropertyValue<DateTime>("startDate").Date >= st).ToList();
        }
    }

    var endDate = Request["endDate"];
    if (!string.IsNullOrEmpty(endDate))
    {
        DateTime? ed = null;
        try
        {
            ed = DateTime.ParseExact(endDate, "yyyy-MM-dd", null).Date;
        }
        catch { }

        if (ed != null)
        {
            listDeals = listDeals.Where(x => x.GetProperty("endDate") != null && x.GetPropertyValue<DateTime>("endDate").Date <= ed);
        }
    }
}

<form method="post">
    <fieldset>
        <div>
            <label for="location">Location</label>
            <select name="location">
                <option value="">--All--</option>
                @{
                    var locationNodes = rootNode.Children;
                    foreach (var node in locationNodes)
                    {
                        <option value="@node.Id" @(!string.IsNullOrEmpty(locationSearch) && locationSearch == node.Id.ToString() ? "selected" : "")>@node.Name</option>
                    }
                }
            </select>
        </div>
        <div>
            <label for="price">Price</label>
            <select name="price">
                <option value="">--All--</option>
                <option value="0" @(price == "0" ? "selected" : "")>0-100</option>
                <option value="100" @(price == "100" ? "selected" : "")>100-200</option>
                <option value="200" @(price == "200" ? "selected" : "")>200-300</option>
                <option value="300" @(price == "300" ? "selected" : "")>300-400</option>
                <option value="400" @(price == "400" ? "selected" : "")>400-500</option>
                <option value="500" @(price == "500" ? "selected" : "")>500+</option>
            </select>
        </div>
        <div>
            <label for="startDate">Valid From</label><input type="date" name="startDate" id="startDate" value="@startDate" />
        </div>
        <div>
            <label for="endDate">Valid To</label><input type="date" name="endDate" id="endDate" value="@endDate" />
        </div>
        <div>
            <label for="agent">Agents</label>
            <select name="agent">
                <option value="">--All--</option>
                @{
                    var agents = Membership.GetAllUsers();
                    foreach (MembershipUser agent in agents)
                    {
                        <option value="@agent.UserName" @(!string.IsNullOrEmpty(agentSearch) && agentSearch == agent.UserName ? "selected" : "")>@agent.UserName</option>
                    }
                }
            </select>
        </div>
        <div>
            <input type="submit" value="Search" />
        </div>
    </fieldset>
    <div class="clientPageDeals">
        <table cellpadding="10" cellspacing="5">
            <tr>
                <th>
                    Deal Name
                </th>
                <th>
                    Price
                </th>
                <th>
                    Holiday Dates
                </th>
                <th>
                    Detail
                </th>
                <th></th>
            </tr>
            @foreach (var c in listDeals)
            {
                var link = c.Url;
                var sDate = c.GetPropertyValue<DateTime>("startDate");
                var beginDate = sDate.ToString("d - ");
                var eDate = c.GetPropertyValue<DateTime>("endDate");
                var endingDate = eDate.ToString("d MMMM yyyy");

                var firstImageId = c.GetPropertyValue<string>("images").Split(',').FirstOrDefault();
                var firstImage = Umbraco.TypedMedia(firstImageId);

                <tr>
                    <td>
                        @c.GetPropertyValue("name")
                    </td>
                    <td>@c.GetPropertyValue("price")</td>
                    <td>@{@beginDate @endingDate}<</td>
                    <td>
                        <img src="@firstImage.Url" />
                        @Html.Raw(c.GetPropertyValue("mainText"))
                    </td>
                    <td>
                        <a class="pSubmit" href="@{@link}">
                            View Deal
                        </a>
                    <td>
                </tr>
    }
        </table>
    </div>

</form>

Copy Link

Peter Alcock 113 posts 176 karma points

Apr 24, 2016 @ 09:17

Hey thanks for that! seems to be having trouble though just getting error loading partial view script.

Seems to be with this line

firstImageId = c.GetPropertyValue<string>("images").Split(',').FirstOrDefault();

If i remove it loads fine again just obviously without the image!

cheers

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 24, 2016 @ 09:36

Strange, try this instead:

        @foreach (var c in listDeals)
        {
            var link = c.Url;
            var sDate = c.GetPropertyValue<DateTime>("startDate");
            var beginDate = sDate.ToString("d - ");
            var eDate = c.GetPropertyValue<DateTime>("endDate");
            var endingDate = eDate.ToString("d MMMM yyyy");

            var firstImageId = c.GetPropertyValue<string>("images").Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).FirstOrDefault();
            var firstImage = Umbraco.TypedMedia(firstImageId);

            <tr>
                <td>
                    @c.GetPropertyValue("name")
                </td>
                <td>@c.GetPropertyValue("price")</td>
                <td>@{@beginDate @endingDate}<</td>
                <td>
                    @if (firstImage != null)
                    {
                    <img src="@firstImage.Url" />
                    }
                    @Html.Raw(c.GetPropertyValue("mainText"))
                </td>
                <td>
                    <a class="pSubmit" href="@{@link}">
                        View Deal
                    </a>
                <td>
            </tr>
            }

Copy Link

Peter Alcock 113 posts 176 karma points

Apr 24, 2016 @ 10:34

Still wouldn't load oddly?

Have managed to do it using my previous version but i cant figure out how to just use the first image found in the split, any advice on that?

heres the snippet:

var images = c.GetProperty("images").Value.ToString().Split(',');



                 <tr>
                    <td>
                    @c.GetProperty("name").Value 
                    </td>
                     <td>

                     @foreach(string image in images)
                      {
                        var cMediaFile = ApplicationContext.Current.Services.MediaService.GetById(Convert.ToInt32(image));
                        var cUrl = cMediaFile.GetValue("umbracoFile").ToString();

                          <img src="@{@cUrl}" width="20%"/>

                      }

                    </td>

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 24, 2016 @ 10:47

Did it show an error?

You should almost never use a management service in a front end view such as MediaService!!

Copy Link

is working on a reply...

Flag this post as spam?

URGENT! Split multi media picker, display first image - partial view macro