6

Quero mudar os ActionLink e o URL para funcionar com Ajax, porém não sei como fazer isso. Segue meu código com ActionLink e URL.

<ul class="nav" id="side-menu">
    <li>
        <a href="#"><i class="fa fa-shopping-cart fa-fw"></i> Pedidos<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                @Html.ActionLink("Ver Pedidos", "Index", "Pedido")
            </li>
            <li>
                @Html.ActionLink("Status Pedidos", "Status", "Pedido")
            </li>
        </ul>
    </li>
    <li>
        <a href="@Url.Action("Index","Cliente")"><i class="fa fa-users fa-fw"></i> Clientes</a>
    </li>
    <li>
        <a href="@Url.Action("Index","Carrossel")"><i class="fa fa-picture-o fa-fw"></i> Carrossel</a>
    </li>
    <li>
        <a href="@Url.Action("Index", "Carta")"><i class="fa fa-envelope fa-fw"></i> Cartas</a>
    </li>
    <li>
        <a href="@Url.Action("Index","Usuario")"><i class="fa fa-user fa-fw"></i> Usuários</a>
    </li>
    <li>
        <a href="@Url.Action("Logout")"><i class="fa fa-power-off fa-fw"></i> Logout</a>
    </li>
</ul>
<div id="conteudo"></div>

3 Respostas 3

6

Baixe e coloque no seu projeto o jQuery e jQuery Unobtrusive Ajax (pelo Nuget) ou Package Manage Consoler.

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.1.2

Controller

Esse controler vai funcionar assim: a Index será a página com o links Ajax.ActionLink e o Pessoas será o PartialView que será carregado na hora do click.

public class DefaultController : Controller
{
    private readonly ModelDb db;
    public DefaultController()
    {
        db = new ModelDb();
    }
    // GET: Default
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public PartialViewResult Pessoas()
    {
        return PartialView(db.Pessoas.OrderBy(x => x.Nome).AsEnumerable());
    }
}

View: Index

@{ 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>

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

@model IEnumerable<WebApp.Models.Pessoas>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nome)
        </th>        
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Nome)
        </td>        
    </tr>
}
</table>

Página Index Renderizada

inserir a descrição da imagem aqui

Ao clicar no link:

inserir a descrição da imagem aqui

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>
4
  • Eu poderia remover o URL, e colocar assim? @Ajax.ActionLink("Carregar Pessoas", "Pessoas", "Controller, new... Commented 12/06/2014 às 13:48
  • @DiegoZanardo, pode sim, existem várias sobrecargas esse método então pode adequar dessa maneira que terá o mesmo resultado, fiz uma edição com tal dúvida.
    – user6026
    Commented 12/06/2014 às 14:11
  • eu consigo gerar algo assim (Para que o <i> seja mantido: <a href="@Url.Action("Logout")"><i class="fa fa-power-off fa-fw"></i> Logout</a> Commented 12/06/2014 às 14:27
  • @DiegoZanardo, utilize nesse caso jQuery, com está na resposta editada. Eu também tem esses links, então eu prefiro usar puramente jQuery.
    – user6026
    Commented 12/06/2014 às 14:40
1

Crie um id para seus ActionLink com jquery busca pelo id podendo fazer post/get

<ul class="nav" id="side-menu">
    <li>
        <a href="#"><i class="fa fa-shopping-cart fa-fw"></i> Pedidos<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
             @* cria o id para ActionLink *@
               @Html.ActionLink("Ver Pedidos", "Index", "Pedido",new { id ="idPedido" })
            </li>
            <li>
                @Html.ActionLink("Status Pedidos", "Status", "Pedido")
            </li>
        </ul>
    </li>
    <li>
        <a href="@Url.Action("Index","Cliente")"><i class="fa fa-users fa-fw"></i> Clientes</a>
    </li>
    <li>
        <a href="@Url.Action("Index","Carrossel")"><i class="fa fa-picture-o fa-fw"></i> Carrossel</a>
    </li>
    <li>
        <a href="@Url.Action("Index", "Carta")"><i class="fa fa-envelope fa-fw"></i> Cartas</a>
    </li>
    <li>
        <a href="@Url.Action("Index","Usuario")"><i class="fa fa-user fa-fw"></i> Usuários</a>
    </li>
    <li>
        <a href="@Url.Action("Logout")"><i class="fa fa-power-off fa-fw"></i> Logout</a>
    </li>
</ul>
<div id="conteudo"></div>   

  <script>
     $(function () {
         $('#idPedido').click(function() {
               $.post('seuController', function(retorno) {
                      $('#conteudo').html(retorno);
                  });
          });
      })                                    
  </script>
0

Segue um exemplo que uso em meu site:

Razor

@page.Html.DropDownList("UF", page.ViewBag.Estados as SelectList, new { onchange = "vmCadInicial.GetCidades(this.value)")

Javascript

this.GetCidades = function (uf, callback) {
     $.getJSON("/site/apiCidades/AccountMVVM/GetCidades/" + uf + "?callback=?")
           .success(function (data) {
                        if (callback) callback(data);
           })
          .complete(function (jqXhr, textStatus, error) { })
          .error(function (jqXhr, textStatus, error) { });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .