[jQuery/C#] Dynamic Load ASP.Net User Control
Comment utiliser charger dynamiquement le contrôle utilisateur ASP.NET en utilisant jQuery et Ajax.
Pour ce faire, nous devons déclarer une WebMethod côté serveur qui ajoute contrôle utilisateur à un objet de classe Page. Et en utilisant jQuery et Ajax, appelez cette WebMethod et ajoutez la réponse à n'importe quel élément DOM. La réponse sera le contenu du contrôle utilisateur.
Déclarer une WebMethod nommée "LoadUserControl". Cette méthode crée un objet de la classe Page, puis ajoute l'objet UserControl à la classe Page. Et puis en utilisant la méthode Server.Execute exécute la page sur le serveur dans le répertoire actuel et reçoit la sortie de la page via l'écrivain d'objet StringWriter. Il écrit le flux HTML reçu du rédacteur dans le flux de sortie HTTP.
MaPage.aspx.cs
[WebMethod]
public static string LoadUserControl()
{
using (Page objPage = new Page())
{
UserControl uControl =
(UserControl)objPage.LoadControl("UserControls/TestUC.ascx");
objPage.Controls.Add(uControl);
using (StringWriter sWriter = new StringWriter())
{
HttpContext.Current.Server.Execute(objPage, sWriter, false);
return sWriter.ToString();
}
}
}
Ci-dessous se trouve le code jQuery pour faire une requête ajax lors d'un clic sur un bouton, puis ajouter la réponse reçue de WebMethod à n'importe quel élément DOM pour restituer le contenu du contrôle utilisateur.
MaPage.aspx
<html>
<!-- ... -->
<!-- ... IMPORT JQUERY -->
<body>
<div><input type='button' id='btnLoadControl' value='Load' /></div>
<div id='pnlLoadControl'></div>
</body>
</html>
$(document).ready(function () {
$("#btnLoadControl").on("click", function (e) {
$.ajax({
type: "POST",
url: "MaPage.aspx/LoadUserControl",
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#pnlLoadUControl").append(r.d);
}
});
e.preventDefault();
});
});