Perform Search Operation in ListView with Controller data
21 Dec 202224 minutes to read
In ASP .Net Core environment, we can fetch the data from controller using adaptors and the fetched data can be appended to any Controls.
Here we are going to use URL Adaptor to fetch the data from Controller and bind the data to ListView.
To achieve this, refer to the below code snippet.
<div class="control-section">
<div class="e-input-group">
<input class="e-input" id="textbox" name='input' type="text" placeholder="Search" />
</div>
<ejs-listview enable="true" id="nestedlist" showHeader="true" headerTitle="Folder">
<e-listview-fieldsettings tooltip="text">
</e-listview-fieldsettings>
<e-data-manager url="@Url.Action("UrlDatasource", "Home")" adaptor="UrlAdaptor">
</e-data-manager>
</ejs-listview>
</div> using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using filterlist.Models;
namespace filterlist.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult About()
{
ViewData["Message"] = "Your application description page.";
return View();
}
public IActionResult Contact()
{
ViewData["Message"] = "Your contact page.";
return View();
}
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
public IActionResult UrlDatasource()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
id = "01",
text = "Music",
icon = "folder",
child = new List<object>() { new { id = "01-01", text = "Gouttes.mp3", icon = "file" } }
});
. . .
. . .
listdata.Add(new
{
id = "04",
text = "Pictures",
icon = "folder",
child = new List<object>() {
new {
id= "04-01", text= "Camera Roll", icon= "folder",
child= new List<object>() {
new { id= "04-01-01", text= "WIN_20160726_094117.JPG", icon= "file" },
new { id= "04-01-02", text= "WIN_20160726_094118.JPG", icon= "file" },
new { id= "04-01-03", text= "WIN_20160726_094119.JPG", icon= "file" }
}
},
new {
id= "04-02", text= "Wind.jpg", icon= "file"
},
new {
id= "04-02", text= "Stone.jpg", icon= "file"
},
new {
id= "04-02", text= "Home.jpg", icon= "file"
},
new {
id= "04-02", text= "Bridge.png", icon= "file"
}
}
});
listdata.Add(new
{
id = "05",
text = "Downloads",
icon = "folder",
child = new List<object>() {
new { id= "05-01", text= "UI-Guide.pdf", icon= "file" },
new { id= "05-02", text= "Tutorials.zip", icon= "file" },
new { id= "05-03", text= "Game.exe", icon= "file" },
new { id= "05-04", text= "TypeScript.7z", icon= "file" },
}
});
return Json(listdata); // Returning JSON Data
}
}
}NOTE
While using Adaptors in our application, we need to return the JSON data from Controller.
Perform Search Operation
To perform search operation in the fetched controller data, we have used a textbox and bound keyup event to the textbox.
In the keyup event, we have filtered the data using dataManager with user input and filtered data is appended to ListView using refresh method.
Refer to the below code snippet.
<script>
document.getElementById("textbox").addEventListener("keyup", onKeyUp);
//Here, the list items are filtered using the DataManager instance for ListView
function onKeyUp() {
var listObj = (document.getElementById("nestedlist")).ej2_instances[0];
var value = (document.getElementById("textbox")).value;
var newdata;
var data = new ej.data.DataManager({ url: "/Home/UrlDatasource", adaptor: new ej.data.UrlAdaptor }).executeQuery(new ej.data.Query()).then((e) => {
(e.result).forEach((data) => {
newdata = e.result;
});
myfilter();
});
function myfilter() {
var listData = new ej.data.DataManager(newdata).executeLocal(
new ej.data.Query().where("text", "startswith", value, true)
);
if (!value) {
listObj.dataSource = newdata;
} else {
listObj.dataSource = listData;
}
listObj.refresh(); // Refreshing the ListView
}
}
</script>@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
<div class="control-section">
<div class="e-input-group">
<input class="e-input" id="textbox" name='input' type="text" placeholder="Search" />
</div>
@Html.EJS().ListView("nestedlist").DataSource(dataManger =>
{
dataManger.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").CrossDomain(true);
}).Fields(new ListViewFieldSettings { Id = "id", Text = "text", Tooltip= "text" }).Render()
</div>
<script>
document.getElementById("textbox").addEventListener("keyup", onKeyUp);
//Here, the list items are filtered using the DataManager instance for ListView
function onKeyUp() {
var listObj = (document.getElementById("nestedlist")).ej2_instances[0];
var value = (document.getElementById("textbox")).value;
var newdata;
var data = new ej.data.DataManager({ url: "/Home/UrlDatasource", adaptor: new ej.data.UrlAdaptor }).executeQuery(new ej.data.Query()).then((e) => {
(e.result).forEach((data) => {
newdata = e.result;
});
myfilter();
});
function myfilter() {
var listData = new ej.data.DataManager(newdata).executeLocal(
new ej.data.Query().where("text", "startswith", value, true)
);
if (!value) {
listObj.dataSource = newdata;
} else {
listObj.dataSource = listData;
}
listObj.refresh();
}
}
</script>
<style>
#nestedlist, #textbox, .e-input-group {
max-width: 500px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
.e-input-group {
margin-left: 320px;
margin-top: 40px;
}
</style>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1.Controllers
{
public class ListViewController : Controller
{
public IActionResult UrlDatasource()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
id = "01",
text = "Music",
icon = "folder",
child = new List<object>() { new { id = "01-01", text = "Gouttes.mp3", icon = "file" } }
});
listdata.Add(new
{
id = "02",
text = "Videos",
icon = "folder",
child = new List<object>() {
new { id= "02-01", text= "Naturals.mp4", icon= "file" },
new { id= "02-02", text= "Wild.mpeg", icon= "file" },
}
});
listdata.Add(new
{
id = "03",
text = "Documents",
icon = "folder",
child = new List<object>() {
new { id= "03-01", text= "Environment Pollution.docx", icon= "file" },
new { id= "03-02", text= "Global Water, Sanitation, & Hygiene.docx", icon= "file" },
new { id= "03-03", text= "Global Warming.ppt", icon= "file" },
new { id= "03-04", text= "Social Network.pdf", icon= "file" },
new { id= "03-05", text= "Youth Empowerment.pdf", icon= "file" }
}
});
listdata.Add(new
{
id = "04",
text = "Pictures",
icon = "folder",
child = new List<object>() {
new {
id= "04-01", text= "Camera Roll", icon= "folder",
child= new List<object>() {
new { id= "04-01-01", text= "WIN_20160726_094117.JPG", icon= "file" },
new { id= "04-01-02", text= "WIN_20160726_094118.JPG", icon= "file" },
new { id= "04-01-03", text= "WIN_20160726_094119.JPG", icon= "file" }
}
},
new {
id= "04-02", text= "Wind.jpg", icon= "file"
},
new {
id= "04-02", text= "Stone.jpg", icon= "file"
},
new {
id= "04-02", text= "Home.jpg", icon= "file"
},
new {
id= "04-02", text= "Bridge.png", icon= "file"
}
}
});
listdata.Add(new
{
id = "05",
text = "Downloads",
icon = "folder",
child = new List<object>() {
new { id= "05-01", text= "UI-Guide.pdf", icon= "file" },
new { id= "05-02", text= "Tutorials.zip", icon= "file" },
new { id= "05-03", text= "Game.exe", icon= "file" },
new { id= "05-04", text= "TypeScript.7z", icon= "file" },
}
});
return Json(listdata); // Returning JSON Data
}
}
}