Usuário com melhor resposta
Post ajax e refresh table

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