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

24 Aug 20262 minutes to read

The Tabs control supports loading external content using the Ajax library. Refer to the following steps.

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

  • Retrieve the response from the Ajax success event and use it to initialize the Tab.

@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();
}