Ajaxからjsonデータを表示し、MVC3でJQueryダイアログに表示する

私は以下のActionResultをコントローラに持っています。それがIDAjaxからjsonデータを表示し、MVC3でJQueryダイアログに表示する

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

に応じてデータベースから（例えば、ID、名前、都市などのような）データの行に続いてjQueryのダイアログのjQueryとAjaxのあるを返します。

$(".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ダイアログに表示する必要があります。どうやってやるの？

出典

2012-04-05 InCommand

あなたがGETアクションにパラメータを使用していません。あなたのコードは本当にそれですか？ – rcdmk

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

出典

2012-04-05 20:53:29 Rafay

はそれを行う方法の束があります。次に例を示します。http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

基本的には、successハンドラのdataパラメータのプロパティにアクセスする必要があります。注意すべき

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

ことの一つは、あなたがそれを受け取った後にデータを解析する必要はありませんので、AJAX呼び出しでdataType: "json"オプションを追加することです。

出典

2012-04-05 20:54:16 rcdmk

このコードは私のためによく働く：

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

出典

2016-06-08 21:14:41 AnonymousDC

Ajaxからjsonデータを表示し、MVC3でJQueryダイアログに表示する

答えて

関連する問題