Search results

Load the content as partial view to Tab in ASP.NET Core Tabs control

28 Jul 2021 / 1 minute to read

Since Tab is a Navigation control, it doesn’t have support to load any content directly or using any DataAdaptor. But it is provided with the items support. So to load the content as partial view, you would need to make use of the AJAX or EJ2 Datamanager as described in our How-To section help document.

In the below demo, we have explained on how to create the Tab items dynamically and then to load the other Syncfusion controls in it from partial views.

tagHelper
partialview.cs
Copied to clipboard
<ejs-tab id="MainTab" created="Created" selecting="Selecting">
    <e-tab-tabitems>
        <e-tab-tabitem header="ViewBag.headerText0" content="<br/><div id='GridOrder1'></div>"></e-tab-tabitem>
        <e-tab-tabitem header="ViewBag.headerText1" content="<br/><div id='GridOrder2'></div>"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

<script>
    function Created() {
        var ajax = new ej.base.Ajax('@Url.Action("PartialView1", "Home")', 'GET', true);
        ajax.send().then();
         ajax.onSuccess = function (data) {
            $("#GridOrder1").html(data);
        }
    }
    function Selecting(e) {
        if (e.selectingIndex != 0){
            var ajax = new ej.base.Ajax('@Url.Action("PartialView2", "Home")', 'GET', true);
            ajax.send().then();
            ajax.onSuccess = function (data) {
                $("#GridOrder2").html(data);
            }
        }
    }
</script>

//Code in the PartialView1

<h2>Grid</h2>


<ejs-grid id="Grid1" height="250" allowPaging="true">
    <e-grid-pageSettings pageCount="3"></e-grid-pageSettings>
    <e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/Orders" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="160"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="170"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="170"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="170"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" textAlign="Center"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<ejs-scripts></ejs-scripts>

//Code in the PartialView2

<h2>Grid</h2>


<ejs-grid id="Grid2" height="400px" allowPaging="true">
    <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Products" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="150"></e-grid-column>
        <e-grid-column field="UnitPrice" headerText="Supplier ID" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="UnitsInStock" headerText="QuantityPerUnit" format="C2" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="Discontinued" headerText="Discontinued" width="140" textAlign="Center" type="boolean" displayAsCheckBox="true"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<ejs-scripts></ejs-scripts>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TabController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            ViewBag.headerText0 = new TabHeader { Text = "Grid1" };
            ViewBag.headerText1 = new TabHeader { Text = "Grid2" };
            return View();
        }
        public ActionResult PartialView1()
        {
        
            return PartialView();

        }

        public ActionResult PartialView2()
        {

            return PartialView();

        }

    }
}

Output be like the below.

Alt text

Alt text