0

@model IEnumerable<Cliente>

@{
    ViewData["Title"] = "Registrar Soporte SysCafé";
    var nit = ViewData["nit"];
}

<div class="section">
    <div class="row well well-sm">
        <h2 class="col-lg-12">Registrar Soporte</h2>
    </div>
    <div class="row center-block">
        <form asp-action="ObtenerCliente" class="col-lg-8 row" method="post" id="form1">
            <div class="container row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <div class="input-group user">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-user"></span>
                            </span>
                            <input name="nit" type="text" class="form-control" autofocus="autofocus" placeholder="Ingrese el Nit del Cliente" value=@nit />
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-search"></span>
                            </span>
                            <button name="submit" class="form-control btn btn-primary">Buscar</button>
                        </div>
                    </div>
                </div>
                @if (ViewBag.Message != null)
                {
                    <div class="col-lg-4 col-md-6 small">
                        <div class="alert alert-danger text-danger">@ViewBag.Message</div>
                    </div>
                }

            </div>
        </form>

    </div>
</div>

@if (Model != null && Model.Count() > 1)
{
    <div class="row center-block">
        <div class="col-lg-12">
            <div class="form-group">
                <form id="form2">
                    <p id="demo"></p>
                    <select multiple class="form-control" id="client" onchange="asignarCliente(this.value)" size="5">
                        @foreach (var item in Model)
                        {
                            <option [email protected]>@item.Razonsocial</option>
                        }
                    </select>
                </form>
            </div>
        </div>
    </div>
}
else if (Model != null)
{
    @foreach (var item in Model)
    {
        <div class="col-lg-12 col-lg-12 col-md-12 col-sm-12 col-xm-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xm-12 well well-sm">
                @if (item.DarSoporte == true)
                {
                    <div class="form-check col-lg-1 col-md-1 col-sm-1 col-xm-12">
                        <input type="checkbox" checked disabled />
                        <label class="form-check-label text-danger small">No Dar Soporte</label>
                    </div>
                }
                else
                {
                    <div class="form-check col-lg-1 col-md-1 col-sm-1 col-xm-12">
                        <input type="checkbox" disabled />
                        <label class="form-check-label text-success small">Dar Soporte</label>
                    </div>
                }
                <h4 class="text text-left col-lg-8 col-md-8 col-sm-8 col-xm-12"><a asp-action="Cliente" asp-controller="Cliente" [email protected]>@item.Razonsocial</a></h4>
                @Html.Partial("_CrearContacto", new ContactoViewModel { ClienteID = item.Codigo})
            </div>
        </div>
        @Html.Partial("_CrearActividad", new ActividadViewModel { Contactos = item.Contactos, Cliente = item.Codigo })
    }
}

<script>
    $(document).ready(function ()
    {
        $("#frm2").on("submit", function (e)
        {
            e.preventDefault();
            $.ajax({
                url: $(this).attr('action'),
                type: "POST",
                data: $(this).serialize(),
                success: function (data)
                {
                    if (data.list != null)
                    {
                        var html = "";
                        for (var i = 0; i < data.list.length; i++)
                            html += '<option value="' + data.list[i].Id + '">' + data.list[i].Nombre + '</option>'
                        $("#selectform1").html(html);
                    }
                },
                error: function (error)
                {
                    alert(error);
                }
            });
        });
    });
    </script>

Tengo una vista maestra, en esa vista tengo dos vistas parciales, cada una con un form, una de ellas agrega un elemento a un select list de la otra, ¿como puedo refrescar solamente la lista de la primera vista parcial al realizar un post con la segunda?

Este es el metodo que hace el registro, y por ahora lo unico que sé hacer es que refresque la vista maestra, por lo tanto, los datos se pierden.

[HttpPost]
    public async Task<IActionResult> CrearContacto(IFormCollection form)
    {
        if (!ModelState.IsValid)
        {
            return NotFound();
        }

        var contacto = new Contacto
        {
            Nombre = form["nombre"],
            Telefono1 = form["telefono"],
            Cargo = form["cargo"],
            ClienteID = form["cliente"]
        };

        if (!await _contactoService.CrearContactoAsync(contacto))
        {
            return new JsonResult(new Result()
            {
                msg = "No se pudo crear el contacto",
                list = null
            });
        }

        var contactos = await _contactoService.GetContactosAsync(form["cliente"]);

        return new JsonResult(new Result()
        {
            msg = "El contacto se agregó correctamente",
            list = contactos
        });
    }
9
  • Puedes añadir el código de tu vista maestra para darte una respuesta según como tengas dicha pagina. el 9 mar. 2018 a las 15:14
  • @bercklynCarlosviza ya la agregué el 9 mar. 2018 a las 15:19
  • ¿Que quieres refrescar exactamente del primer form cuando se ejecute el segundo form? el 9 mar. 2018 a las 15:21
  • @bercklynCarlosviza El cliente tiene Contactos, el segundo form crea un contacto, en el primer hay select list para escoger un contacto, entonces al momento de ejecutar el segundo form, se debe actualizar solo ese select list el 9 mar. 2018 a las 15:42
  • ¿Tienes limitaciones sen usar Jquery? el 9 mar. 2018 a las 15:57

1 respuesta 1

0

Para la solución usare Jquery.

Vista Maestra

Como primer paso sera agregar el script de abajo a tu vista maestra. En general lo que haremos prevenir el submit de tu form, hacer una peticion ajax que enviara tu formulario y que se realice la función agregar y según lo que devuelva actualizar el select del otro form .En esta parte uso la función preventDefault() , on(), .ajax() y .html().

   // aqui  le digo que se ejecute la funcion submit donde envio tu 
   // formulario sin recargar la pagina
   // haya terminado de cargar la pagina
    $(document).ready(function () {
    // A modo de ejemplo tu primer form tendra de id frm1 y 
    // el segundo frm2
   //  Aqui con la funcion on() capturo el momento en que se realiza
   // la funcion submit de tu formulario
    $("#frm2").on("submit", function (e) {
        // el preventDefault() hara que se detenga la función submit
        e.preventDefault();
       // este seria el reemplazo de tu función la cual 
        $.ajax({
            url: $(this).attr('action'), // esto ya esta declaro en tu form2
            type: "POST", // aqui pones el tipo de metodo que usaras
            data: $(this).serialize(), // se serializa tu form  para ser enviado
            success: function (data) {  //si se ejecuta bien, ocurre esta función en donde data es tu respuesta. 
                 // mas abajo explico que devolverás de respuesta un model Result para manejar mensajes y objetos devueltos para listar.

               //Si se agrego te devuelve la data.list llena sino null.

              if(data.list !=null){
                var html="";
                for(var i=0;i<data.list.length;i++)
                    html +='<option value="' +  data.list[i].Id + '">' + data.list[i].Nombre+'</option>'

                //asumiendo  que el id de tu select del primer form es selectform1
                // agregamos el html constructor del tag option con los datos de la lista de contacto que obtienes
                $("#selectform1").html(html);
             }

             //aquí puedes añadir una función que muestre el mensaje de que se guardo o no tu contacto
            // para obtener el mensaje solo usa data.msg


            },
            error: function (error) { //ejecuta esta funcion si hay un error
                alert(error);
            }
        });


    });
});

Controller

En tu controller lo que harás sera recibir un IFormCollection que tendrá tus elementos del form que enviaste y podrás acceder a su valor usando como id el name del tag, de ahí sacaras los valores para tu ViewModel Contacto. Como respuesta devolveras el Model Result que tiene como atributos un msg (el mensaje) y una lista de contactos.

    [HttpPost]
    public async Task<IActionResult> CrearContacto( IFormCollection form)
    {
      if (!ModelState.IsValid)
      {
          return NotFound();
      }

      var contacto = new Contacto
      {
          Nombre = form["nombre"], //este es una referencia de  que tu campo nombre tiene el atributo name="nombre" sino es asi ponle el correcto
          Telefono1 = form["telefono"],
          Cargo = form["cargo"],
          ClienteID = form["cliente"]
      };


      if (!await _contactoService.CrearContactoAsync(contacto))
      {
         return new JsonResult(new Result(){
                            msg="No se pudo crear el contacto",
                            list=null});
      }

      var contactos = await _contactoService.GetContactosAsync(model.ClienteID);


      return new JsonResult(new Result(){
                            msg="El contacto se agregó correctamente",
                            list=contactos});
    }

Model Result

    public class Result
    {
        public string msg { get; set; }
        public List<Contacto> list { get; set; }
    }
9
  • Acabe de probar la solución que me envias, y al momento de ejecutar el boton de agregar el contacto, muestra la imagen que actualice en la pregunta. el 9 mar. 2018 a las 22:24
  • @SebastianRico cuando recibes la respuesta como la muestras. Dame un ejemplo de codigo. el 9 mar. 2018 a las 22:41
  • En el controlador? por ahora solo lo tengo devolviendo el Jsonresult, tal cual el controlador que me enviaste el 9 mar. 2018 a las 23:00
  • me refiero en el html donde agregaste la funcion JQuery. el 9 mar. 2018 a las 23:01
  • ya lo actualicé el 9 mar. 2018 a las 23:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.