How to render Syncfusion components in partial view
This documentation explained how to render Syncfusion component in a partial view.
Create ASP.NET Core control using getting started
https://ej2.syncfusion.com/aspnetcore/documentation/button/getting-started.html
Create a partial view controls & Add the Syncfusion component to the partial view page.
<p>Use this area to provide additional information. </p> <div> <h3>Essential JS 2 Datepicker component</h3> <ejs-datepicker id="datepicker" placeholder="Choose a Date"></ejs-datepicker> </div> <br /> <div> <h3>Essential JS 2 Timepicker component</h3> <ejs-timepicker id="timepicker" placeholder="Select a time"></ejs-timepicker> </div> <br /> <div> <h3>Essential JS 2 Daterangepicker component</h3> <ejs-daterangepicker id="daterangepicker" placeholder="Choose a Range"></ejs-daterangepicker> </div> <br /> <div> <h3>Essential JS 2 Dropdownlist component</h3> <div> <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="220px"> <e-dropdownlist-fields text="Game" value="Id"></e-dropdownlist-fields> </ejs-dropdownlist> </div></div> |
Add view bag data to the partial view control
namespace PartialView.Controllers { public class HomeController : Controller { public IActionResult PartialPage() { ViewBag.data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" }; return PartialView(); }
} } |
Create a div element for partial page controls
<div class="row"> <div id="PartialView"></div> </div> |
Read partial view controls using Ajax and Append partial view controls in a created element:
<script> function clickAjax() { // Read the partial view controls using Ajax var ajax = new ej.base.Ajax('/PartialPage/index', 'GET', true); ajax.send().then(function (result) { // append partial view controls into created element document.getElementById('id').innerHTML = result; });; } </script> |
Note: Need to Evaluate scripts manually and have to add script manager in partial page also
<script> function clickAjax() { var ajax = new ej.base.Ajax('/home/about', 'GET', true); ajax.send().then(function (result) { document.getElementById('id').innerHTML = result; // Need to evaluate scripts manually eval(document.getElementById('PartialView').querySelector('script').innerHTML); });; } </script> |
Sample:
https://github.com/SyncfusionExamples/ej2-mvc-partialview
The following output is displayed the above behavior
Fig1: Initial button rendering’
Fig2: After the button click – binded component rendered
