Load content through Ajax

17 Feb 20221 minute to read

The Tab supports to load external contents through AJAX library. Refer to the following steps.

• Import the Ajax module from ej2-base and initialize with URL path.

• Get the data from Ajax Success event, then initialize the Tab with retrieved external path data.

CSHTML

@using Syncfusion.EJ2.Navigations;

@Html.EJS().Tab("MainTab").Created("Created").Render()

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }
</style>

<script>
    function Created() {
       var TabObj = document.getElementById("MainTab").ej2_instances[0];
       var ajax = new ej.base.Ajax('./network.html', 'GET', true);
       ajax.send().then();
       ajax.onSuccess = function (data) {
           TabObj.addTab([{ header: { 'text': 'Twitter' }, content: data }], 0);
       }
    }
</script>

Ajax.cs

public IActionResult Index()
{
    return View();
}