development

MVC 3 : Ajax를 통해로드 될 때 레이아웃 페이지없이 뷰를 렌더링하는 방법?

big-blog 2020. 6. 9. 07:43
반응형

MVC 3 : Ajax를 통해로드 될 때 레이아웃 페이지없이 뷰를 렌더링하는 방법?


점진적 향상 에 대해 배우고 있으며 AJAXifying보기에 대한 질문이 있습니다. 내 MVC 3 프로젝트에는 레이아웃 페이지, 뷰 시작 페이지 및 두 개의 일반 뷰가 있습니다.

viewstart 페이지는 Views 폴더의 루트에 있으므로 모든보기에 적용됩니다. 모든 뷰가 _Layout.cshtml해당 레이아웃 페이지에 사용되도록 지정합니다 . 레이아웃 페이지에는 각보기마다 하나씩 두 개의 탐색 링크가 있습니다. 링크 @Html.ActionLink()는 페이지에 자신을 렌더링하는 데 사용 됩니다.

이제 jQuery를 추가하고 이러한 링크를 가로 채고 Ajax를 사용하여 해당 컨텐츠를 페이지에 동적으로로드하려고합니다.

<script type="text/javascript">
    $(function () {
        $('#theLink').click(function () {
            $.ajax({
                url: $(this).attr('href'),
                type: "GET",
                success: function (response) {
                    $('#mainContent').html(response);
                }
            });
            return false;
        });
    });
</script>

이 작업을 수행 할 수있는 두 가지 방법이 있지만 특히 두 가지 중 하나를 좋아하지 않습니다.

1) 전체보기의 내용을 가져 와서 부분보기에 배치 한 다음 기본보기가 렌더링 될 때 부분보기를 호출하도록 할 수 있습니다. 그렇게 Request.IsAjaxRequest()하면 컨트롤러에서 사용 하여 요청이 Ajax 요청인지 여부에 따라 반환 View()하거나 반환 할 수 있습니다 PartialView(). 레이아웃 페이지를 사용하기 때문에 Ajax 요청에 일반보기를 반환 할 수 없으며 레이아웃 페이지의 두 번째 사본이 주입됩니다. 그러나 @{Html.RenderPartial();}표준 GET 요청에 대해 빈 뷰를 작성해야하기 때문에 이것을 좋아하지 않습니다 .

    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
            return PartialView("partialView");
        else
            return View();
    }

그런 다음 Index.cshtml에서 다음을 수행하십시오.

@{Html.RenderPartial("partialView");}

2) _viewstart에서 레이아웃 지정을 제거하고 요청이 Ajax가 아닌 경우 수동으로 지정할 수 있습니다.

    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
            return View(); // Return view with no master.
        else
            return View("Index", "_Layout"); // Return view with master.
    }

더 나은 제안이 있습니까? 레이아웃 페이지없이 뷰를 반환하는 방법이 있습니까? 아약스 요청 인 경우 레이아웃이 아약스가 아닌 경우 명시 적으로 포함하는 것보다 "레이아웃을 포함하지 마십시오"라고 명시 적으로 말하는 것이 훨씬 쉽습니다.


에서 ~/Views/ViewStart.cshtml:

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

컨트롤러에서 :

public ActionResult Index()
{
    return View();
}

페이지 상단에 다음 코드를 입력하십시오.

@{
    Layout = "";
}

나는 당신의 # 1 옵션을 선호하고 사용합니다. 나에게 View()당신이 전체 페이지를 반환한다는 것을 암시 하기 때문에 # 2를 좋아하지 않습니다 . 일단 뷰 엔진이 완성되면 완전히 완성되고 유효한 HTML 페이지 여야합니다. PartialView()임의의 HTML 청크를 반환하기 위해 만들어졌습니다.

나는 단지 부분적이라고 부르는 견해를 갖는 것이 큰 문제라고 생각하지 않습니다. 여전히 건조하며 두 가지 시나리오에서 부분의 논리를 사용할 수 있습니다.

Many people dislike fragmenting their action's call paths with Request.IsAjaxRequest(), and I can appreciate that. But IMO, if all you are doing is deciding whether to call View() or PartialView() then the branch is not a big deal and is easy to maintain (and test). If you find yourself using IsAjaxRequest() to determine large portions of how your action plays out, then making a separate AJAX action is probably better.


Create two layout: 1. empty layout, 2 . main layout and then write in _viewStart file this code:

@{
if (Request.IsAjaxRequest())
{
    Layout = "~/Areas/Dashboard/Views/Shared/_emptyLayout.cshtml";
}
else
{
    Layout = "~/Areas/Dashboard/Views/Shared/_Layout.cshtml";
}}

of course, maybe it is not best solution


You don't have to create an empty view for this.

In the controller:

if (Request.IsAjaxRequest())
  return PartialView();
else
  return View();

returning a PartialViewResult will override the layout definition when rendering the respons.


With ASP.NET 5 there is no Request variable available anymore. You can access it now with Context.Request

Also there is no IsAjaxRequest() Method anymore, you have to write it by yourself, for example in Extensions\HttpRequestExtensions.cs

using System;
using Microsoft.AspNetCore.Http;

namespace Microsoft.AspNetCore.Mvc
{
    public static class HttpRequestExtensions
    {
        public static bool IsAjaxRequest(this HttpRequest request)
        {
            if (request == null)
            {
                throw new ArgumentNullException(nameof(request));
            }

            return (request.Headers != null) && (request.Headers["X-Requested-With"] == "XMLHttpRequest");
        }
    }
}

I searched for a while now on this and hope that will help some others too ;)

Resource: https://github.com/aspnet/AspNetCore/issues/2729


For a Ruby on Rails application, I was able to prevent a layout from loading by specifying render layout: false in the controller action that I wanted to respond with ajax html.

참고URL : https://stackoverflow.com/questions/5318385/mvc-3-how-to-render-a-view-without-its-layout-page-when-loaded-via-ajax

반응형