Introduction à l’API Kendo UI pour ASP .Net MVC (Partie 2)

Kendo ui

Dans cet article, nous allons vous montrer qu’il est très facile de s’approprier les widgets du Framework Kendo UI. En effet, le développement et l’utilisation se veulent très intuitifs.

Pour commencer, vous trouverez ici comment créer une application ASP .NET MVC 4.0 et configurer Kendo UI : http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-4

Lorsque vous utilisez la syntaxe Razor avec C #, les pages web ont une extension de fichier «.cshtml ». A travers l’exemple suivant, nous allons vous montrer un ensemble de widgets Kendo.

Pour tester cet exemple, Il vous suffit alors d’inclure le code suivant dans votre page, de créer les méthodes « Create » et «SearchVilleFromNameAndPays » dans le contrôleur « ContactController.cs » et de rajouter les deux listes « ListeCivilite » et « ListePays » dans le ViewBag.

@using KendoDemo.ViewModel.Models.Contact
@using KendoDemo.Resource
@using KendoDemo.Common.Constantes
@using KendoDemo

@model  ContactVM

<div>
	<h2>@Html.HSpan(m => m.Contact)</h2>
	@using (Html.BeginForm("Create", "Contact", FormMethod.Post, 
				new { Id = "formCreate" }))
	{
	<div>
		@Html.HLabelFor(m => m.CiviliteId)
		@(Html.Kendo().DropDownListFor(m => m.CiviliteId)
					.BindTo(ViewBag.ListeCivilite)
					.HtmlAttributes(new { style = "width: 303px" })
					.Deferred())
	</div>
	<div>
		@Html.HLabelFor(m => m.Prenom)
		@Html.TextBoxFor(m => m.Prenom)
	</div>
	<div>
		@Html.HLabelFor(m => m.Nom)
		@Html.TextBoxFor(m => m.Nom)
	</div>
	<div>
		@Html.HLabelFor(m => m.PaysNationaliteId)
		@(Html.Kendo().DropDownListFor(m => m.PaysNationaliteId)
					.BindTo(ViewBag.ListePays)
					.HtmlAttributes(new { style = "width: 302px" })
					.Deferred())
	</div>
	<div>
		@Html.HLabelFor(m => m.VilleNaissance)
		@(Html.Kendo().AutoCompleteFor(m => m.VilleNaissance)
					.MinLength(3)
					.DataTextField("Nom")
					.Filter(FilterType.Contains)
					.HtmlAttributes(new { style = "width: 302px " })
					.DataSource(s => s.Read(r =>
						r.Action("SearchVilleFromNameAndPays","Contact")
						.Data("dataAutoCompleteVille"))
						.ServerFiltering(true))
					.Deferred())
		<p class="erreur">
			@Html.ValidationMessageFor(m => m.VilleNaissance)
		</p>
	</div>
	<div>
		@Html.HLabelFor(m => m.DateNaissance)
		@(Html.Kendo().DatePickerFor(m => m.DateNaissance).Deferred())
		<p class="erreur">
			@Html.ValidationMessageFor(m => m.DateNaissance)
		</p>
	</div>
	<div>
		@Html.HButton("SAUVEGARDER", new { id = "SubmitContact"})
		@Html.HButton("ANNULER", new { id = "CancelContact" })
	</div>
	}
</div>

@using (Html.Delayed())
{
<script>

	$.extend(true, $("#formCreate").data("kendoValidator").options, {
		messages: {
			ville_not_found: RESSOURCE.MSG_ERROR_VILLE_NOT_FOUND
		},
		rules: {
		 ville_not_found: function (input) {
			var name = input.attr("name");
			if (name == "VilleNaissance" && input.val() != "") {
				var result = false;
				$.ajax({
					type: 'POST',
					url: "@Url.Action("TestVilleExists", "Contact")",
					data: {
						ville: input.val()
					},
					success: function (data) {
						if (data) {
							result = true;
						}
					},
					dataType: "json",
					async: false
				});
				return result;
			}
			return true;
		},
		}
	});

</script>
}
@if (Request.IsAjaxRequest())
{
    @Html.Kendo().DeferredScripts();
    @Html.RenderDelayed();
}

Voici un petit aperçu de ce que ça donne:

capsha

 

La validation Kendo

Lors de la soumission du formulaire, Kendo va s'assurer que toutes les règles que nous avons défini (rules) sont respectées en appelant tout simplement le "kendoValidator()" comme montré dans l'exemple. En effet, le validateur Kendo suit les spécifications de HTML5 autant que possible. Cela signifie que pour faire un champ obligatoire, nous avons simplement besoin d'inclure l'annotation "Required" gérée par la classe RequiredAttribute sur ​​l'entrée que nous voulons vérifier. Le "data-val-required" contient le message personnalisé.

namespace KendoDemo.ViewModel.Models.Contact
{
    public class ContactVm
    {
	[Required(ErrorMessageResourceName = "GENME001", 
	    ErrorMessageResourceType = typeof(Messages))]
        [Display(ResourceType = typeof(Messages), 
	    Name = "CIVILITE_DISPLAY_NAME")]
        public int? CiviliteId { get; set; }

        [Required(ErrorMessageResourceName = "GENME001",
            ErrorMessageResourceType = typeof(Messages))]
        [RegularExpression(@"^[a-zA-  ZÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉ
            ÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ '-]+$",
            ErrorMessageResourceName = "GENME003",
            ErrorMessageResourceType = typeof(Messages))]
        [Display(ResourceType = typeof(Messages),
            Name = "PRENOM_DISPLAY_NAME")]
        public string Prenom { get; set; }

        [Required(ErrorMessageResourceName = "GENME001", 
            ErrorMessageResourceType = typeof(Messages))]
        [RegularExpression(@"^[a-zA-ZÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈ
            ÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ '-]+$", 
            ErrorMessageResourceName = "GENME003", 
            ErrorMessageResourceType = typeof(Messages))]
        [Display(ResourceType = typeof(Messages), 
            Name = "NOM_DISPLAY_NAME")]
        public string Nom { get; set; }

	[Display(ResourceType = typeof(Messages), 
            Name = "PAYS_NAISSANCE_DISPLAY_NAME")]
	public int? PaysNationaliteId { get; set; }

	[Display(ResourceType = typeof(Messages), 
            Name = "VILLE_NAISSANCE_DISPLAY_NAME")]
	public string villeNaissance { get; set; }

	[Display(ResourceType = typeof(Messages), 
            Name = "DATE_NAISSANCE_DISPLAY_NAME")]
        public DateTime? DateNaissance { get; set; }
    }
}

Ainsi, après compilation du code ci-dessus, Kendo génère le code html de la page, suivi par le JQuery suivant:

<form action="/Contact/Edit?idInterlocuteur=0" 
		id="formCreate" 
		method="post"> 
	<div>
		<p><span>Contact</span></p>
		<div>
			<label for="CiviliteId"><span>Civilité</span></label>
			<input data-val="true" data-val-number="The field Civilité 
			must be a number." 
			id="CiviliteId" 
			name="CiviliteId" 
			style="width: 303px" 
			type="text" 
			value="2" />
		</div>
		<div>
			<label for="Nom"><span>Nom</span>
			<span class="required">*</span></label>
			<input data-val="true" data-val-regex="Le champ &quot;Nom 
			&quot; n'est pas au bon format."
			data-val-regex-pattern="^[a-zA-ZÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊ
			ËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ '-]+$" 
			data-val-required="Le champ &quot;Nom &quot; est obligatoire." 
			id="Nom" 
			name="Nom" 
			type="text" 
			value="" />
		</div>
		<div>
			<label for="Prénom"><span>Prénom</span>
			<span class="required">*</span></label>
			<input data-val="true" data-val-regex="Le champ &quot;
			Prénom&quot; n'est pas au bon format." 
			data-val-regex-pattern="^[a-zA-ZÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊ
			ËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ '-]+$" 
			data-val-required="Le champ &quot;Prénom&quot; est obligatoire." 
			id="Prenom" 
			name="Prenom" 
			type="text" 
			value="" />
		</div>
		<div>
			<label for="PaysNationaliteId">
			<span>Pays de naissance</span>
			</label>
			<input data-val="true" 
			data-val-number="The field Pays de naissance must be a number." 
			id="PaysNationaliteId" 
			name="PaysNationaliteId" 
			style="width: 302px" 
			type="text" 
			value="1" />
		</div>
		<div>
			<label for="VilleNaissanceNom">
			<span>Ville de naissance</span></label>
			<input id="VilleNaissanceNom" name="VilleNaissanceNom"  
			type="text" value="PARIS 16EME ARRONDISSEMENT (75016)" />
			<p class="erreur"><span class="field-validation-valid" 
			data-valmsg-for="VilleNaissanceNom" 
			data-valmsg-replace="true">
			</span></p>
		</div>				
		<div>
			<label for="DateNaissance">
			<span>Date de naissance</span></label>
			<input data-val="true" 
			data-val-date="The field Date de naissance must be a date." 
			id="DateNaissance" 
			name="DateNaissance" 
			type="date" 
			value="" />
			<p class="erreur"><span class="field-validation-valid" 
			data-valmsg-for="DateNaissance" 
			data-valmsg-replace="true">
			</span></p>
		</div>         
		<div>
	<div>
<div>
</form>

Et comme nous l'avons expliqué dans la partie 1, la génération des scripts JQuery correspondants aux widgets Kendo a été reportée à la fin, après avoir générée tout le code html de la page.

<script>
        jQuery(function(){
            jQuery("#CiviliteId").kendoDropDownList
			({"dataSource":[{"Text":"Mme","Value":"2"}
            ,{"Text":"Mlle","Value":"3"},{"Text":"M.","Value":"1"}]
            ,"dataTextField":"Text","dataValueField":"Value"});
        });
        jQuery(function(){
            jQuery("#PaysNationaliteId").kendoDropDownList
			({"dataSource":[{"Text":"France","Value":"1"}
                ,{"Text":"Etranger","Value":"2"}];});
        });
        jQuery(function(){
            jQuery("#DateNaissance").kendoDatePicker
			({"format":"dd/MM/yyyy"
			,"min":new Date(1900,0,1,0,0,0,0)
                ,"max":new Date(2099,11,31,0,0,0,0)});
        });
        jQuery(function(){
            jQuery("#VilleNaissanceNom").kendoAutoComplete
			({"dataSource":{"transport":
                {"prefix":""
                ,"read":{"url":"/Referentiel/SearchVilleFromNameAndPays"
                ,"data":dataAutoCompleteVille}},
                "serverFiltering":true,
				"filter":[],
				"schema":{"errors":"Errors"}}
                ,"dataTextField":"Nom",
				"filter":"contains",
				"minLength":2});
        });
</script>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.