MVC Widget with Single Item View Option

Posted by Community Admin on 04-Aug-2018 21:14

MVC Widget with Single Item View Option

All Replies

Posted by Community Admin on 05-Jul-2013 00:00

Hello:

I am looking for a little help in regards to creating custom MVC widgets for Sitefinity. For our project, we are planning on using a pure MVC approach which means that all of the built in widgets that are included for the Web Forms page template are not available.

One of the features of the built-in list widgets that we would like to replicate for our custom modules is the ability to select a specific page template to use when displaying a single detail item. For example, with the News widget, there is a Single Item Settings tab where you can choose to use an Auto-generated page or Select and existing page template to use when viewing an individual News Article. We would like the ability to use this feature to give our end users a little more control over page layout and not having to create all of our detail views in static markup pages.

We have tested creating a very basic MVC widget that returns a list of Events (wanted to test with a build in module first) and added a property to the widget for setting the DetailsPageID using a PageField control in our control designer. However, this does not appear to have any effect on the details page that it used for the Events module. Also, when editing an Event, hitting the Preview button loads a page that just says "no pages has been set to display content like this".

So, our question is whether or not something like this can be accomplished with using pure MVC Templates or does this only work with Web Forms or hybrid mode? Or is there a different or better route to go when using Pure MVC that will allow us to use the Sitefinity template builder for our detail pages?

Any help or suggestions are much appreciated. Thanks!

Posted by Community Admin on 09-Jul-2013 00:00

Hi Evan,

This can be done in quite a few ways, I believe. So if I understand you correctly, you would like to be able to have different templates for different content items. Correct me if I am wrong, but in your case you would even like to open the individual items in different pages.

So, I will start by saying that your initial approach makes perfect sense, meaning that if you want to have different detail page per item, it makes sense to store that in the content item level with a custom field. The same goes if you'd like to render each details page with different MVC View, meaning different mark-up template for each detail item's view.

In both cases you can apply a custom logic in the controller to return different ActionResult based on the properties of the items. You can also get those values from the designer, but the main point is that you can use it to return different views or event to redirect to different pages. Here is a dummy example to help me visualize the suggested approach:

if(designer.selectedvalue)
      return View("this");
if(designer.selected)
      return View("that");
 

Please also take a look at this documentation for the basic example, that you can use as a starting point (link here).

Please review and let me know if that helps and if you need additional clarifications or assistance.

Regards,
Peter
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 09-Jul-2013 00:00

Hi Peter:

Thanks for the response. I had previously come across the documentation that you mentioned and have played around with that type of implementation on our end already. We have done a decent amount of MVC development already so using some logic to determine which view we want to return from an ActionResult is something we are pretty familiar with.

With the video that you posted, when a user clicks on the link to view the details of the event, the same overall page template is used for the event details as was used for the events list, regardless of what the actual content for the view is returned (list of events vs. individual events details).

What we are looking to accomplish is functionality similar to what looks to be available for the built in News widget. When you click edit on that widget, you are able to go to the Single Item Settings tab and select an existing page to use when viewing the details of a selected news item (see the News_SingleItemsSettings image). To my understanding, this allows for an entirely different page with a different overall layout to be used when the details page is loaded, correct?

If possible, we would like to accomplish something similar using a Pure MVC approach within Sitefinity since we have several details pages that utilize an entirely different layout than their parent list page.

Thanks,
Evan

Posted by Community Admin on 09-Jul-2013 00:00

Hi Peter:

After looking around a little more this afternoon in Sitefinity, we may have come up with a possible solution for what we are trying to accomplish but it's still not quite working yet. The method that we are playing with right now is that we create a new page as a details container underneath our parent list page as shown in the attached image (Pages_Details). We created a widget for the list page (Events) that handles generating the list of content items and then created a second widget that is placed on the details page (Event Details) that we would use to pull in the detail information for the content item that was selected. By tweaking the link that is generated on the list page, we are able to have the details page load successfully.

The issue that we are facing now is that the widget on the details page does not get rendered at all. I think that this is due to the known issue of MVC widgets not rendering on details pages as is discussed in this post: www.sitefinity.com/.../how-to-display-mvc-widget-in-detail-views-of-content-items. However we haven't been able to find anything in regards to a workaround when working with a custom MVC Widget and Widget designer since the advanced tab of the designer is blank and doesn't offer a UrlKeyPrefix property to change. Is that something that is possible to do or is there another workaround for getting the widget to render on the details page?

Thanks,
 Evan

Posted by Community Admin on 10-Jul-2013 00:00

Hi Evan,

That was my suggestion as well. Based on the a selected DetailsPageID (in my case per item, in yours per widget via its designer), you need to return an ActionResult to an MVC widget located on that details page.

Yes, you will definitely get this working as that is the correct way of doing things. Of course, I want to help you get this done ASAP.

Thus, could you please send me your code, so I can see how you parse the URL and whatsoever? Also, we have many MVC issues fixed with the upcoming Sitefinity 6.1 and I will try to run your code against it as well.

Cheers,

Peter
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 10-Jul-2013 00:00

Hi Peter:

Thanks for the reply, glad to know it sounds like we're heading in the right direction. We haven't quite got to the point of parsing the URL on our details page since the controller is not being reached at all.

I can put together a quick demo project with what we're doing right now for you to look at. How would you like me to send that to you, it doesn't appear as though I can attach a .zip file in the forums?

Thanks,
 Evan

Posted by Community Admin on 16-Jul-2013 00:00

Hi Evan,

I have created a logic in a custom HTML helper to help you resolve the details page Id based on a PageNode Id.

Please see how I use the custom HTML helper to build the anchor tags that will point to a Sitefinity page and then to a specified controller and its action:
 

@using SitefinityWebApp;
@model SitefinityWebApp.Mvc.Models.EventListModel
<h1 style="font-size: 24px; margin-bottom: 20px;">
    @Html.Raw(Model.Message)
</h1>
 
<div>
    <ul>
        @foreach (var e in Model.Events)
        
            <li>
                <div>
                    @Html.SitefinityDetailsViewLink(e.Title, "Index", "/" + e.UrlName, new Guid("dfa3e71e-a7a7-63db-87ca-ff00009b8c9e"))
                </div>
            </li>
        
    </ul>
</div>

I will also attach the code of the HTML helper itself, so that other people can use it. 

Regards,
Peter
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed