Data Binding

6 Dec 20249 minutes to read

The Syncfusion® ASP.NET Core controls load the data either from local data sources or remote data services using the dataSource property and it supports the data type of an array or DataManager. Also supports different kind of data services such as OData, OData V4, Web API, and data formats such as XML, JSON, JSONP with the help of DataManager adaptors.

Local

To bind local data to the Syncfusion® ASP.NET Core controls, you can assign a JavaScript array of object or string to the dataSource property. The local data source can also be provided as an instance of the DataManager.

<div id='container'>
    <span class="content-title"> Select customer name: </span>
    <ejs-inplaceeditor id="element" mode="Inline" type="DropDownList" value="ViewBag.value" model="ViewBag.model">
    </ejs-inplaceeditor>
</div>

<style>
    #container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    #element {
        width: 150px;
    }

    .content-title {
        font-weight: 500;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
</style>
public class HomeController : Controller
{
    List<gameList> game = new List<gameList>();
    public ActionResult Index()
    {
        game.Add(new gameList { Id = "1", Name = "Maria Anders" });
        game.Add(new gameList { Id = "2", Name = "Ana Trujillo" });
        game.Add(new gameList { Id = "3", Name = "Antonio Moreno" });
        game.Add(new gameList { Id = "4", Name = "Thomas Hardy" });
        game.Add(new gameList { Id = "5", Name = "Chiristina Berglund" });
        game.Add(new gameList { Id = "6", Name = "Hanna Moos" });
        ViewBag.value = "Maria Anders";
        ViewBag.model = new { dataSource = game, fields = new { text = "Name" }, Placeholder = "Select a customer" };
        return View();
    }
    public class gameList
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }
}

The output will be as follows.

data

Remote

To bind remote data to the Syncfusion® ASP.NET Core control, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint URL.

OData V4

The OData V4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData V4 services. To fetch data from the server by using DataManager with the adaptor property configure as ODataV4Adaptor.

In the following sample, In-place Editor renders a DropDownList control and its dataSource property configured for fetching a data from the server by using ODataV4Adaptor with DataManager.

<div id='container'>
    <span class="content-title"> Select customer name: </span>
    <ejs-inplaceeditor id="element" mode="Inline" type="DropDownList" value="ViewBag.value" model="ViewBag.model" created="created">
    </ejs-inplaceeditor>
</div>

<style>
    #container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    #element {
        width: 150px;
    }

    .content-title {
        font-weight: 500;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
</style>

<script>
    function created() {
        var editObj = document.getElementById('element').ej2_instances[0];
        editObj.model.dataSource = new ej.data.DataManager({
            url: "https://services.odata.org/V4/Northwind/Northwind.svc/",
            adaptor: new ej.data.ODataV4Adaptor,
            crossDomain: true
        });
        editObj.model.query = new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.model = new
        {
            placeholder = "Select a customer",
            fields = new { text = "ContactName", value = "CustomerID" }
        };
        ViewBag.value = "Maria Anders";
        return View();
    }
}

The output will be as follows.

odata

Web API

Data can fetch from the server by using DataManager with the adaptor property configure as WebApiAdaptor.

In the following sample, In-place Editor render a DropDownList control and its dataSource property configured for fetching a data from the server by using WebApiAdaptor with DataManager.

<div id='container'>
    <span class="content-title"> Select customer name: </span>
    <ejs-inplaceeditor id="element" mode="Inline" type="DropDownList" value="ViewBag.value" model="ViewBag.model" created="created">
    </ejs-inplaceeditor>
</div>

<style>
    #container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    #element {
        width: 150px;
    }

    .content-title {
        font-weight: 500;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
</style>

<script>
    function created() {
        new ej.data.DataManager({
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers/',
            adaptor: new ej.data.WebApiAdaptor
        }).executeQuery(new ej.data.Query().take(8)).then((e) => {
            var editObj = document.getElementById('element').ej2_instances[0];
            editObj.model.dataSource = e.result.d;
        });
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.model = new { placeholder = "Select a customer", fields = new { text = "ContactName", value = "CustomerID" } };
        ViewBag.value = "Maria Anders";
        return View();
    }
}

The output will be as follows.

webapi