urgent split multi media picker display first image partial view macro

Peter Alcock 113 posts 176 karma points

Apr 23, 2016 @ 22:40

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

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 3074 posts 13632 karma points MVP 11x 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 3074 posts 13632 karma points MVP 11x 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 3074 posts 13632 karma points MVP 11x 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 3074 posts 13632 karma points MVP 11x 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

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