Maison > Article > développement back-end > Exemple de tutoriel sur le rendu HTML avec la vue partielle asp.net mvc
Exemple de tutoriel sur le rendu HTML avec la vue partielle asp.net mvc
- 零下一度original
- 2017-07-09 11:52:412495parcourir
Afin d'améliorer l'expérience utilisateur, nous utilisons généralement ajax pour charger les données, puis restituons le HTML en fonction des données. Le rendu frontal et le rendu côté serveur peuvent être utilisés pour rendre le HTML. Ceux qui sont intéressés peuvent en savoir plus.
Afin d'améliorer l'expérience utilisateur, nous utilisons généralement ajax pour charger des données, puis restituons du HTML en fonction des données. Le rendu frontal et le rendu côté serveur peuvent être utilisés pour restituer le HTML.
Rendu frontal
Utilisez un moteur de modèle frontal ou un framework MVC, tel que le modèle underscore.js ou utilisez angulaire.js et d'autres frameworks, bien sûr. Vous pouvez également assembler du HTML vous-même sans aucun framework.
<!DOCTYPE html>
<html>
<head>
<title>underscore.js的template渲染html</title>
</head>
<body>
<p id="content"></p>
<script src="~/static/js/lib/jquery-3.1.1.js"></script>
<script src="http://www.css88.com/doc/underscore/underscore.js"></script>
<script>
var data = { name: 'john', age: "18" }
var compiled = _.template("<p>姓名: <%= name %></p><p>年龄: <%= age %></p>");
$("#content").append(compiled(data));
</script>
</body>
</html>Rendu back-end
Si vous utilisez asp.net mvc peut utiliser la vue partielle et charger directement la vue partielle rendue côté serveur par ajax. Pour le code complet de cette partie, veuillez visiter mon github.
public ActionResult News()
{
return View();
}
public ActionResult RenderNews(int pageIndex = 1, int pageSize = 10)
{
return PartialView();
}Le front-end envoie directement une requête ajax à RenderNews
$.ajax({
url: '/Home/RenderNews?pageIndex=3&pageSize=10',
type: "POST",
beforeSend: function() {
},
complete: function() {
},
success: function(result) {
if (result.trim() != "") {
$("#containter").html(result);
}
},
error: function(e) {
console.log(e);
}
});En utilisant cette méthode est le back-end direct La sortie est le rendu HTML. Parfois, nous devons renvoyer le code d'erreur au front-end, tel que {"code":10000,"message":"success","data":"01ffcd5d1a840d2341909ced6bafa76caaaaa94b3e26ee717c64999d7867364b1b4a3"} , vous devez donc appeler dynamiquement la vue distribuée dans le contrôleur pour obtenir le résultat du rendu. Le code d'appel dynamique est :
public abstract class BaseController : Controller
{
/// <summary>
/// 动态渲染分布视图
/// </summary>
/// <param name="viewName">视图名称</param>
/// <param name="model">模型</param>
/// <returns>渲染后的html</returns>
public virtual string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = this.ControllerContext.RouteData.GetRequiredString("action");
this.ViewData.Model = model;
using (var sw = new StringWriter())
{
ViewEngineResult viewResult = System.Web.Mvc.ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
var viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
}Résumé
Étant donné que le rendu back-end peut utiliser la syntaxe du moteur de modèle asp.net mvc, il est meilleur que le rendu frontal en termes de maintenabilité et de développement l'efficacité. Personnellement, j'ai également tendance à utiliser le rendu back-end, mais en raison du besoin, le HTML est transmis au navigateur, donc l'utilisation de la bande passante sera élevée. Cette perte peut être résolue en augmentant la bande passante du serveur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!