Question

我在Controller中有以下ActionResult。它根据ID

从数据库返回一行数据（如id，name，city等）

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

以下是JQuery和Ajax for 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();
});

我的视图中有一个对话框。我需要将Json数据显示到Jquery对话框中。我怎么能这样做？

Answer 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

Answer 2

有很多方法可以做到这一点。以下是一个示例：http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

基本上，您必须访问data处理程序的success参数的属性。

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

需要注意的一件事是在AJAX调用中添加dataType: "json"选项，因此您不必在收到数据后对其进行解析。

Answer 3

此代码适用于我：

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

显示来自Ajax的json数据，并在MVC3 View中显示在JQuery Dialog上

3 个答案: