ej2 mvc partialview

Отображение элементов управления пользовательского интерфейса Syncfusion ASP.Net Core на странице частичного просмотра MVC

Это простое демонстрационное приложение для использования элементов управления пользовательского интерфейса syncfusion Syncfusion ASP.Net Core на странице частичного просмотра.

Решение

Выполните следующие шаги, чтобы отобразить элемент управления Syncfusion ASP.Net Core UI (Essential JS 2) в частичном представлении.

Создайте элемент управления ASP.NET Core, используя начало работы.

https://ej2.syncfusion.com/aspnetcore/documentation/button/getting-started.html

Созданы элементы управления частичным представлением и добавлен компонент Syncfusion на страницу частичного представления.

 < 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 > 

Добавлены данные пакета просмотра в элемент управления частичным представлением.

 namespace PartialView . Controllers
{
    public class HomeController : Controller
    {
        public IActionResult PartialPage ( )
        {
            ViewBag . data = new string [ ] { "Badminton" , "Basketball" , "Cricket" , "Football" , "Golf" , "Gymnastics" , "Hockey" , "Tennis" } ;
            return PartialView ( ) ;
        }

    }
} 

Создайте элемент div для частичных элементов управления страницей.

 < div class =" row " >
    < div id =" PartialView " > </ div >
    </ div > 

Чтение элементов управления частичным представлением с помощью Ajax:

 function clickAjax ( ) {
        var ajax = new ej . base . Ajax ( '/PartialPage/index' , 'GET' , true ) ;
        ajax . send ( ) . then ( function ( result ) {
              var fragment = document . createElement ( 'div' ) ;
              fragment . innerHTML = result ;
              ej . base . append ( fragment . children , document . getElementById ( 'PartialView' ) , true ) ;
        } ) ; ;
    }