How to load content through post in ASP.NET MVC Tabs

21 Aug 20262 minutes 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.

@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>
public IActionResult Index()
{
    return View();
}