How can I create an application in MVC C# with Razor , where I have a Layout and then only update the central content and not the page as a whole.
I have read some places to use AJAX other to use PartialView . But what is the best method? And how do you do that?
You should use something like this
In your controller you should 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 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 your javascript\jQuery you will make a request ajax to controller and put the result in that div:
$.ajax({
type: "get",
url: "/Home/Detalhes",
success: function(data) {
$("#detalhes").html(data);
}
});
or the reduced way
$.get("/home/detalhes", function(data) {
$("#detalhes").html(data);
});
In this case, I do not change the _Layout.cshtml , I do not remove the @RenderBody because the contents of index.cshtml will be played inside the layout where it was and that in turn, in my index , will have an area that will receive content from the detalhes action without having to reload the entire page.
Extra:
If you already have a PartialView that by convention is named with underscore\underline ahead (ex: _SouUmaPartialView ), you can render it on other pages when you start the pages (because it is reusable) of the following way.
@Html.Partial("~/Views/Shared/_SouUmaPartialView.cshtml", seuObjetoCasoNecessarioPassarDados);
Example calling PartialView Listagem
public class Home
{
public ActionResult Listagem()
{
return PartialView();
}
}
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'
}
});
As I understand it, you want to create a master page structure for an MVC project with Razor.
If this is really your question, you can create a .cshtml page that will be your Layout, and where you want to render the 'dynamic' content of your site, place the code @RenderBody ();
In 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 another page:
@{
Layout = "../Shared/_Layout.cshtml";
}
//Seu código com Razor aqui;