Skip to main content
adicionou 515 caracteres ao conteúdo
Fonte Link
user6026
user6026

O que o Ajax.ActionLink gera:

<a data-ajax="true" data-ajax-method="get" data-ajax-mode="replace" data-ajax-update="#Conteudo" href="/Default/Pessoas">Carregar Pessoas</a>

Com Jquery

<a onclick="Open('/Default/Pessoas');" href="javascript:void(null);">
            <i class="fa fa-power-off fa-fw"></i> Logout
</a> 

<script>
    function Open(url) {
        $("#Conteudo").load(url);
    }
    $(document).ready({

    });
</script>

O que o Ajax.ActionLink gera:

<a data-ajax="true" data-ajax-method="get" data-ajax-mode="replace" data-ajax-update="#Conteudo" href="/Default/Pessoas">Carregar Pessoas</a>

Com Jquery

<a onclick="Open('/Default/Pessoas');" href="javascript:void(null);">
            <i class="fa fa-power-off fa-fw"></i> Logout
</a> 

<script>
    function Open(url) {
        $("#Conteudo").load(url);
    }
    $(document).ready({

    });
</script>
adicionou 288 caracteres ao conteúdo
Fonte Link
user6026
user6026
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
    <div> 
        @Ajax.ActionLink("Carregar Pessoas", "Pessoas", new AjaxOptions()
     {
       HttpMethod="get", 
       UpdateTargetId="Conteudo", 
       InsertionMode=InsertionMode.Replace, 
       Url="/Default/Pessoas"
     })
     
     @*Ou Assim*@
     
     @Ajax.ActionLink("Carregar Pessoas", "Pessoas", "Default", null, new AjaxOptions()
     {
       HttpMethod="get",
       UpdateTargetId="Conteudo",
       InsertionMode=InsertionMode.Replace        
     })
    </div>
    <div id="Conteudo"></div>
</body>
</html>
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
    <div> 
        @Ajax.ActionLink("Carregar Pessoas", "Pessoas", new AjaxOptions()
   {
       HttpMethod="get", 
       UpdateTargetId="Conteudo", 
       InsertionMode=InsertionMode.Replace, 
       Url="/Default/Pessoas"
   })
    </div>
    <div id="Conteudo"></div>
</body>
</html>
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
    <div> 
     @Ajax.ActionLink("Carregar Pessoas", "Pessoas", new AjaxOptions()
     {
       HttpMethod="get", 
       UpdateTargetId="Conteudo", 
       InsertionMode=InsertionMode.Replace, 
       Url="/Default/Pessoas"
     })
     
     @*Ou Assim*@
     
     @Ajax.ActionLink("Carregar Pessoas", "Pessoas", "Default", null, new AjaxOptions()
     {
       HttpMethod="get",
       UpdateTargetId="Conteudo",
       InsertionMode=InsertionMode.Replace        
     })
    </div>
    <div id="Conteudo"></div>
</body>
</html>
adicionou 378 caracteres ao conteúdo
Fonte Link
user6026
user6026

AjaxOptions

  • HttpMethod: pode ser Get,Post, etc.

  • UpdateTargetId: coloque a div que vai receber o contéudo produzido pela requisição Ajax.

  • InsertionMode: coloque Replace, para sempre atualizar a sua div.

  • Url: seu Controler e sua ActionResult

Obs: tem mais configurações, mas, essas são as triviais para o funcionamento

View: Partial Pessoas

View: Partial Pessoas

AjaxOptions

  • HttpMethod: pode ser Get,Post, etc.

  • UpdateTargetId: coloque a div que vai receber o contéudo produzido pela requisição Ajax.

  • InsertionMode: coloque Replace, para sempre atualizar a sua div.

  • Url: seu Controler e sua ActionResult

Obs: tem mais configurações, mas, essas são as triviais para o funcionamento

View: Partial Pessoas

Fonte Link
user6026
user6026
Carregando