none
Modal MVC error RRS feed

  • Pregunta

  • Buen dia,

    Tengo una tabla y requiero mostrar los detalles dependiendo lo que seleccione (se tiene que mostrar en un modal)

    Tengo este javascript:

    var TeamDetailPostBackURL = '/Views/Areas/detailTablero';
    $(function () {
        $(".showDetail").click(function () {
            debugger;
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var options = { "backdrop": "static", keyboard: true };
            $.ajax({
                type: "GET",
                url: TeamDetailPostBackURL,
                contentType: "application/json; charset=utf-8",
                data: { "Id": id },
                datatype: "json",
                success: function (data) {
                    debugger;
                    $('#content_detail').html(data);
                    $('#myModal2').modal(options);
                    $('#myModal2').modal('show');
    
                },
                error: function () {
                    alert("Horroooor!!");
                }
            });
        });
    
        $("#closbtn").click(function () {
            $('#myModal2').modal('hide');
        });
        });

    Y esta es mi vista donde se encuentra el modal

    @model PalVm
    
    
    <div>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel2">Detalle d</h3>
        </div>
    
        <div id="content_detail" class="modal-body">
            <div>
                <h4>Nombre del Compromiso: </h4>
                <p>@Model.Nombre </p>
                <h4>Descripción del Compromiso: </h4>
                <p>@Model.Descripcion </p>
                <h4>Resp </h4>
                <p>@Model.Res </p>
            </div>
        </div>
    </div>
    
    <div id='myModal2' tabindex="-1" role="dialog" class='modal right fade'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='content_detail'></div>
            </div>
        </div>
    </div>  
    @*
    

    Este es mi controlador

       public ActionResult detailTablero(int id)
            {
                try
                {
                    var data = new PalBl().GetRecordById(id);
                    return PartialView("detailTablero",data);
                }
                
                catch (Exception ex)
                {
                    throw ex;
                }
    
            }

    Al ejecutarlo me marca el siguiente error:

    Error en tiempo de ejecución de Microsoft JScript: Se esperaba un objeto


    nwgirl

    martes, 20 de marzo de 2018 16:33

Respuestas

Todas las respuestas

  • Si devuelve un PartialView, NO está devolviendo JSON, está devolviendo HTML.  En la llamada AJAX tiene que usar datatype HTML.

    Jose R. MCP
    Code Samples

    martes, 20 de marzo de 2018 16:58
    Moderador
  • hola

    lo primero que noto es que la url es incorrecta, nunca pones View como parte de la url, estas invocando un action del controlles, usa el @Url.Action()

    Action(String, String)

    var TeamDetailPostBackURL = '@Url.Action( "detailTablero", "nombreController")';

    despues el paremetro que envias no es un json, es un int simples, puedes enviarl como parte de la url

    $.ajax({ type: "GET", url: TeamDetailPostBackURL + '/' + id, contentType: "application/x-www-form-urlencoded; charset=UTF-8", success: function (data) {

    estas retornando html no json

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 20 de marzo de 2018 17:23
  • Buen dia  y muchas gracias por responder

    Ha quedado así, pero no me muestra el modal y no entra al Javascript

    (Me he agarrado un ejemplo que encontre) la verdad no se mucho de Javascript ni MVC, soy nueva en esto.

    Aqui al momento de hacer clic es cuando lo mando llamar

                    <td>
                        <div class="title"> @item.Nombre</div>
                        <a href="javascript:void(0);" data-id="@item.Id" class="showDetail" data-toggle="modal"  data-target="#myModal2">Ver detalles</a>
                        
                    </td>

    var TeamDetailPostBackURL = '@Url.Action("detailTablero", "detailTablero")'
    $(function () {
        $(".showDetail").click(function () {
            debugger;
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var options = { "backdrop": "static", keyboard: true };
            $.ajax({
                type: "GET",
                url: TeamDetailPostBackURL + '/' + id,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
              
                success: function (data) {
                    debugger;
                    $('#content_detail').html(data);
                    $('#myModal2').modal(options);
                    $('#myModal2').modal('show');
    
                },
                error: function () {
                    alert("Horroooor!!");
                }
            });
        });
    
        $("#closbtn").click(function () {
            $('#myModal2').modal('hide');
        });
        });
    


    nwgirl

    martes, 20 de marzo de 2018 19:38
  • hola

    >>Ha quedado así, pero no me muestra el modal y no entra al Javascript

    puedes validar en la consola del browser si hay algun error en javascript ? para acceder desde el browser presiona F12, y luego ve a la solapa Console, alli veras si hay algun mensaje

    si pones un break en el codigo del action en el controller se detiene la ejecucion? para ver si esta invocando al servidor

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 20 de marzo de 2018 20:16
  • Definitivamente parece que el código debería correr.  Lo que sí noto es que su código hace que se muestre el modal, pero también el código de Bootstrap lo hará.  No sé si Bootstrap está haciendo un $(elemento).click(), pero si lo está haciendo así, entonces su "Ver Detalles" tiene dos eventos que mostrarán el modal.  Bueno, un evento que lo mostrará (el suyo), y otro evento que, si está mostrándose lo oculta y está oculo lo muestra.  Quite $('#myModal2').modal('show'); y vemos si aparece el modal.

    Jose R. MCP
    Code Samples

    martes, 20 de marzo de 2018 23:03
    Moderador