Json : JQuery를 사용하여 HTML로 표시 구문 분석

Question

ASP.NET MVC 1.0 웹 응용 프로그램에서 JSON 페이지의 데이터를 구문 분석하려고합니다. 이 데이터는 페이지로드시 테이블에 표시해야하며 이전에는 JSON을 사용한 적이 없기 때문에 많은 문제가 발생했습니다. JQuery 사이트는 꽤 끔찍한 예제도 제공한다. 위의 URL은 현재 단지 JSON을 표시하고 두 개의 열이 나는 JSON을 생산하는 SQL 서버에서 얻고

$("document").ready(function() { 
     $.getJSON("http://localhost:1909/encoders", 
      function(data) { 
       $.each(data.items, function() { 

       }); 
      }); 
    }); 

EncoderName 및 EncoderStatus 있습니다 : 이것은 내가 지금까지 가지고 내가 함수를 작성 도움이 필요한 것입니다. id는 displayencoders입니다.

감사합니다.

편집 : 내 컨트롤러는 다음과 같습니다

[UrlRoute(Name = "GetEncoders", Path = "encoders")] 
     public ActionResult GetEncoders() { 
      var encoders = Database.GetEncoders(); 

      return Json(encoders); 
     } 

/보이는 내/인코더를 컴파일 같은 때 충분히 재미있게

{ 

    * EncoderName: "rmcp2-encoder" 
    * EncoderStatus: "inactive" 

} 

Answer 1

$("document").ready(function() { 
    $.getJSON("http://localhost:1909/encoders", function(data) { 

     $("#div-my-table").text("<table>"); 

     $.each(data, function(i, item) { 
      $("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>"); 
     }); 

     $("#div-my-table").append("</table>"); 

    }); 
}); 

Answer 2

, 내가 거의 비슷한 방법을 사용하는 대신 JSON 구문 분석, 실제로 내 컨트롤러에서 도우미 메서드에서 JSON 구조에 HTML 서식을 적용합니다. 그래서 기본적으로 내 컨트롤러는 json 결과를 완전히 형식화하고 모든 jquery 함수는 관련 div (이 경우 $ ('# propertyList') .html (data)) 내에 배치해야합니다.

<script type='text/javascript'> 
    function GetLocationHighlites() { 
     $.ajaxSetup({ cache: false }); 
     $.getJSON('/en/Property/GetLocationHighlites/', null, 
      function(data) { JsonData(data); }); 
    } 

    function JsonData(data) { 
     if (data.length != 0) { 
      $('#propertyList').html(data); 
      $('#propertyList').slideDown('fast'); 
      return false; 
     } 
    }; 

    $(document).ready(function() { 
     GetLocationHighlites(); 
    }); 
</script> 

와 컨트롤러 :

위 JsonResult의 GetLocationHighlites()에서

public JsonResult GetLocationHighlites() 
    { 
     IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury); 
     string htmlBlock = string.Format(_block, block.Header, block.Content); 
     return Json(htmlBlock); 
    } 

_block가의 라인을 따라 문자열 상수는 다음과 같습니다 여기

은보기에 모양을 좀입니다

private string _block = @"<div class='Block'> 
         <div class='header'> 
         {0} 
         </div> 
         <div class='BlockContent-body'> 
         {1} 
         </div> 
        </div>"; 

필자가이 주제에 관해서 필자의 필자와 (내 약점) 시도 그것은 건조했다.

Answer 3

물론, (Json 결과가 아닌) 문자열을 대체로/대체 적으로 반환 할 수도 있습니다. 나는 실제로 위의 대답을 생각해보고 이것이 아마도 내 목적을위한 '최고의 경우'라는 것을 깨달았습니다. 보다는

$.get('/en/Property/GetLocationHighlites/' 

: 그래서 지금 (보기)가

$.getJSON('/en/Property/GetLocationHighlites/' 

과의 컨트롤러 기능을 수정 한 :이 물을 진흙하지 않는

public string GetLocationHighlites() 
{ 
    IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury); 
    string htmlBlock = string.Format(_block, block.Header, block.Content); 
    return htmlBlock; 
} 

희망을. ..