Load Only part of the Site by clicking Actionlink

Asked

Viewed 393 times

3

I own the following ActionLink in my MasterPage.

      <div class="areaRetangulo">
        <div class="col-lg-3  vermelho retanguloTamanho primeiraImagem">
            <div class="triangulo trianguloVermelho"></div>
            <div class="retangulo">
                <h4>@Html.ActionLink("Cases", "Web")</h4>
            </div>
        </div>

        <div class="col-lg-3  azul retanguloTamanho segundaImagem">
            <div class="triangulo trianguloAzul"></div>
            <div class="retangulo">
                <h4>@Html.ActionLink("Talentos", "Web")</h4>
            </div>
        </div>

        <div class="col-lg-3  amarelo retanguloTamanho terceiraImagem">
            <div class="triangulo trianguloAmarelo"></div>
            <div class="retangulo">
                <h4>@Html.ActionLink("Noticias", "Web")</h4>
            </div>
        </div>

        <div class="col-lg-3  verde retanguloTamanho quartaImagem">
            <div class="triangulo trianguloVerde"></div>
            <div class="retangulo">
                <h4>@Html.ActionLink("Treinamentos", "Web")</h4>
            </div>
        </div>

    </div>

I need to load a content x into a div called "body" inside one of my Views. However, I cannot reload the Masterpage.

How could you proceed?

Thank you!

c# asp.net-mvc

2 answers

4


Based on that reply.

One option is to use Ajax.
An example of how to use it:

<script>
    function Open(url) {
        Carregar();
        url = '@Url.Content("~/")' + url;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#corpoConteudo').html(response);
                $('#loader').remove();
            },
            error: function () {
                alert('Ocorreu um erro!');
                $('#loader').remove();
            }
        });
    }

    function Carregar() {
        $('#corpoConteudo').append('<div id="loader"></div>');
    }
</script>


<div id="corpoConteudo">
<!-- O conteúdo da PartiewView será carrega AQUI -->
</div>

<div class="areaRetangulo">
    <div class="col-lg-3  vermelho retanguloTamanho primeiraImagem">
        <div class="triangulo trianguloVermelho"></div>
        <div class="retangulo">
            <h4>
                <a onclick="Open('Web/Cases');" href="javascript:void(null);">Cases</a>
            </h4>
        </div>
    </div>

    <div class="col-lg-3  azul retanguloTamanho segundaImagem">
        <div class="triangulo trianguloAzul"></div>
        <div class="retangulo">
            <h4>
                <a onclick="Open('Web/Talentos');" href="javascript:void(null);">Talentos</a>
            </h4>
        </div>
    </div>

    <div class="col-lg-3  amarelo retanguloTamanho terceiraImagem">
        <div class="triangulo trianguloAmarelo"></div>
        <div class="retangulo">
            <h4>
                <a onclick="Open('Web/Noticias');" href="javascript:void(null);">Noticias</a>
            </h4>
        </div>
    </div>

    <div class="col-lg-3  verde retanguloTamanho quartaImagem">
        <div class="triangulo trianguloVerde"></div>
        <div class="retangulo">
            <h4>
                <a onclick="Open('Web/Treinamentos');" href="javascript:void(null);">Treinamentos</a>
            </h4>
        </div>
    </div>
</div>

Just remembering that the Action has to return a PartialView.

public class WebController : Controller
{
    public PartialViewResult Cases()
    {
         return PartialView();
    }
}

3

Browser other questions tagged c# asp.net-mvc

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