Como usar o PartialView no layout?

Question

Olá, 

Quero chamar uma PartialView na pagina inicial do tipo Layout. Tenho a seguinte lista no Layout:

        <div class="menu_negocio">
            <div class="nav_tabs">
                <ul class="teste">
                    <li>
                        <input type="radio" name="tabs" class="rad_tabs" id="tab1" checked>
                        <label for="tab1">HOME</label>
                    </li>
                    <li>
                        <input type="radio" name="tabs" class="rad_tabs" id="tab2">
                        <label for="tab2">TIPO DE EMBALAGEM</label>
                    </li>
                    <li>
                        <input type="radio" name="tabs" class="rad_tabs" id="tab3">
                        <label for="tab3">MODO DE TRANSPORTE</label>
                    <li>
                    <li>
                        <input type="radio" name="tabs" class="rad_tabs" id="tab4">
                        <label for="tab4">TAXAS LOCAIS PARA COMPRA</label>
                    </li>
                    <li>
                        <input type="radio" name="tabs" class="rad_tabs" id="tab5">
                        <label for="tab5">FRETES PARA COMPRA</label>
                    </li>
                </ul>
            </div>
        </div>

Quando o item de menu for acessado, quero chamar minha PartialView. Atualmente estou chamando minhas View's da seguinte forma: 

    $(document).ready(function () {
        $('#tab2').click(function () {            
            window.location = "/TipoEmbalagem/Embalagem"
        });
    })    

Mas dessa forma toda a tela é atualiza (o que eu não quero). O ideal seria atualizar apenas o conteúdo.

Sei que é possível fazer utilizando Ajax, pois já consigo fazer essa operação em outras situações, mas não estou conseguindo na página de Layout.

Answer 1

Você tem queefetuar uma chamada ajax para isso, (atualizar somente o conteúdo)

Já que está usando o Jquery, tenta seguir estes passos:

1. Insira uma Div dentro da sua Tab2 chamado divTeste

2. e faça a alterçaõ no seu código

$(document).ready(function () {
        $('#tab2').click(function () {  
          $("#divTest").load("/TipoEmbalagem/Embalagem")         
        });
    })    

O seu controller deve retornar uma partialview...

Referencia Jquery

http://api.jquery.com/load/

Você Poderia usar javascript puro para fazer isso também, mas precisa dar uma estudada no assunto fetch API e promisses em javascrit

---

Abraços http://joseluiz.net