none
Chamar método pelo ajax? RRS feed

  • Pergunta

  • Olá pessoal, tudo bem?

     

    Como faço para chamar através do ajax, um método(retorna ActionResult) de um Controller?

    Eu preciso preencher alguns campos textos, toda vez que altero uma dropdownlist. No caso eu estou chamando uma função em javascript que dispara com o onchange e é preenchido utilizando o getelementbyid, mas falta fazer a parte em ajax acredito, para me trazer os novos dados que será filtrado pelo id do cliente por exemplo.

     


    Abraço,
    Marcelo Tamanini
    quinta-feira, 10 de junho de 2010 02:19

Respostas

  • jQuery:

    Importa na masterpage:

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    Criei:

    Controller - jQuery

    View - Index

    Controller:

    public class jQueryController : Controller
      {
        //
        // GET: /jQuery/
        public ActionResult Index()
        {
          return View();
        }
    
        [HttpPost]
        public ActionResult Index(Dados dado)
        {
          if (Session["VariosDados"] == null)
          {
            Session["VariosDados"] = new List<Dados>();
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
          else
          {
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
    
          return PartialView("PartialNativo", Session["VariosDados"]);
        }
    
        [HttpPost]
        public ActionResult Remover(int id)
        {
          //Esse aqui fica para lição de Casa :D
          return View();
        }
    
      }

    View:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AjaxMVC.Models.Dados>" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      Index
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <script type="text/javascript">
        $(function () {
          $("#MeuForm").submit(function (e) {
            e.preventDefault();
            $.ajax({
              type: "POST",
              url: "Index",
              data: $(this).serialize(),
              dataType: "json",
              success: function (data) {
                //Monta HTML e Joga na Div.
              }
            });
            return false;
          });
        });
      </script>
      <h2>
        Index</h2>
      <% using (Html.BeginForm("Index", "jQuery", FormMethod.Post, new { id = "MeuForm" }))
        { %>
      <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Nome) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Nome) %>
          <%: Html.ValidationMessageFor(model => model.Nome) %>
        </div>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Nascimento) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Nascimento) %>
          <%: Html.ValidationMessageFor(model => model.Nascimento) %>
        </div>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Cidade) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Cidade) %>
          <%: Html.ValidationMessageFor(model => model.Cidade) %>
        </div>
        <p>
          <input type="submit" value="Create" />
        </p>
      </fieldset>
      <% } %>
      <div id="Me">
      </div>
    </asp:Content>
    

     

    Obs:Ambas as Paginas Herdavam de Model.Dados:

    using System;
    
    namespace AjaxMVC.Models
    {
      public class Dados
      {
        public string Nome { get; set; }
        public DateTime Nascimento{ get; set; }
        public string Cidade { get; set; }
      }
    }
    Duvidas ainda?


    Contato:albertim_brasil@hotmail.com - Se ajudei, marca como útil.
    Twitter: Me siga!!
    Blog:http://dotnettime.spaces.live.com/

    sexta-feira, 11 de junho de 2010 11:55

Todas as Respostas

  • Bom, existe diversas maneiras para poder fazer isso:

    Usando o proprio Ajax do ASP.NET MVC.

    ou também

    Usando jQuery.

     

    Com o prorio ajax do framework vc podera usar 2 helpers muito uteis:

    Ajax.BeginForm(seus parametros)

    Ajax.ActionLink(seus parametros)

    Eles não tem segredo de uso, é so vc botar o paretense e ver o que eles pedem.

     

    Já com jQuery, vc pode usar os recursos:

    $.get
    $.ajax
    $.post
    $("#elementr").load
    $.getJSON

    Visite também jQuery Ajax

    Basicamente é isso ai, como vc pode ver todos ai tem links é so entrar e ver qual que ultilizar, se ainda sim tiver duvida posto um exemplo para vc.


    Contato:albertim_brasil@hotmail.com - Se ajudei, marca como útil.
    Twitter: Me siga!!
    Blog:http://dotnettime.spaces.live.com/

    quinta-feira, 10 de junho de 2010 02:49
  • Ainda não ficou claro para mim.

    No caso eu tenho o método BuscaCliente(int id) no qual retorno um objeto "cliente" da seguinte forma:

    return View( cliente );

    Pelos exemplos nos links acima, eu entendi que chamo uma página html e não um método do controle.

    Poderia postar um exemplo em jquery de como ficaria o script?


    Abraço,
    Marcelo Tamanini
    quinta-feira, 10 de junho de 2010 13:03
  • Não cara, você não chama páginas .html.

    Você faz requisições HTTP.

    Então você pode sim acessar Actions, é so saber a URL dessa action.

    Por exemplo:

    Controller = Pessoa

    ActionResult = Cadastrar

    para acessar é url/Pessoa/Cadastrar

    Quando eu chegar em casa vou fazer os dois exemplo, com o nativo e com jQuery ai você escolhe o que melhor se identificar.


    Contato:albertim_brasil@hotmail.com - Se ajudei, marca como útil.
    Twitter: Me siga!!
    Blog:http://dotnettime.spaces.live.com/

    quinta-feira, 10 de junho de 2010 13:17
  • Ajax Nativo:

    Primeira coisa, fui na MasterPage e adicionei as referencias aos scripts:

      <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
      <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

    Criei:

    Controller - AjaxNativo

    View - Index

    PartialView - PartialNativo

    Controller:

    public class AjaxNativoController : Controller
      {
        //
        // GET: /AjaxNativo/
    
        public ActionResult Index()
        {
          return View();
        }
    
        [HttpPost]
        public ActionResult Index(Dados dado)
        {
          if (Session["VariosDados"] == null)
          {
            Session["VariosDados"] = new List<Dados>();
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
          else
          {
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
    
          return PartialView("PartialNativo", Session["VariosDados"]);
        }
    
        [HttpPost]
        public ActionResult Remover(int id)
        {
          if (Session["VariosDados"] != null)
          {
            ((List<Dados>)Session["VariosDados"]).RemoveAt(id);
    
          }
          return PartialView("PartialNativo", Session["VariosDados"]);
        }
      }

    View:

    <h2>Index</h2>
    
      <% using (Ajax.BeginForm("Index", new AjaxOptions {UpdateTargetId= "Me" })) { %>
      
        <fieldset>
          <legend>Fields</legend>
          <div class="editor-label">
            <%: Html.LabelFor(model => model.Nome) %>
          </div>
          <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Nome) %>
            <%: Html.ValidationMessageFor(model => model.Nome) %>
          </div>
          <div class="editor-label">
            <%: Html.LabelFor(model => model.Nascimento) %>
          </div>
          <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Nascimento) %>
            <%: Html.ValidationMessageFor(model => model.Nascimento) %>
          </div>
          <div class="editor-label">
            <%: Html.LabelFor(model => model.Cidade) %>
          </div>
          <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Cidade) %>
            <%: Html.ValidationMessageFor(model => model.Cidade) %>
          </div>
          <p>
            <input type="submit" value="Create" />
          </p>
        </fieldset>  
      <% } %>
      <div id="Me">
      </div>

    PartialView:

    <table>
      <tr>
        <th>
        </th>
        <th>
          Nome
        </th>
        <th>
          Nascimento
        </th>
        <th>
          Cidade
        </th>
      </tr>
      <% int contador = 0;
        foreach (AjaxMVC.Models.Dados item in Model)
        { %>
      <tr>
        <td>
          <%: Ajax.ActionLink("Remover","Remover",new {id = contador},new AjaxOptions{ UpdateTargetId = "Me"}) %>
        </td>
        <td>
          <%: item.Nome %>
        </td>
        <td>
          <%: String.Format("{0}", item.Nascimento.ToShortDateString()) %>
        </td>
        <td>
          <%: item.Cidade %>
        </td>
      </tr>
      <% contador++;
        } %>
    </table>


    Contato:albertim_brasil@hotmail.com - Se ajudei, marca como útil.
    Twitter: Me siga!!
    Blog:http://dotnettime.spaces.live.com/

    • Sugerido como Resposta Alberto Monteiro terça-feira, 15 de junho de 2010 14:47
    sexta-feira, 11 de junho de 2010 11:40
  • jQuery:

    Importa na masterpage:

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    Criei:

    Controller - jQuery

    View - Index

    Controller:

    public class jQueryController : Controller
      {
        //
        // GET: /jQuery/
        public ActionResult Index()
        {
          return View();
        }
    
        [HttpPost]
        public ActionResult Index(Dados dado)
        {
          if (Session["VariosDados"] == null)
          {
            Session["VariosDados"] = new List<Dados>();
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
          else
          {
            ((List<Dados>)Session["VariosDados"]).Add(dado);
          }
    
          return PartialView("PartialNativo", Session["VariosDados"]);
        }
    
        [HttpPost]
        public ActionResult Remover(int id)
        {
          //Esse aqui fica para lição de Casa :D
          return View();
        }
    
      }

    View:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AjaxMVC.Models.Dados>" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      Index
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <script type="text/javascript">
        $(function () {
          $("#MeuForm").submit(function (e) {
            e.preventDefault();
            $.ajax({
              type: "POST",
              url: "Index",
              data: $(this).serialize(),
              dataType: "json",
              success: function (data) {
                //Monta HTML e Joga na Div.
              }
            });
            return false;
          });
        });
      </script>
      <h2>
        Index</h2>
      <% using (Html.BeginForm("Index", "jQuery", FormMethod.Post, new { id = "MeuForm" }))
        { %>
      <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Nome) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Nome) %>
          <%: Html.ValidationMessageFor(model => model.Nome) %>
        </div>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Nascimento) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Nascimento) %>
          <%: Html.ValidationMessageFor(model => model.Nascimento) %>
        </div>
        <div class="editor-label">
          <%: Html.LabelFor(model => model.Cidade) %>
        </div>
        <div class="editor-field">
          <%: Html.TextBoxFor(model => model.Cidade) %>
          <%: Html.ValidationMessageFor(model => model.Cidade) %>
        </div>
        <p>
          <input type="submit" value="Create" />
        </p>
      </fieldset>
      <% } %>
      <div id="Me">
      </div>
    </asp:Content>
    

     

    Obs:Ambas as Paginas Herdavam de Model.Dados:

    using System;
    
    namespace AjaxMVC.Models
    {
      public class Dados
      {
        public string Nome { get; set; }
        public DateTime Nascimento{ get; set; }
        public string Cidade { get; set; }
      }
    }
    Duvidas ainda?


    Contato:albertim_brasil@hotmail.com - Se ajudei, marca como útil.
    Twitter: Me siga!!
    Blog:http://dotnettime.spaces.live.com/

    sexta-feira, 11 de junho de 2010 11:55
  • Oi Marcelo,

    fiz um exemplo usando ajax com jQuery e json aqui...

    http://vintem.com.br/archive/2010/04/26/postando-um-objeto-json-para-uma-action-mvc2-com-jquery.aspx

    espero que ajude

    terça-feira, 15 de junho de 2010 13:59
  • Amigo, você tem 2 opções, você pode: Ir até o controlador e retornar uma coleção de strings e preencher os campos com essas strings via javascript:

    Supondo que eu queira recuperar o valor de um serviço e preenche-lo automaticamente na minh aplicação assim que eu selecione o serviço no combobox.

    No controlador:        

     

    public ContentResult ResultContent(string IndexNumber)
    {
    decimal? valor = ServicoRepository.First(x => x.Codigo == Convert.ToInt32(IndexNumber)).Valor;
    return Content(valor.ToString());
    }

    Na view para recuperar o valor do serviço

    jQuery.get("ResultContent", { ComboBoxIndexNumber: i }, //Passa o nome do método e o indexnumber como parametro
    function(data) { //data é o meu resultado(valor), aqui posso trata-lo como quiser, você pode aqui setar os valores no elementos da página.
    data = parseFloat(data);
    data = (data.toFixed(2));
    data = data.replace(".", ",");
    document.getElementById("ItemOS_ValorItem").value = data;
    document.getElementById("submit1").disabled = false;
    });

     

    Para fazer isso com multiplos campos voce pode passar uma lista ou uma string separadas por virgulas e tokenizar via javascript. MAS essa ainda não é uma solução ótima.

    Você pode fazer por Json também, costumo usar para disparar mensagens de sucesso ou falha na atualização dos forms ajax dos meus sistemas.

    No controlador:

     

     public ActionResult Formulario(int id)
            {
                         
                    //Fazer alguma coisa
                    if (algumacoisa == success)
                    {
                        return Json(new { Message = "Atualizado com sucesso!", Type = "alert", VariavelQueEuQuiser = "aqui!" }, JsonRequestBehavior.AllowGet);
                    }

    }

     

    Depois disso é só voce setar um método de callback no AjaxBeginform pra tratar o retorno em Json:

     

    <%using (Ajax.BeginForm("Formulario", "UnidadeFederativa", new AjaxOptions() { LoadingElementId = "loading", OnSuccess = "formSubmited" }))
    
    }%>

     

     

    No método de callback você pode usar esses dados como quiser(inclusive seta-los nos seus campos via js)

     

     

    function formSubmited(Message) {
        var json_data = Message.get_response().get_object(); //Você tem que fazer isso para converter para objetos o Json, pelo menos assim que fucionou aqui :)
        //Fazer algo com: json_data["Type"], json_data["Message"], json_data["VariavelQueEuQuiser"]    
    
    }

     


    www.twitter.com/wirebane Se a resposta te ajudar, marque como útil.
    quinta-feira, 17 de junho de 2010 14:04