Use ajax with ActionLink

Navigation
6

I want to change the ActionLink and URL to work with Ajax , but I do not know how to do that. Follow my code with ActionLink and 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>
    
asked by anonymous 12.06.2014 / 14:57

3 answers

6

Download and put jQuery in your project and jQuery Unobtrusive Ajax (by Nuget ) or Package Manage Consoler . 

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

Controller

This controler will work like this: Index will be the page with links Ajax.ActionLink and People will be the PartialView which will be loaded at the time of 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: can be Get, Post, etc.

  • UpdateTargetId:
12.06.2014 / 15:22
1

Create an id for your ActionLink with jquery searching for the id and can do 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>
    
18.06.2014 / 20:25
0

Here's an example I use on my 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) { });
}
    
18.06.2014 / 20:45
What is the best way to upload files with Ajax? Create custom page for user registration