Displaying json data from Ajax and displaying in JQuery dialog using MVC3 View
I have the following ActionResult in my controller. it returns a string of data (like id, name, city, etc.) from the 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;
}
Below are 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 dialogue in my view. I need to display Json Data in a JQuery dialog. How can i do this?
+3
source to share
3 answers
There are several ways to do this. Here's an example: http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx
Basically, you need to access the properties of the data
handler parameter success
.
...
success: function (data) {
alert(data.property);
}
...
Of note is the addition of the option dataType: "json"
to the AJAX call, so you don't need to parse the data after you receive it.
+1
source to share
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>
0
source to share