How to Render Controls in Partial views using AJAX in ASP.NET Core without duplicate header?

2 mins read

This article explains how to render the Syncfusion ASP.NET Core controls in Partial Views using AJAX without duplicate header.

Create ASP.NET Core Application and configure Syncfusion package

Create ASP.NET Core application.
Install Syncfusion.EJ2.AspNet.Core NuGet package.
Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.
```
@addTagHelper *, Syncfusion.EJ2
```

Add Syncfusion styles and scripts reference in ~/Views/Shared/_Layout.cshtml file in the application.

<head>
...
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.2.39/material.css" />
<!-- Syncfusion ASP.NET Core controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/20.2.39/dist/ej2.min.js"></script>
</head>

Open ~/Pages/Shared/_Layout.cshtml page and register the script manager at the end of `<body>` in the ASP.NET Core application as follows.
```
<body>
...

<ejs-scripts></ejs-scripts>
</body>
```

The default application has Index page and Privacy page under ~Views/Home folder. Follow below steps to change the Privacy page as partial view.

Remove the @{} part of the code from Privacy.cshtml page to convert it as Partial View page.

Now, add the required Syncfusion controls to render in the Partial View page. Here, in this example we have added Button control.

@{
    Layout = null;
}
 
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.2.39/bootstrap5.css" />
<script src="https://cdn.syncfusion.com/ej2/20.2.39/dist/ej2.min.js"></script>
 
<ejs-button id="primarybtn" content="EJS Button" isPrimary="true" ></ejs-button>
 
<ejs-scripts></ejs-scripts>

Note:

Here, Layout set to null to avoid the displaying of header while rendering controls from partial page. When the Layout is set to null, the styles and scripts won’t be inherited, so, refer the required styles and scripts in the page.

Add a button in ~/Views/Home/Index.cshtml view page to load the Partial View on this button click. Also, create a div element in ~/Views/Home/Index.cshtml page to render controls on button click from the Partial View.

<ejs-button isPrimary=true content="load partial data only" id="but" onclick="fnLoadPartialPage()"></ejs-button>
 
<div style="border:1px solid black" class="row">
Showing Data Loaded Content here...
<div id="divRenderBody"></div>
</div>

To render the controls on button click, from partial view using AJAX, append the partial container to the created div element as shown in below code.

<script>
function fnLoadPartialPage() {
if(document.querySelector("#divRenderBody").childElementCount ==0){
var ajax = new ej.base.Ajax('/Home/privacy', 'GET', true);
ajax.send().then(function (result) {
var fragment = document.createElement('div');
fragment.innerHTML = result;
ej.base.append([fragment], document.getElementById('divRenderBody'),true);
});
}
}
</script>

Initial Button Rendering

Initial output image

After Button click rendering of controls from partial view

After Button click rendering controls from partial view and append to created div element.

View Sample in GitHub

How to Render Controls in Partial views using AJAX in ASP.NET Core without duplicate header?

Create ASP.NET Core Application and configure Syncfusion package

See also

Access denied