We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Template for Rotator using DataSource?

Thread ID:

Created:

Updated:

Platform:

Replies:

117460 Oct 24,2014 03:12 PM UTC Oct 28,2014 01:35 PM UTC ASP.NET MVC 1
loading
Tags: Rotator
Fabio Melendez
Asked On October 24, 2014 03:12 PM UTC

I want to create a Rotator on my screen

I want to be able to assign a template to it and populate the template using the values that come from my datasource from the controller

So for example my model would have

Image
Title
Text

Similar as to what is on this sample


but I need all those values to come directly from my Controller and not hardcoded in the View. Can't seem to find a sample on how to accomplish this.

Kasithangam C [Syncfusion]
Replied On October 28, 2014 01:35 PM UTC

Hi Fabio,

 

We have achieved your requirement (passing rotator values from controller to view) by using “ContentTemplate” which is used in “Items” property of rotator component .We have maintained the rotator image, title and text values in the generic list and the list values are  passed from controller to the view as shown below code,

 

[RotatorController.cs]

 

List<data> Values = new List<data>();

        public ActionResult Index()

        {

            Values.Add(new data { Title = "Beautiful Bird", Image = "../Images/rotator/bird.jpg", Text = "Tablets are equipped with sensors, including cameras, microphone, accelerometer and touchscreen" });

            Values.Add(new data { Title = "Rose", Image = "../Images/rotator/rose.jpg",Text="Flowers vary in size and shape and are usually large and showy,There are over 100 species"});

            Values.Add(new data { Title = "Nature", Image = "../Images/rotator/nature.jpg", Text = "Nature, in the broadest sense, is equivalent to the natural, physical, or material world or universe." });

            Values.Add(new data { Title = "Snow Fall", Image = "../Images/rotator/snowfall.jpg", Text = "Mt. Baker ski area in Washington State has the world record for snowfall at 1,140 inches of snow in the 1998/1999 winter season" });

            Values.Add(new data { Title = "Credit Card", Image = "../Images/rotator/card.jpg", Text = "A credit card is a payment card issued to users as a system of payment.It allows the cardholder to pay for goods and services based on the holder's promise to pay for them" });

           ViewBag.dataSource = Values;

            return View(Values);

        }

 

And in the view, we can get the list values of image, title and text in “Model” and processed as shown below code snippet,

 

[Index.cshtml]

 

@Html.EJ().Rotator("sliderContent").Items(itemElement =>

{

   

        foreach (var data in Model)

        {

            itemElement.Add().ContentTemplate(@<div>

 

                <div class="leftPanel">

                    <img src="@Url.Content(@data.Image)" />

                </div>

                <div class="rightPanel blck">

                    <div class="contentPanel">@data.Title </div>

                    <ul>

                        <li>@data.Text</li>

                    </ul>

                </div>

 

            </div>);

        }

   

}).SlideWidth("700px").SlideHeight("300px")

 

 

Also, we have prepared the sample based on this and it is available under the following location,

 

Sample Location: Sample

Kindly let us know if you have any queries.

Regards,

Kasithangam


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;