ej2 mvc partialview

Renderizando controles de UI do Syncfusion ASP.Net Core na página de visualização parcial do MVC

Este é um aplicativo de demonstração simples para usar os controles de UI do Syncfusion ASP.Net Core na página de visualização parcial.

Solução

Siga as etapas abaixo para renderizar o controle Syncfusion ASP.Net Core UI (Essential JS 2) em uma visualização parcial.

Crie um controle ASP.NET Core usando os conceitos básicos

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

Criou controles de visualização parcial e adicionou o componente Syncfusion à página de visualização parcial

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

Adicionados dados de visualização do saco ao controle de visualização parcial

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

    }
} 

Crie um elemento div para controles parciais de página

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

Leia controles de visualização parcial usando 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 ) ;
        } ) ; ;
    }