컨트롤러에 ajax 호출을 통해 MVC5에서 부분 뷰를 렌더링하고 HTML을 반환하는 방법

컨트롤러에 ajax 호출을 통해 MVC5에서 부분 뷰를 렌더링하고 HTML을 반환하는 방법

어떻게 AJAX를 사용하여 html에서 렌더링된 완전한 부분 보기를 로드할 수 있습니까? (그래서 div.html을 설정했습니다)

완전한 부분 뷰(빨간색)를 렌더링하고 현재 로드된 뷰의 끝에 추가하는 컨트롤러 작업을 호출하려면 ajax 호출이 필요합니다.

[DOM에 추가하는 방법과 AJAX 호출 방법을 알고 있습니다.]

이를 위한 가장 좋은 배관 방식이 무엇인지, 어떤 유형의 조치 결과를 반환해야 하는지, 휠의 재창조를 방지하기 위해 이미 내장된 메커니즘이 있는지 알아야 합니다.

ASP에는 기본 제공되는 ajax 도우미가 있습니다.기본 시나리오를 다룰 수 있는 NET MVC.

설치하고 참조해야 합니다.jquery.unobtrusive-ajax자바스크립트 라이브러리 ( + jQuery 종속성).그러면 메인 뷰(index.cshtml이라고 하자)에 다음 코드를 입력합니다.

Index.cshtml

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

참고:@Ajax.ActionLink도우미가 수락합니다.AjaxOptions추가 사용자 지정을 위한 매개 변수.

컨트롤러(예: HomeController.cs )에서 반환해야 합니다.PartialViewResult:

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

마지막으로 MorePosts.cshtml 부분 보기를 정의합니다.

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

그리고 이것이 마지막입니다.일부 사용자가 다음을 클릭할 때Load More버튼을 누르면 게시물이 더 올라옵니다.

참고 1: 구현할 수 있습니다.OnBegin다음에 로드할 게시물을 결정하기 위한 실제 로직을 구현하는 기능(예: 마지막으로 로드한 게시물의 ID를 가져와 서버로 전송).

참고 2: 커스텀을 사용하면 동일한 결과를 얻을 수 있습니다.jQuery.ajax(jquery 없이) 호출.유일한 차이점은 수동 아약스 호출 및 클릭 이벤트뿐입니다.

---

도움이 되길 바랍니다.필요하다면 더 완벽한 예시를 쓸 수 있습니다.

다음 제품을 구입하는 것을 추천합니다.Westwind.Web.MvcNUGET의 라이브러리와 JSON 결과로 반환하기 위해 보기를 문자열로 실행할 수 있습니다.

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

@Guruprasad가 코멘트에서 말한 것처럼, 당신은 MVC 컨트롤러로부터 부분적인 뷰를 돌려받기만 하면 됩니다.return PartialView(model), 그러나 RenderPartialView를 사용하면 필요한 경우 다른 값과 함께 JSON으로 출력할 수 있는 문자열로 얻을 수 있습니다.WebAPI는 뷰를 렌더링하는 기능이 내장되어 있지 않으므로 WebAPI를 사용하도록 선택한 경우 이 기능이 작동합니다.

언급URL : https://stackoverflow.com/questions/32610270/how-to-render-partial-view-in-mvc5-via-ajax-call-to-a-controller-and-return-html