none
Post ajax e refresh table RRS feed

  • Pergunta

  • Boa tarde galera...

    Estou me batendo para fazer algo simples, tenho uma página e preciso fazer com que o usuário possa postar algum comentário. Este post deve ser Ajax e no retorno deve fazer um loop e adicionar div referente ao comentário.

    Mas não consigo fazer um exemplo de teste bem simples , algum pode me dar uma força ?

    Controller

    [HttpPost]
            public ActionResult PostComentario(string id)
            {
               
                List<DadosCrmModelMsg> listaUsuarios = new List<DadosCrmModelMsg>();
                listaUsuarios.Add(new DadosCrmModelMsg
                {
                   id = 1,
                   msg = "Jose Carlos"
                });
         
                listaUsuarios.Add(new DadosCrmModelMsg
                {
                   id = 2,
                   msg = "Jose Luiz "
                });
                  
                   return Json(new { success = false, data = listaUsuarios }, JsonRequestBehavior.AllowGet);
            }

    View:

     <script type="text/javascript">
        $(function () {
            // Document.ready -> link up remove event handler
            $(".PostComente").click(function () {
                // Get the id from the link
                debugger;
                var recordToUpdate = $(this).attr("data-id");
    
                if (recordToDelete != '') {
                    $.ajax({
                        type: "POST",
                        contentType: "json",
                        data: JSON.stringify("id:" + recordToUpdate),
                        url: "@Url.Action("PostComentario", "Account")",
                        success: function (data) {
                            //aqui nao entra so sucesso
                            //tb nao sei se o each ta certo
                            $.each(data, function (i) {
                                $('#msg').html(i.msg);
    
                            });
                        },
                        error: errorFunc
                    });
    
                    
                    function errorFunc() {
                        alert('error');
                    }
                }
            });
    
        });
    
    </script>


    Isco Sistemas José Luiz Borges

    sábado, 6 de agosto de 2016 20:15

Respostas

  • Buenas vamos lá..

    Você precisará separar a sua div de retorno em uma partial view

    para exemplificar, no  meu caso usarei um cadastro de especialidade

    View de Cadastro - no seu caso usará de comentário

    @model EspecialidadeModel
    
    @using (Ajax.BeginForm(actionName: "InserirEspecialidade", controllerName: "Conveniado",
                                                ajaxOptions: new AjaxOptions()
                                                {
                                                    HttpMethod = "POST",
                                                    InsertionMode = InsertionMode.Replace,
                                                    UpdateTargetId = "especialidadesDiv"
                                                }))
    {
        @Html.AntiForgeryToken()
    
        @Html.HiddenFor(model => model.ConveniadoId)
        <div class="row form-group">
            <div class="col-lg-3">
               
                @Html.LabelFor(model => model.EspecialidadeId, htmlAttributes: new { @class = "control-label" })
                @Html.DropDownListFor(model => model.EspecialidadeId, Model.ListaEspecialidades(), new { @class = "form-control", @autofocus = "" })
                @Html.ValidationMessageFor(model => model.EspecialidadeId, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="row form-group">
            <div class="col-lg-12">            
                <button type="submit" class="btn btn-primary"><i class="fa fa-save fa-fw"></i> Salvar</button>
            </div>
        </div>
        
    }

    View que listará minhas especialidades 

    @model List<ConveniadoEspecialidadeModel>
    
    
    @* *********************************************************
        *************    PAINEL ESPECIALIDADES    *****************
        *********************************************************** *@
    @using (Ajax.BeginForm(actionName: "ExlcuirEspecialidadeConveniado", controllerName: "Conveniado",
                                                                                                            ajaxOptions: new AjaxOptions()
                                                                                                            {
                                                                                                                HttpMethod = "POST",
    
                                                                                                                UpdateTargetId = "especialidadesDiv"
                                                                                                            }))
    
    {
    
       
        <div id="especialidadesDiv">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="col-lg-1"></th>
                        <td>
                            Especialidades
                        </td>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
    
                            <td>
    
                                @Ajax.ActionLink(linkText: "Excluir", 
                                            actionName: "ExcluirEspecialidadeConveniado",
                                            controllerName: "Conveniado",
                                            routeValues: new { conveniadoId = item.ConveniadoId, especialidadeId = item.EspecialidadeId },
                                            ajaxOptions: new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "especialidadesDiv" },
                                            htmlAttributes: new { @class = "btn btn-danger" })
    
    
                            </td>
                            <td>
                                @item.Especialidade
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
    

    Se fores repartir em duas partial views (exemplificadas acima) poderá usar o seguinte na sua view principal

       <div class="panel panel-default">
                <div class="panel-heading">
                    <label>Especialidades</label>
                </div>
                <div class="panel-body">
    
                    @*para incluir especialidades do conveniado*@
                    @Html.Partial("_Especialidade", new EspecialidadeModel() { ConveniadoId = Model.ConveniadoId })
    
                    @*para listar as especialidades do conveniado*@
                    <div id="especialidadesDiv">
                        @Html.Partial("_Especialidades", Model.ConveniadoEspecialidades)
                    </div>
                </div>
            </div>
    Repare que ao retornar do controller eu retorno para _Especialidades

    Controller

    [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult InserirEspecialidade(EspecialidadeModel model)
            {
    
                if (ModelState.IsValid)
                {
                    var conveniado = context.Conveniado
                        .Include(a => a.Especialidades)
                        .FirstOrDefault(a => a.ConveniadoId == model.ConveniadoId);
    
                    var especialidade = context.Especialidade
                        .Find(model.EspecialidadeId);
    
                    conveniado.Especialidades.Add(especialidade);
                    context.SaveChanges();
    
                    var dados = conveniado.Especialidades
                    .Select(a => new ConveniadoEspecialidadeModel()
                    {
                        EspecialidadeId = a.EspecialidadeId,
                        ConveniadoId = conveniado.ConveniadoId,
                        Especialidade = a.Descricao
                    }).ToList();
    
                    return PartialView("_Especialidades", dados);
                }
    
                return View();
    
            }

       Assim será apenas recarregado a view de listagem e não toda a página.
    • Editado Lucas Ost segunda-feira, 8 de agosto de 2016 13:24 acrescentar conteúdo
    • Sugerido como Resposta Lucio Rogerio SPBanned segunda-feira, 8 de agosto de 2016 14:49
    • Marcado como Resposta Jose Luiz Borges segunda-feira, 8 de agosto de 2016 15:01
    segunda-feira, 8 de agosto de 2016 13:23