We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render Syncfusion components in partial view

Platform: JavaScript - EJ 2 |
Control: General |
Published Date: October 30, 2018 |
Last Revised Date: October 30, 2018
Tags: asp.net-core

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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile