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

How to create a normal listview with datasource in the ASP.NET MVC?

Platform: ASP.NET MVC |
Control: ListView(Mobile) |
Published Date: June 11, 2015 |
Last Revised Date: May 8, 2019
Tags: mobile, listview

You can refer to the following procedure to achieve this requirement.

 

Create Model

First, create model that contains texts field.

Model

public class ListData
    {
        public string texts { get; set; }
    }
    public static class ListDataModal {
        public static List<ListData> listTempSource = new List<ListData>();
        public static List<ListData> setListDataSource()
        {
            listTempSource.Add(new ListData { texts = "Discover Music" });
            listTempSource.Add(new ListData { texts = "Sales and Events" });
            listTempSource.Add(new ListData { texts = "Categories" });
            listTempSource.Add(new ListData { texts = "MP3 Albums" });
            listTempSource.Add(new ListData { texts = "More in Music" });
            return listTempSource;
        }
        public static void clearSource()
        {
            listTempSource.Clear();
        }
    }

 

Create Controller

Then, create controller and pass the datasource in the view.

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Sample.Models; // refers to models
namespace Sample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ListDataModal.clearSource(); //Avoids duplication of listview items from the model
            return View(ListDataModal.setListDataSource().ToList());
        }
    }
}

 

Create View

Create view page to add the codes for rendering the listview by using the datasource created earlier.

CSHTML

@model List<ListData>
@*Creates listview with datasource*@
@Html.EJMobile().ListView("locallistview").ShowHeader(true).HeaderTitle("ListView with DataSource").DataSource(Model).FieldSettings(f => { f.Text("texts"); })

 

Output

Listview

Figure 1: Listview

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

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