Display json data from Ajax and display on JQuery Dialog with in MVC3 View

Question

I have the Following ActionResult in a Controller. it returns a row of data(such as id, name, city etc) from database depending on the ID

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

the Following is the JQuery and 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();
});

I have a Dialog in my View. I need to Display the Json Data into the Jquery dialog. How can i do that?

You are not using the parameter on the Get Action. Your code is realy that? — Ricardo Souza
– Ricardo Souza, Commented Apr 5, 2012 at 20:48

Rafay · Accepted Answer · 2012-04-05 20:53:29Z

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

answered Apr 5, 2012 at 20:53

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ricardo Souza · Accepted Answer · 2012-04-05 20:54:16Z

1

There are a bunch of ways of doing that. Here is an example: http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

Basically, you have to access the properties of the data parameter of the success handler.

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

One thing to note is to add the dataType: "json" option on the AJAX call, so you don't have to parse the data after receiving it.

answered Apr 5, 2012 at 20:54

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Comments

Laurel · Accepted Answer · 2016-06-08 21:34:10Z

This code works well for me:

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

Collectives™ on Stack Overflow

Display json data from Ajax and display on JQuery Dialog with in MVC3 View

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related