<!-- language-all: c# -->

Baixe e coloque no seu projeto o [jQuery][1] e [jQuery Unobtrusive][2] Ajax (pelo *Nuget*) ou *Package Manage Consoler*.

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

***Controller***

Esse controler vai funcionar assim: a *Index* será a página com o *links* [Ajax.ActionLink][3] e o Pessoas será o [PartialView][4] 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][5]

***Ao clicar no link:***

![inserir a descrição da imagem aqui][6]


  [1]: http://jquery.com/
  [2]: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.1.2
  [3]: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink%28v=vs.118%29.aspx
  [4]: http://msdn.microsoft.com/en-us/library/system.web.mvc.controller.partialview%28v=vs.118%29.aspx
  [5]: https://i.sstatic.net/cwMMt.png
  [6]: https://i.sstatic.net/IqvPQ.png