Série Comment Faire sur MVC, jQuery, JSON, Pagination et mapRoute
Télécharger le Code Source
Introduction
En raison de la grande quantité de données dans les systèmes de base de données, le travail côté client est devenu très important. Dans l'approche code-behind avec ASP.NET classique, la méthode naturelle est de coder la plupart du travail dans les fichiers code-behind en utilisant les composants ASP.NET. De plus, le rendu des composants ASP.NET et le mécanisme viewstate sont maintenant considérés comme des capacités faibles de l'ASP.NET classique.
C'est pourquoi un nouveau paradigme a émergé. Selon ce nouveau paradigme, le développeur peut travailler avec du HTML et JavaScript purs sans viewstate qui dégrade les performances et avec moins de rendu.
Bien que MVC soit connu comme un ancien modèle de conception ou d'architecture, il est devenu populaire surtout après les goulots d'étranglement de l'ASP.NET classique mentionnés ci-dessus. Des applications haute performance peuvent être développées en MVC où jQuery et JSON sont utilisés efficacement.
Prérequis
Cet article peut être utile après avoir lu quelques articles de niveau débutant sur MVC, jQuery et JSON. Les liens suivants peuvent être utiles pour les débutants :
Utilisation du Code
Une "série comment faire" est visée dans cet article. Par conséquent, tous les scripts sont donnés à partir du code source joint. En fait, chaque "comment faire" pourrait être un article séparé. Quoi qu'il en soit, toutes les réponses possibles sont rassemblées dans un seul exemple. Dans cet article, il y a plus d'approches pratiques que d'informations théoriques. Par exemple, certaines listes statiques sont utilisées au lieu d'une base de données pour la simplicité.
Les questions suivantes sont répondues :
- Comment faire du CRUD avec de bonnes performances en MVC ?
- Comment utiliser jQuery dialog au lieu de JavaScript confirm ou alert ?
- Comment faire la pagination dans une liste MVC ?
- Comment faire un lien "voir plus" en MVC avec jQuery ?
- Comment utiliser un attribut avec un lien ?
- Comment faire un appel AJAX en jQuery ?
- Comment utiliser la collection Form en MVC ?
- Comment supprimer plusieurs enregistrements en une fois ?
- Comment utiliser une action partielle en MVC ?
- Comment utiliser le format JSON dans une application MVC ?
- Comment remplir une combobox master-detail ?
- Comment utiliser jQuery datepicker ?
- Comment télécharger une image en MVC avec jQuery dialog ?
- Comment créer une ligne de tableau côté client ?
- Comment personnaliser mapRoute dans Global.asax ?
- Comment checkALL et uncheckALL toutes les lignes d'un tableau ?
- Comment faire "Loading Data" ?
- Comment faire des grilles master-detail avec jQuery ?
1) Comment faire du CRUD avec de bonnes performances en MVC ?
En gros, toutes les solutions métier ont la fonctionnalité Create-Read-Update-Delete (Créer-Lire-Mettre à jour-Supprimer). Si possible, utiliser le même "formulaire de sauvegarde" pour "insert" et "update" peut être rentable du point de vue du développeur. Utiliser le même formulaire est possible en gérant les paramètres envoyés à l'action.
Supposons que vous ayez une liste de type grille (en fait un tableau HTML) dans un formulaire et un bouton "new" séparé. Chaque ligne du tableau a un bouton "edit" et "delete" lié à cette ligne.
Après avoir cliqué sur "New", rediriger vers une nouvelle page - ici appelée view - n'est pas un moyen efficace. Parce qu'après avoir sauvegardé les données dans la page redirigée, l'utilisateur doit cliquer sur "afficher la liste" pour voir les données ajoutées à la base de données. Cela signifie rediriger vers la vue liste et sélectionner des données de la base de données avec le coût de sélection de variables !
Au lieu du scénario "cliquer sur new et lister à nouveau" exprimé ci-dessus, une meilleure méthode peut être appliquée.
Create (Créer) :
- Dans la vue liste, après avoir cliqué sur "New", un "jQuery Save dialog" peut apparaître.
- La vue Create est rendue dans le jQuery dialog.
- Le formulaire Create est rempli et "Save" est pressé.
- Au moment où le bouton Save est pressé, les données peuvent être envoyées au controller correspondant avec un post AJAX.
- Le formulaire Ajax a une fonction JavaScript
onSuccess. - Dans la méthode JavaScript "
onSuccess", la nouvelle ligne ajoutée est ajoutée au début de la liste (prepend) avec le JSON venant en paramètre à "onSuccess", sans rafraîchir toute la liste.
Read (Lire) :
C'est une opération de listage. Si possible, seules les données nécessaires doivent être affichées dans le formulaire de liste. Les techniques suivantes peuvent être utilisées :
- pagination avec combobox ou nombres,
- implémentation "voir plus",
- listage avec filtrage.
Update (Mettre à jour) :
- Dans la vue liste, après avoir cliqué sur "Edit" sur n'importe quelle ligne de la liste, le même "jQuery Save dialog" peut apparaître avec les données de la ligne sélectionnée.
- Comme toutes les étapes sont les mêmes que "Create", seule la méthode "
onSuccess" est modifiée selon l'opération "update". - Dans ce cas, après la mise à jour de la base de données, seules les données de la ligne éditée sont mises à jour dans la vue. De cette façon, il n'est pas nécessaire de rafraîchir toute la liste pour voir le dernier enregistrement édité.
Delete (Supprimer) :
- Après confirmation avec un jQuery dialog à belle apparence, après la suppression en base de données, seule la ligne sélectionnée est retirée de la liste. Encore une fois, il n'est pas nécessaire de rafraîchir toute la liste.
Le même dialog est utilisé pour insert et edit.
Les liens dans la vue PersonList.cshtml sont comme suit :
HTML
@Html.ActionLink("New", "Save",
new { personNo = 0 }, new { @class = "newLink" })
...
@Html.ActionLink("Edit", "Save", new { personNo = item.PersonNo }, new { @class = "editLink" })
- New : Texte à afficher.
- Save : Action dans le controller.
- personNo : Paramètre envoyé à l'action "Save". S'il est 0, le dialog s'ouvre vide, s'il est supérieur à 0, les données de cet id sont affichées dans le dialog.
- newLink : className fictif à utiliser dans le jQuery ci-dessous.
JavaScript
<div id="saveDialog" title="Person Information"></div>
<script type="text/javascript">
var linkObj;
//.....
$(document).ready(function () {
//...
$('#saveDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#savePersonForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//....
setLinks();
});
// ....
function setLinks()
{
$(".editLink, .newLink, uploadPicLink").unbind('click');
$(".editLink, .newLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#saveDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data)
{
dialogDiv.html(data);
//validation
var $form = $("#savePersonForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//...
} //end setLinks
</script>
L'action Save dans
PersonController est comme suit :C#
// ...
[HttpGet]
public ActionResult Save(int personNo)
{
Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
// ...
[HttpPost]
public JsonResult Save(Person p)
{
//...
}
// ...
2) Comment utiliser jQuery dialog au lieu de JavaScript confirm ou alert ?
Une boîte de message personnalisée est possible dans les applications Windows. Pour le web, c'est possible en utilisant une bibliothèque de composants tiers. Il est aussi possible d'utiliser jQuery dialog au lieu des boîtes JavaScript comme ci-dessous :
Le lien Delete dans la vue
PersonList est comme suit :HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo =
item.PersonNo }, new { @class = "deleteLink", @pkNo = item.PersonNo })
Le code HTML et jQuery est comme suit :
JavaScript
<div id="confirmDialog" title="Warning"></div>
<script type="text/javascript">
//..
$(".deleteLink").live("click", function (e) {
e.preventDefault();
// ..
$("#confirmDialog").html('<br/><br/>sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
// ..
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
//...
</script>
3) Comment faire la pagination dans une liste MVC ?
La pagination est l'une des bonnes approches pour lister les données et minimiser le coût de transfert de données. De nombreuses façons d'afficher les données peuvent être appliquées. Dans ce "comment faire", une combobox est utilisée pour la pagination. Cependant, la numérotation en bas de page est aussi possible si souhaité. Cela dépend de l'application et du développeur. La pagination avec combobox peut être développée comme suit.
D'abord, l'espace pour les métadonnées de pagination est organisé comme suit :
HTML
@model AddressBook_mvc3_jQuery.Models.Paginginfo
...
<div id="paginginfo">
<hr />
<select id="PageSelect"></select>
<span class="pagingPersonNo" style="visibility:hidden">@Model.id</span>
<span class="pagingTotalCount" style="visibility:hidden">@Model.TotalCount</span>
<span class="pagingPageSize" style="visibility:hidden">@Model.PageSize</span>
<span class="pagingSummary">aaa</span>
<hr/>
</div>
<div id="content"></div>
...
Quand la page est chargée pour la première fois, le div avec l'id "
paginginfo" est rempli et la première page des enregistrements est affichée en utilisant les scripts suivants.JavaScript
<script type="text/javascript">
//..
function initializePaging()
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
var TotalCount = $("#paginginfo .pagingTotalCount").text();
var PageSize = $("#paginginfo .pagingPageSize").text();
var PageSelect = $("#PageSelect");
if (TotalCount==0)
{
PageSelect.html("");
$("#paginginfo").hide();
}
else
{
PageSelect.html("");
var num = Math.ceil(TotalCount/PageSize);
for (var i = 1; i <= num; i++)
{
if (i==1)
PageSelect.append($("<option selected></option>").val(i).text(i));
else
PageSelect.append($("<option></option>").val(i).text(i));
}
}
fillData(PersonNo, 1);
}
//..
function fillData(parPersonNo, parPageNo)
{
if (parPageNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetAddressList", "Address")",
data: { personNo: parPersonNo, pageNo: parPageNo },
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#content").html(data.Html);
buttonizeALL();
setLinkAbilites();
setPagingSummary(parPageNo);
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if (parPageNo)
}//fillData
//...
</script>
Le code de l'action dans le controller est comme suit. Comme on peut le voir, la liste de résultats est partiellement rendue en utilisant la méthode
RenderPartialView et mise dans un objet JSON.C#
public class AddressController : Controller
{
//..
public JsonResult GetAddressList(int personNo, int pageNo)
{
int pageSize = 5; //it could be parameter
int skipCnt = ((pageNo - 1) * pageSize);
List<Address> list = (from x in Repository.GetAddressList() where x.PersonNo ==
personNo orderby x.AddressNo descending select x).Skip(skipCnt).Take(pageSize).ToList();
JsonResult jr = Json(new
{
Html = this.RenderPartialView("AddressList", list),
Message = "OK"
}, JsonRequestBehavior.AllowGet);
return jr;
}
//..
}
Quand le
selecteditem de la combo avec l'id "PageSelect" change, le script jQuery suivant s'exécute.JavaScript
//..
$("#PageSelect").change(function ()
{
var $this = $(this);
var parPageNo = $this.val();
var parPersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(parPersonNo,parPageNo);
});//PageSelect
//..
4) Comment faire un lien "voir plus" en MVC avec jQuery ?
Cette technique est utilisée dans de nombreux sites web populaires. Elle doit être appliquée dans les grandes listes. "Voir plus" peut être réalisé comme suit :
Dans la vue liste, il y a un lien pour "more".
HTML
//
<table id="NoteTable"></table>
<br />
<a href="#" style="display:none" id="more">more</a>
<div id="saveDialog" title="Notes Information"></div>
<div id="confirmDialog" title="Warning"></div>
//
Quand "more" est cliqué, le script jQuery suivant s'exécute.
JavaScript
//..
//load more results
$(function ()
{
$("#more").click(function (e)
{
e.preventDefault();
var lastNoteNo = $("#NoteTable tr:last .noteNo").text();
if (lastNoteNo)
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(PersonNo, lastNoteNo);
}
//--- scroll to bottom of page ---
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, "slow");
//--- /scroll to bottom of page ---
return false;
});
});
//..
function fillData(parPersonNo, parLastNoteNo)
{
if (parPersonNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetNoteList", "Note")",
data: { personNo: parPersonNo, lastNoteNo: parLastNoteNo} ,
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#NoteTable").append(data.Html);
buttonizeALL();
setLinkAbilites();
if (data.HasMore)
$("#more").show();
else
$("#more").hide();
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if
}//func
// ..
L'action suivante dans le controller retourne le résultat JSON.
C#
public class NoteController : Controller
{
//...
public JsonResult GetNoteList(int personNo, int lastNoteNo)
{
int pageSize = 5; //it could be parameter
bool hasMore = false;
List<Note> list = null;
if (lastNoteNo == 0)
{
list = (from x in Repository.GetNoteList() where x.PersonNo == personNo
orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.PersonNo ==
personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
else
{
list = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
JsonResult jr = Json(new
{
Html = this.RenderPartialView("_NoteList", list),
Message = "OK",
HasMore = hasMore
}, JsonRequestBehavior.AllowGet);
return jr;
}
// ...
}
5) Comment utiliser un attribut avec un lien ?
C'est une bonne capacité à utiliser particulièrement pour les boutons comme edit, delete, show detail.
Lors de la création de la liste, la clé correspondante est ajoutée comme attribut au lien. Dans l'événement click du lien, cette clé est utilisée et l'opération est faite facilement.
Par exemple, supposons qu'il y ait un lien delete sur chaque ligne d'une liste. Quand on clique sur le lien delete de la ligne, il est possible d'utiliser la clé comme paramètre pour l'"action delete" dans le controller.
HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo = item.PersonNo },
new { @class = "deleteLink", @pkNo = item.PersonNo })
Quand la source est vérifiée côté client, la ligne suivante est vue.
HTML
<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
href="/Person/DeletePerson/1" pkno="1"><span class="ui-button-text">Delete</span></a>
Dans le script jQuery, les attributs sont utilisés comme suit. Par exemple pkno est 1 et est utilisé.
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
});
6) Comment faire un appel AJAX en jQuery ?
L'appel AJAX est une très bonne capacité pour rendre une application plus rapide. Dans certaines applications avec une grande quantité de données dans la base de données, le développeur doit faire attention à transférer peu de données sur deux lignes de données. La première ligne est entre la base de données et l'application, la seconde est entre l'application et le navigateur client. Pour ce type d'exigences, l'appel AJAX est très utile.
JavaScript
//..
$.ajax({
type: "POST",
url: "/Person/DeletePerson",
data: { personNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
//..
},
error: function (jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
L'URL peut aussi être utilisée comme suit.
JavaScript
//..
url: "@Url.Action("DeletePerson", "Person")",
// ..
7) Comment utiliser la collection Form en MVC ?
Quand un formulaire est posté, tous les éléments du formulaire sont envoyés comme collection à l'action correspondante dans le controller. Dans le controller, chaque paire clé-valeur peut être utilisée. Supposons que vous ayez un formulaire de sauvegarde comme suit :
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Les données dans la vue peuvent être envoyées à l'action dans le controller comme objet model ou comme FormCollection comme montré ci-dessous :
C#
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
//..
8) Comment supprimer plusieurs enregistrements en une fois ?
Sur certaines pages, supprimer plusieurs enregistrements en une fois facilite parfois le travail. Supprimer plusieurs enregistrements est possible en rassemblant les clés de tous les enregistrements sélectionnés. Après avoir envoyé toutes les clés au controller, la suppression peut être réalisée comme suit.
D'abord, on clique sur le bouton "Delete Selected" avec l'id "deleteALL". Après avoir appuyé sur Yes, le script jQuery suivant peut être utilisé. Bien sûr, des scripts alternatifs peuvent aussi être développés.
JavaScript
//..
$("#deleteALL").live("click", function (e)
{
e.preventDefault();
var len = $("#NoteTable tr").length;
$("#confirmDialog").html('<br/><br/>deleting all selecteds.. sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons:
{
"Yes": function ()
{
$(this).dialog("close");
var strSelecteds = '';
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
var checked=(cb.is(':checked'));
var pkno = cb.attr("pkno");
if (checked)
{
strSelecteds = strSelecteds + pkno + ',';
}
}//
if (strSelecteds.length>0)
{
strSelecteds = strSelecteds.substring(0,strSelecteds.length-1);
}
if (strSelecteds.length>0)
{
$.ajax({
type: "POST",
url: "/Note/DeleteALL",
data: { noteNOs: strSelecteds },
cache: false,
dataType: "json",
success: function (data)
{
var strSelectedsArr = strSelecteds.split(',');
for (var i = 0; i < strSelectedsArr.length; i++)
{
var rowNo = '#row-' + strSelectedsArr[i];
$(rowNo).remove();
//alert(strSelectedsArr[i]);
}//for
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}
else
alert('No row selected');
}, // end of yes button
"No": function ()
{
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end deleteALL
//...
Comme vu ci-dessus, la suppression de plusieurs enregistrements est faite avec un appel ajax à l'action "DeleteALL" dans le controller "Note".
9) Comment utiliser une Action Partielle en MVC ?
Dans certains cas, un composant qui doit être utilisé dans plusieurs formulaires est nécessaire. Par exemple, une "boîte d'information personne" peut être nécessaire dans certains formulaires séparés comme montré ci-dessous.
La vue _personinfo peut être comme suit.
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "_personinfo"; }
<fieldset>
<legend>Person info</legend>
<table>
<tr><td><b><span> @Model.FirstName @Model.LastName </span></b>(@String.Format("{0:dd.MM.yyyy}",
Model.BirthDate))</td><td>(@Model.CategoryName)</td></tr>
</table>
</fieldset>
Pour utiliser une action partielle dans n'importe quelle vue, la ligne de code suivante peut être utilisée.
HTML
//..
<h2>Address List</h2>
<div>
@Html.Action("_personinfo", "Common")
</div>
//..
10) Comment utiliser le format JSON dans une application MVC ?
Le format JSON peut être utilisé lors de l'envoi de paramètres à une action dans le controller et lors de la réception de résultats d'une action. Comme montré ci-dessous, l'action DeleteNote dans le controller Note a le paramètre noteNo. Ici pkNo est un paramètre appelé avec une valeur.
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
$.ajax({
type: "POST",
url: "/Note/DeleteNote",
data: { noteNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
$(rowNo).remove();
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
}); //end delete
Il est possible de recevoir un résultat JSON de l'action dans le controller. Le script suivant retourne le résultat comme objet json.
C#
//..
[HttpPost]
public JsonResult DeleteNote(int noteNo)
{
string message = string.Empty;
try
{
Note n = Data.Repository.GetNoteList().Where(c => c.NoteNo == noteNo).FirstOrDefault();
if (n != null)
{
Data.Repository.GetNoteList().Remove(n);
message = "Deleted";
}
else
{
message = "Note not found!";
}
}
catch (Exception ex)
{
message = ex.Message;
}
return Json(new { Message = message }, JsonRequestBehavior.AllowGet);
}
//..
11) Comment remplir une combobox master-detail ?
Certains formulaires nécessitent de remplir une combobox quand une autre change. Par exemple, pour une paire pays-ville, le pays peut être considéré comme master et la ville comme detail.
Le html dans la vue du "formulaire de sauvegarde" est comme suit.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Au premier chargement, la combobox idCBCountry est remplie en utilisant l'action "GetCountryList" dans le controller Address. Ensuite, quand la combobox pays change, la combobox ville est remplie comme suit.
JavaScript
<script type="text/javascript">
$(document).ready(function () {
//...
//-----------------------------------------------------
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Address")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcountry = $("#idCBcountry");
idCBcountry.html("");
if (@Model.AddressNo>0)
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CountryNo == @Model.CountryNo)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}
else
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (i==0)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}//else
},
error: function(exp)
{
alert('ErrorCountry : ' + exp.responseText);
}
});
//-----------------------------------------------------
$("#idCBcountry").change(function () {
var $this = $(this);
var CountryNo = $this.val();
if (CountryNo)
{
fillCity(CountryNo);
}//if
});
//-----------------------------------------------------
});//end of function
function fillCity(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Address")",
data: {CountryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcity = $("#idCBcity");
idCBcity.html("");
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CityNo == @Model.CityNo)
{
idCBcity.append($("<option selected></option>").val(item.CityNo).text(item.CityName));
}
else
{
idCBcity.append($("<option />").val(item.CityNo).text(item.CityName));
}
}
},
error: function(exp)
{
alert('ErrorCity : ' + exp.responseText);
}
});
}//fillCity
</script>
Les codes des actions sont comme suit. Les listes sont intégrées dans l'objet json. Ensuite, dans le script jQuery montré ci-dessus, les éléments de la liste sont utilisés avec un index.
C#
public class AddressController : Controller
{
//..
public JsonResult GetCountryList()
{
object obj = null;
List<Country> list = Repository.GetCountryList();
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCityList(int CountryNo)
{
object obj = null;
List<City> list = Repository.GetCityList().Where(c => c.CountryNo == CountryNo).ToList(); ;
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
//..
}
Cette technique peut être utilisée pour n'importe quel élément html dans le formulaire de vue.
12) Comment utiliser jQuery datepicker ?
Le type date est utilisé dans presque toutes les applications métier. En raison des différences de cultures, utiliser ce type signifie parfois un problème pour le développeur. Cependant, jQuery datepicker facilite l'utilisation du type date.
Pour afficher la date dans le format désiré dans la liste, la ligne suivante peut être utilisée.
HTML
<span class="BirthDate"> @String.Format("{0:dd.MM.yyyy}", item.BirthDate) </span>
Dans le formulaire de sauvegarde, le script html suivant est utilisé.
HTML
...
<div class="editor-label">
@Html.LabelFor(model => model.BirthDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.BirthDate,
new { @class = "BirthDateSave",
@id = "TBBirthDate",
@Value = Model.BirthDate.ToString("dd.MM.yyyy")
})
</div>
...
jQuery Datepicker peut fonctionner avec @Html.TextboxFor avec le script suivant sur la même page.
JavaScript
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".BirthDateSave").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd.mm.yy',
showOn: 'both'
});
});
</script>
Les lignes suivantes doivent être incluses au début du .cshtml approprié.
HTML
..
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
..
13) Comment télécharger une image en MVC avec jQuery dialog ?
Une image peut être téléchargée facilement dans une vue séparée. Cependant, rediriger vers une vue séparée juste pour télécharger une image puis rediriger vers la vue liste peut être inefficace en termes de coût. Au lieu de cela, dans la vue liste, en cliquant sur le lien de téléchargement sur chaque ligne, un jQuery dialog peut être ouvert, une image peut être parcourue et téléchargée.
Quand "Upload Pic" est cliqué, le script suivant s'exécute.
JavaScript
//..
$(".uploadPicLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#savePicDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#savePersonPicForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//..
Le formulaire SavePersonPic chargé dans le jQuery dialog est comme suit. Un iframe est utilisé pour le téléchargement de fichier dans le jQuery dialog.
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ViewBag.Title = "Save image";}
@using (Html.BeginForm("SavePersonPic", "Person", FormMethod.Post,
new
{
enctype = "multipart/form-data",
id = "savePersonPicForm",
name = "savePersonPicForm",
target = "UploadTarget"
}))
{
@Html.ValidationSummary(true)
<div id="update-message" class="error invisible"></div>
<fieldset>
<legend>Person Picture</legend>
<div class="editor-label">
<label for="file">Upload Image:</label>
</div>
<div class="editor-field">
<input type="file" name="file" id="file"/>
</div>
</fieldset>
}
<iframe id="UploadTarget"
name="UploadTarget" onload="UploadImage_Complete();"
style="position: absolute; left: -999em; top: -999em;">
</iframe>
L'action de téléchargement de fichier dans le controller est ci-dessous :
C#
public class PersonController : Controller
{
//..
//-------------- image -----
[HttpGet]
public ActionResult SavePersonPic(int personNo)
{
Person person = new Person();
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
[HttpPost]
public JsonResult SavePersonPic(HttpPostedFileBase file, int personNo)
{
string message = string.Empty;
bool success = false;
string imgPath = "";
string fileName = "";
try
{
string path = System.IO.Path.Combine(Server.MapPath("~/Content/images"),
System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
Person p = Data.Repository.GetPersonList().Where(r => r.PersonNo == personNo).FirstOrDefault();
p.imgFileName = file.FileName;
ViewBag.Message = "File uploaded successfully";
message = ViewBag.Message;
fileName = file.FileName;
imgPath = Url.Content(String.Format("~/Content/images/{0}", fileName));
success = true;
}
catch (Exception ex)
{
message = ex.Message;
success = true;
imgPath = "";
fileName = "";
}
return Json(
new { Success = success,
Message = message,
PersonNo=personNo,
ImagePath = imgPath,
FileName = fileName
},
JsonRequestBehavior.AllowGet
);
}
//------------- /image --------
// ..
}
La fonction JavaScript "onload" de l'iframe est ci-dessous. L'image téléchargée est affichée sur la ligne correspondante de la liste sans rafraîchir la ligne.
JavaScript
//..
function UploadImage_Complete()
{
//Check first load of the iFrame
if (isFirstLoad == true)
{
isFirstLoad = false;
return;
}
try
{
//Reset the image form
document.getElementById("savePersonPicForm").reset();
var jsonTxt = ($('#UploadTarget').contents()).text();
var jsonObj = JSON.parse(jsonTxt);
var rowid = '#row-' + jsonObj.PersonNo;
var row = $('#personTable ' + rowid);
var imgid = "#img-" + jsonObj.PersonNo;
var img = row.find(imgid);
$(img).attr("src", jsonObj.ImagePath);
$('#Message').html(jsonObj.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300)
$('#savePicDialog').dialog('close');
}
catch (err)
{
alert(err.get_Message());
}
}
//..
14) Comment créer une ligne de tableau côté client ?
Un enregistrement ajouté à la base de données doit être affiché dans la liste côté client. Cela peut être fait de plusieurs façons. Après l'ajout d'un enregistrement, la liste peut être complètement rafraîchie depuis la base de données mais c'est une opération lourde. Cependant, en utilisant javascript ou jquery, une nouvelle ligne peut être ajoutée à la vue sans rafraîchir tous les éléments de la vue. Ici deux méthodes sont mentionnées.
La première, ci-dessous la ligne et les cellules de la ligne sont créées une par une avec javascript. Comme vu dans les scripts ci-dessous, la fonction JavaScript saveSuccess après le submit de ce formulaire est utilisée pour un tel scénario.
HTML
..
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "Save Person"; }
..
@using (Ajax.BeginForm("Save", "Person", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "savePersonForm" }))
{
@Html.ValidationSummary(true)
..
}
..
La méthode javascript saveSuccess est comme suit. L'action retourne un résultat json contenant le type d'opération. Selon l'opération, c'est-à-dire INSERT ou UPDATE, le tableau dans la vue est modifié. Quand un nouvel enregistrement est ajouté à la base de données, une nouvelle ligne est ajoutée (prepend) au tableau. Quand un enregistrement existant dans la base de données est mis à jour, seule la ligne correspondante dans le tableau est modifiée.
JavaScript
function saveSuccess(data)
{
if (data.Success == true)
{
if (data.operationType == 'UPDATE')
{
//we update the table's row info
var parent = linkObj.closest("tr");
$(parent).animate({ opacity: 0.3 }, 200, function ()
{;});
parent.find(".FirstName").html(data.Object.FirstName);
parent.find(".LastName").html(data.Object.LastName);
parent.find(".CategoryName").html(data.Object.CategoryName);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
parent.find(".BirthDate").html(dateStr);
$(parent).animate({ opacity: 1.0 }, 200, function () {
;
});
}
else
{ //INSERT
//we add the new row to table
//we do not refresh all records on screen
try
{
var personTable = document.getElementById("personTable");
var row = personTable.insertRow(1); //row 0 is header
row.setAttribute("id", 'row-' + data.Object.PersonNo.toString());
var buttonsLinks =
'<a role="button" class="editLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover ui-state-focus" href="/Person/Save/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Edit</span></a> ' +
'<a role="button" class="adressLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Address/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Addresses</span></a> ' +
'<a role="button" class="noteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Note/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Notes</span></a> ' +
'<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Person/Delete/' + data.Object.PersonNo.toString() + '" pkno="' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Delete</span></a>';
var cellButtons = row.insertCell(0);
cellButtons.innerHTML = buttonsLinks;
var cellPersonNo = row.insertCell(1);
cellPersonNo.innerHTML = "<span class=\"PersonNo\">" + data.Object.PersonNo + "</span>";
var cellCategoryName = row.insertCell(2);
cellCategoryName.innerHTML = "<span class=\"CategoryName\">" + data.Object.CategoryName + "</span>";
var cellFN = row.insertCell(3);
cellFN.innerHTML = "<span class=\"FirstName\">" + data.Object.FirstName + "</span>";
var cellLN= row.insertCell(4);
cellLN.innerHTML = "<span class=\"LastName\">" + data.Object.LastName + "</span>";
var cellBirthDate = row.insertCell(5);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
cellBirthDate.innerHTML = "<span class=\"BirthDate\">" + dateStr + "</span>";
var cellimgFileName = row.insertCell(6);
cellimgFileName.innerHTML =
"<img id=\"img-" + data.Object.PersonNo.toString() + "\" alt=\"" + data.Object.ImgFileName + "\" src=\"/content/images/" + "noimg.jpg" + "\" height=\"35px\" width=\"50px\"><br><a class=\"uploadPicLink\" href=\"/Person/SavePersonPic/" + data.Object.PersonNo.toString() + "\" pkno=\"" + data.Object.PersonNo.toString() + "\" style=\"font-size:9px;\">Upload Pic</a>";
setLinks();
}
catch (err) {
alert(err.Message);
}
}
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
}
else {
$("#update-message").html(data.ErrorMessage);
$("#update-message").show();
}
}
La première méthode mentionnée ci-dessus peut sembler une approche ancienne. Par conséquent, la deuxième méthode suivante peut être plus applicable. Dans cette méthode, le html rendu est utilisé pour ajouter ou mettre à jour une ligne dans le tableau. Supposons que vous ayez un tableau comme suit.
HTML
@model IEnumerable<AddressBook_mvc3_jQuery.Models.Address>
<table id="AddressTable">
<tr>
<th></th>
<th>
#
</th>
<th>
AddressType
</th>
<th>
City/Country
</th>
<th>
Address Text
</th>
</tr>
@foreach (var item in Model)
{
<tr id="row-@item.AddressNo">
<td>
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
@Html.ActionLink("Delete", "DeleteAddress",
new { addressNo = item.AddressNo }, new { @class = "deleteLink", @pkNo = item.AddressNo })
</td>
<td>
<span class="AddressNo">@item.AddressNo</span>
</td>
<td>
<span class="AddressTypeName">@item.AddressTypeName</span>
</td>
<td>
<span class="CityName">@item.CityName/@item.CountryName</span>
</td>
<td>
<span class="AddressText">@item.AddressText</span>
</td>
</tr>
}
</table>
Quand "new" est cliqué, le script suivant est chargé dans le jQuery dialog.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text"
name="TBPersonNo" id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text"
name="TBAddressNo" id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Quand le formulaire est soumis, l'action suivante dans le controller s'exécute.
C#
public class AddressController : Controller
{
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
// ..
}
La méthode RenderPartialView est utilisée pour obtenir le script html désiré.
C#
//..
public static string RenderPartialView(this Controller controller, string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext,
viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
//..
La fonction saveSuccess du post ajax dans le formulaire saveAddress est comme suit :
JavaScript
<script type="text/javascript">
//...
function saveSuccess(data)
{
if (data.Success == true)
{
$("#paginginfo").show();
if (data.operationType == 'UPDATE')
{
var row = linkObj.closest("tr");
// the following line can also be used to get related row
//$('#AddressTable #row-' + data.Object.AddressNo);
row.replaceWith(data.Html);
//..
}
else
{ //INSERT
try
{
$("#AddressTable tr:first").after(data.Html);
//..
}
catch (err)
{
alert(err.Message);
}
}
//..
}
else
{
//..
}
}
//..
</script>
N'importe laquelle des deux techniques décrites ci-dessus peut être utilisée.
15) Comment personnaliser mapRoute dans Global.asax ?
Dans une application asp.net classique, les opérations urlRewrite étaient facilement réalisées avec certains assemblies tiers. Dans une application MVC, il est possible de personnaliser les mapRoute en utilisant Global.asax.
Le mapRoute suivant est celui par défaut dans Global.asax :
C#
public class MvcApplication : System.Web.HttpApplication
{
//..
public static void RegisterRoutes(RouteCollection routes)
{
// all new customized maproute rules can be put here
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
// ..
}
Selon le script suivant,
**/Save/{addressNo}/{personNo}** est utilisé comme lien.HTML
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
La capture d'écran du lien ci-dessus est ci-dessous.
Par conséquent, il est possible d'ajouter une règle mapRoute personnalisée à Global.asax comme suit.
C#
//..
routes.MapRoute(
"AddressSave",
"Address/Save/{addressNo}/{personNo}",
new { controller = "Address", action = "Save",
addressNo = UrlParameter.Optional, personNo = UrlParameter.Optional }
);
//..
N'importe laquelle des deux techniques décrites ci-dessus peut être utilisée.
16) Comment checkALL et uncheckALL toutes les lignes d'un tableau ?
Dans de nombreuses applications, cocher ou décocher tous les check dans un tableau en une fois peut être désiré.
Pour ce type de fonction, le script suivant peut être utilisé.
HTML
..
<br />
| <a href="#" class="checkALLRecords" id="checkALL">Check ALL</a> | <a href="#" class="unCheckALLRecords" id="unCheckALL">Uncheck ALL</a> |
<br />
..
<table id="NoteTable"></table>
..
JavaScript
//..
//check ALL records
$("#checkALL").live("click", function (e)
{
e.preventDefault();
CheckALL(true);
});
//uncheck ALL records
$("#unCheckALL").live("click", function (e)
{
e.preventDefault();
CheckALL(false);
});
//..
function CheckALL(state)
{
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
if (state==true)
cb.attr('checked',true);
else
cb.attr('checked',false);
}
}
//..
17) Comment faire "Loading Data" ?
Lors du chargement de plusieurs lignes de données, un message "loading data" doit être affiché aux utilisateurs.
Le div suivant peut être personnalisé selon le message requis.
HTML
..
<div id="loadMessage"></div>
..
La fonction javascript suivante peut être utilisée pour personnaliser la zone div.
JavaScript
..
function showLoader(root, txt) {
$("#loadMessage").html("");
$("#loadMessage").show();
var loader = '<img src="' + root + '/ajax-loader.gif" align="absmiddle">&nbsp;<span><br/>' + txt + '...</span>';
$("#loadMessage").fadeIn(100).html(loader);
}
function hideLoader() {
$("#loadMessage").hide();
}
..
18) Comment faire des grilles master-detail avec jQuery ?
Quand une ligne master est cliquée, les lignes detail sont affichées sous la grille master comme montré ci-dessous.
Les tableaux suivants sont utilisés comme grilles.
HTML
..
<table id="CountryTable" class="hovertable2"></table>
<br />
<br />
<table id="CityTable" class="hovertable"></table>
..
Les fonctions javascript suivantes sont utilisées pour simuler l'approche master-detail.
JavaScript
..
function setTableRowClick()
{
$("#CountryTable tr td.clickable").unbind('click');
$('#CountryTable tr td.clickable').click(function ()
{
var row = $(this).parent();
setRow(row);
});
//-------------
}//func
function setRow(row)
{
var rowid = row.attr('id'); //current
var higlightedCountryTableRowid = $("#pageinfo .higlightedCountryTableRowid").text();
$("#pageinfo .higlightedCountryTableRowid").html(rowid.toString());
if ((rowid==0) || (rowid!=higlightedCountryTableRowid))
{
//------
row.siblings().removeClass('diffColor');
row.addClass("diffColor");
//-------
fillCityData(rowid);
}
}
..
function fillCountryData()
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Country")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CountryTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCountry();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- country list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
function fillCityData(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Country")",
data: { countryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CityTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- city list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
..
Conclusion
J'espère que cet article a été utile.
Services Cloud Computing
Nous offrons des services de conception d'infrastructure, migration, gestion et optimisation sur les plateformes AWS, Azure et Google Cloud.
Découvrir Notre ServiceContactez-Nous
Contactez notre équipe pour des informations détaillées sur nos solutions AWS et cloud computing.
Contact