Page d'accueil>Code source ASP>Autres catégories
Télécharger

Rendu des contrôles d'interface utilisateur Syncfusion ASP.Net Core dans la page d'affichage partiel MVC

Il s'agit d'une application de démonstration simple permettant d'utiliser les contrôles de l'interface utilisateur Syncfusion Syncfusion ASP.Net Core dans la page d'affichage partiel.

Solution

Suivez les étapes ci-dessous pour afficher le contrôle Syncfusion ASP.Net Core UI (Essential JS 2) dans une vue partielle.

Créer un contrôle ASP.NET Core à l'aide de la mise en route

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

Création d'un contrôle de vue partielle et ajout du composant Syncfusion à la page de vue partielle


Essential JS 2 Timepicker component


Essential JS 2 Daterangepicker component


Essential JS 2 Dropdownlist component

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

Ajout des données du sac de vue au contrôle de vue partielle 

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

    }
}

Créer un élément div pour les contrôles de page partiels

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

Lire les contrôles de vue partielle à l'aide d'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 ) ;
        } ) ; ;
    }
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout