집 >백엔드 개발 >C#.Net 튜토리얼 >asp.net mvc 부분 보기를 사용하여 html을 렌더링하는 방법에 대한 예제 튜토리얼
asp.net mvc 부분 보기를 사용하여 html을 렌더링하는 방법에 대한 예제 튜토리얼
- 零下一度원래의
- 2017-07-09 11:52:412651검색
사용자 경험을 향상시키기 위해 일반적으로 ajax를 사용하여 데이터를 로드한 다음 해당 데이터를 기반으로 html을 렌더링합니다. 관심 있는 분은 html을 렌더링하는 데 사용할 수 있습니다.
사용자 경험을 향상시키기 위해 우리는 일반적으로 ajax를 사용하여 데이터를 로드한 다음 데이터를 기반으로 html을 렌더링하고, html 렌더링은 프런트 엔드 렌더링과 서버 측 렌더링을 사용할 수 있습니다.
프런트엔드 렌더링
프런트엔드 템플릿 엔진이나 MVC 프레임워크(예: underscore.js 템플릿)를 사용하거나angular.js와 같은 프레임워크를 사용할 수도 있습니다. 물론 HTML을 직접 스플라이스할 수도 있습니다. 어떤 프레임워크라도.
<!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>백엔드 렌더링
asp.netmvc를 사용하는 경우 view의 일부를 사용할 수 있으며, 서버 측 렌더링 후 부분 보기는 직접 로드됩니다. ajax.이 부분의 전체 코드를 보려면 내 github을 방문하세요.
public ActionResult News()
{
return View();
}
public ActionResult RenderNews(int pageIndex = 1, int pageSize = 10)
{
return PartialView();
}프런트엔드는 RenderNews에 직접 ajax 요청을 보냅니다
$.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);
}
});이 방법을 사용하면 백엔드에서 렌더링된 HTML을 직접 출력해야 하는 경우가 있습니다. , 예를 들어 {"code": 10000,"message":"success","data":"e388a4556c0f65e1904146cc1a846beeaaaaa94b3e26ee717c64999d7867364b1b4a3"}이므로 컨트롤러에서 분포 보기를 동적으로 호출하여 렌더링 결과는 다음과 같습니다.
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();
}
}
}Summary
백엔드 렌더링은 asp.net mvc 템플릿 엔진 구문을 사용할 수 있으므로 유지 관리 측면에서 프런트 엔드 렌더링보다 낫습니다. 개발 효율성. 개인적으로도 백엔드 렌더링을 사용하는 경향이 있지만 HTML을 브라우저에 전달해야 하기 때문에 대역폭 사용량이 높으므로 서버 대역폭을 늘리면 이 손실을 해결할 수 있습니다.
위 내용은 asp.net mvc 부분 보기를 사용하여 html을 렌더링하는 방법에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!