AJAX problem

Question

AJAX problem

Navigation

#1 by (2 votes)

0

I'm developing a site in ASP.NET MVC, I wanted it to change when my screen was refreshed, so my div .ESTRUTURA is the code:

Javascript:

function loadPage(page) {
    $.ajax({
        type: 'GET',
        url: page,
        dataType: 'html',
        cache: true,
        async: true,
        success: function (data) {
            console.log($('.ESTRUTURA').html(data));
            $('.ESTRUTURA').html(data);
        }
    });
}

HTML (In this case, it's own _Layout.cshtml)

<body>
    <div class="bg">
        @Html.Partial("_Header")
        <div class="ESTRUTURA"> 
            @RenderBody()
        </div>
        @Html.Partial("_Footer")
    </div>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/vendors/underscore.js"></script>
    <script src="~/Scripts/vendors/backbone.js"></script>
    <script src="~/Scripts/app.js"></script>
</body>

Within my DIV .ESTRUTURA has @RenderBody() , I believe the problem is there. The variable data , receives the entire HTML of the page (but should not).

asp.net-mvc razor

asked by anonymous 14.11.2014 / 13:12

1 answer

Help Dynamic Combo with javascript Django Authentication with Legacy Database

score 2 · Accepted Answer

Do so, and can work in two ways.

The first is to make the action return only partial view , that is, view without the master page (_Layout.cshtml).

Controller

public ActionResult MinhaAction() {
   return PartialView();
}

But we also have a problem, if the user decides to access the URL directly it will only return the partial part, in which case I would work as below.

Controller (Second form)

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

[HttpPost, ActionName("MinhaAction")]
public ActionResult MinhaActionPartial() {
  return PartialView();
}

And you should change in the know jquery the request method for POST instead of GET , thus it will cause every request POST to return the partial part and GET the entire page.

Jquery

function loadPage(page) {
    $.ajax({
        type: 'POST',
        url: page,
        dataType: 'html',
        cache: true,
        async: true,
        success: function (data) {
            console.log($('.ESTRUTURA').html(data));
            $('.ESTRUTURA').html(data);
        }
    });
}