ej2 mvc partialview

Representación de controles de UI de Syncfusion ASP.Net Core en la página de vista parcial de MVC

Esta es una aplicación de demostración sencilla para utilizar los controles de interfaz de usuario de Syncfusion ASP.Net Core en la página de vista parcial.

Solución

Siga los pasos a continuación para representar el control Syncfusion ASP.Net Core UI (Essential JS 2) en una vista parcial.

Cree el control ASP.NET Core mediante la introducción

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

Creó controles de vista parcial y agregó el componente Syncfusion a la página de vista 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 > 

Se agregaron datos de la bolsa de visualización al control de vista 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 ( ) ;
        }

    }
} 

Crear un elemento div para controles de página parciales

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

Leer controles de vista 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 ) ;
        } ) ; ;
    }