Application that does not need to load full page

Asked

Viewed 2,113 times

5

How can I create an MVC C# with Razor, where I have a Layout and then just update the central content and not the page as a whole.

I read some places to use AJAX another to use PartialView. But what is the best method? And how to do this?

c# asp.net-mvc asp.net-mvc-5 razor

3 answers

9


You should use something as follows

In his controller you must define an action that will return what you need

public class HomeController : Controller

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

    //...


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

On your page(view) you must choose a place(div) to receive the result via ajax

index.cshtml (view of the Action Index)

@{ Layout ="../Shared/_Layout.cshtml" } 
<!-- conteúdo da minha index -->
<!-- e quero atualizar apenas uma parte dentro da minha view index.cshtml com o retorno da partial Detalhes -->
<div id="detalhes"></div>

In his javascript\jQuery you will make a request ajax to the controller and will put the result in this div:

$.ajax({
    type: "get",
    url: "/Home/Detalhes",
    success: function(data) {
       $("#detalhes").html(data);
    }
});

or in a reduced manner

$.get("/home/detalhes", function(data) {
    $("#detalhes").html(data);
});

In that case, I shall not change _Layout.cshtml, do not remove the @RenderBody because the content of index.cshtml will be played inside the layout where it was and which in turn, on my index, will have an area that will receive a content from the action detalhes without having to reload the entire page.

Extra:

If you already have one PartialView that by convensão is named with the underscore\underline at the front (ex: _SouUmaPartialView), you can render it on other pages by starting pages (because it is reusable) as follows.

@Html.Partial("~/Views/Shared/_SouUmaPartialView.cshtml", seuObjetoCasoNecessarioPassarDados);

  • In the layout I would change the @Renderbody(), by <div id="details"></div>. And then in the View I would add ajax? I got a little confused :S

  • I did an update with an update of the answer, see if you can understand now

  • Is it possible that I don’t use @Renderbody()? For example the index matches the details? So it’s a layout partialview?

  • The @Renderbody() if you don’t want to use, you’ll have to repeat all the html on your pages. Your index.cshtml is like already a partialview that is inserted where @Renderbody() .... has a look at this link that explains how to work with Layouts: http://robsoncastilho.com.br/2011/06/04/asp-net-mvc-3-layout-pages-com-razor/

3

Example calling the PartialView Listagem

Controller

public class Home
{
    public ActionResult Listagem()
    {
        return PartialView();
    }
}

Javascript

With jQuery:

$.ajax({
    type: "GET",
    url: "/Home/Listagem",
    success: function(retorno) {
        $("#minha-div").html(retorno); // Lança o HTML retornado na DIV de id `minha-div`
    }
});

1

From what I understand, you want to create a 'master page' structure for an MVC project with Razor.

If this is really your question, you can create a page. cshtml that will be your Layout, and where you want to render the 'dynamic' content of your site put the code @Renderbody();

On the other pages of your project where you want to inherit the code of your Layout, use the code @{ Layout = "Path of your Layout.cshtml"}

Example:

Layout:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    </div>
    <div class="row">
        <article class="container">
                <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
                </section>
            </article>
    </div>
    <div class="row">
        <p>FOOTER</p>
    </div>
</body>
</html>

On any other page:

@{
    Layout = "../Shared/_Layout.cshtml";
}

//Seu código com Razor aqui;

  • It really renders, but it wants to accomplish the invoke via Ajax

Browser other questions tagged c# asp.net-mvc asp.net-mvc-5 razor

You are not signed in. Login or sign up in order to post.