asp.net mvc 부분 보기를 사용하여 html을 렌더링하는 방법에 대한 예제 튜토리얼-C#.Net 튜토리얼-php.cn

asp.net mvc 부분 보기를 사용하여 html을 렌더링하는 방법에 대한 예제 튜토리얼

零下一度

풀어 주다： 2017-07-09 11:52:41

원래의

2560명이 탐색했습니다.

사용자 경험을 향상시키기 위해 일반적으로 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: &#39;john&#39;, 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: &#39;/Home/RenderNews?pageIndex=3&pageSize=10&#39;,
 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":"

aaaaa

"}이므로 컨트롤러에서 분포 보기를 동적으로 호출하여 렌더링 결과는 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!