Anzeige der json-Daten aus Ajax und Anzeige auf JQuery Dialog mit in MVC3 Anzeigen

Habe ich Folgendes ActionResult in einem Controller. es gibt eine Reihe von Daten(z.B. id, name, Ort etc) aus der Datenbank abhängig von der ID

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

Folgenden ist die JQuery und Ajax-Jquery-Dialog.

$(".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();
});

Ich habe einen Dialog in meinen Augen. Ich brauche die Anzeige der Json-Daten in der Jquery dialog. Wie kann ich das tun?

Sie sind nicht die parameter, die auf die Aktion zu Erhalten. Dein code ist wirklich, dass?

InformationsquelleAutor InCommand | 2012-04-05

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

InformationsquelleAutor Rafay

1

Gibt es eine Reihe von Möglichkeiten, dies zu tun. Hier ist ein Beispiel: http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

Im Grunde, Sie haben den Zugriff auf die Eigenschaften der data parameter der success hf.
```
...
success: function (data) {
    alert(data.property);
}
...
```
Eine Sache zu beachten ist, fügen Sie die dataType: "json" option auf der AJAX-Aufruf, so dass Sie nicht haben, um die Daten analysieren, nachdem Sie es empfangen.

InformationsquelleAutor Ricardo Souza

Dieser code funktioniert gut für mich:

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

InformationsquelleAutor AnonymousDC

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.