Visualización de datos en json de Ajax y mostrar en JQuery Diálogo con en MVC3 Ver

Tengo el Siguiente ActionResult en un Controlador. devuelve una fila de datos(como id, nombre, ciudad, etc) a partir de la base de datos dependiendo de la IDENTIFICACIÓN de

    [HttpPost]
    public ActionResult Get(Guid Id)
    {
        Ref imp = ReadRepository.GetById(refImpId);
        var ijson =  new JsonResult() { Data = imp.ToJson() };
        return ijson;
    }

el Siguiente es el JQuery y Ajax de Jquery Diálogo.

$(".ImpList").click(function (e) {

    // get the imp id
    var refImpId = $(this).next('#impId').val();
    var impgeturl = $('#impgeturl').val();
    var imptoedit = null;

    $.ajax({
        type: 'post',
        url: impgeturl,
        data: '{ "refImpId": "' + refImpId + '" }',
        contentType: "application/json; charset=utf-8",
        traditional: true,
        success: function (data) {
            imptoedit = jQuery.parseJSON(data);


            $("#editImpDialog").dialog({
                width: 350,
                height: 220,
                modal: true,
                draggable: false,
                resizable: false,
            });

        },
        error: function (request, status, error) {
            alert(e);  // TODO:  need to discuss ajax error handling and form reset strategy.
        }
    });
});

$("#cancelEditImpBtn").click(function (e) {
    e.preventDefault();
    $('#editImpDialog').dialog("close");
});

$("#saveEditImpBtn").click(function (e) {
    e.preventDefault();
    $("form").submit();
});

Tengo un cuadro de Diálogo, en mi Opinión. Necesito Mostrar los Datos Json en el diálogo Jquery. ¿Cómo puedo hacer eso?

  • Usted no está utilizando el parámetro en la Acción. Su código es realmente eso?
InformationsquelleAutor InCommand | 2012-04-05

3 Kommentare

  1. 1
    $.post("/echo/json/",function(data){
     //in actuality the json will be parsed here
        var d = '{"id":"1","name":"john","age":26}';
        var json = $.parseJSON(d);
        $("<div/>",{text:json.name+" "+json.age}).appendTo("body");
        $("div").dialog();
    
    },'json')

    DEMO

  2. 1

    Hay un montón de maneras de hacerlo. Aquí está un ejemplo: http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json—jsonresult-and-jquery.aspx

    Básicamente, usted tiene acceso a las propiedades de la data parámetro de la success controlador.

    ...
    success: function (data) {
        alert(data.property);
    }
    ...

    Una cosa a tener en cuenta es agregar el dataType: "json" opción en la llamada AJAX, así que usted no tiene que analizar los datos después de su recepción.

  3. 0

    Este código funciona bien para mí:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>JSON Dialog</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.5.5/jsoneditor.min.css" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0-rc.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0-rc.2/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.5.5/jsoneditor.min.js"></script>
    
        <script>    
            function jsonDialog(jsonobj, modes, okcallback, cancelcallback, errorcallback) {
                if (jsonobj === undefined || jsonobj === null) {
                    if (errorcallback !== undefined)
                        errorcallback("JSON Object is not valid");
                    return false;
                }
    
                var jsoncontent = document.createElement('div');
                jsoncontent.style.display = "none";
                document.body.appendChild(jsoncontent);
    
                var jsoneditor = document.createElement('div');
                jsoneditor.style.width = '398px';
                jsoneditor.style.height = '500px';
                jsoncontent.appendChild(jsoneditor);
    
                if (modes === undefined || modes === null)
                    modes = {mode: 'tree', modes: ['form', 'text', 'tree', 'view']};
    
                var editor = new JSONEditor(jsoneditor, modes);
                editor.set(jsonobj);
    
                var destroy = function() {
                    editor.destroy();
                    jsoneditor.remove();
                    $(jsoncontent).dialog('close');
                    jsoncontent.remove();   
                    $('.ui-dialog').remove();
                };
    
                $(jsoncontent).dialog({
                    height: 560,
                    width: 400,
                    modal: true,
                    resizable: false,
                    position: {
                        my: "center",
                        at: "center",
                        of: window
                    },
                    buttons: [{
                        text: "OK",
                        style:"margin-right:40px; color:#3883fa;",
                        click: function () {
                            var result = editor.get();
                            destroy();
                            if (okcallback !== undefined)
                                okcallback(result);                     
                        }
                    }, {
                        text: "Cancel",
                        style:"color:#EE422E;",
                        click: function () {
                            destroy();
                            if (cancelcallback !== undefined)
                                cancelcallback();
                        }
                    }]
                });
                $(".ui-dialog-titlebar-close").css('visibility','hidden');
                $(".ui-dialog-titlebar").css('visibility','hidden');
                $(".ui-dialog").css('border-style','none');
                $(".ui-dialog").css('text-align','center');
                $(".ui-button").css('width','100px');
                $(".ui-button").css('margin-top','10px');
                $(".ui-button").css('margin-bottom','10px');
                return true;
            }
    
            $(document).ready(function() {
                $("#test").click(function() {
    
                    var jsonstr = '{"key": [1, 2, 3],"anotherkey": true,"somekey": null,"anykey": 123,"justakey": {"a": "b", "c": "d"},"otherkey": "Hello World"}';
    
                    var jsonobj = JSON.parse(jsonstr); //MANDATORY
                    var modes = {mode: 'tree', modes: ['form', 'text', 'tree']}; //OPTIONAL
                    var okcallback = function(jsonobj){ alert( JSON.stringify(jsonobj)); }; //OPTIONAL
                    var cancelcallback = function(){ }; //OPTIONAL
                    var errorcallback = function(e){ alert(e); }; //OPTIONAL
    
                    jsonDialog(jsonobj, modes, okcallback, cancelcallback, errorcallback);
                });
            });
        </script>
    </head>
    <body>
        <button id="test">Test</button>
    </body>
    </html>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea