ASP.NET MVC | jQuery 대화 상자 위젯을 사용하여 모달 대화 상자를 표시하는 문제

Question

나는 asp.net mvc 및 jQuery에 매우 신선합니다. 언젠가 시도한 후에도 사용자가 링크를 클릭하는 동안 작업 (JsonResult 반환)의 데이터를 사용하여 jQuery 대화 상자를 팝업하는 방법을 알지 못합니다.

어떤 제안이나 지침을 주셔서 감사합니다.

감사합니다.

Answer 1

스턴트 (Thunt for Stuntz) & 마지막으로 RhinoDevX64 님의 답장을 보내드립니다.

jQuery를 코드 :

<script type="text/javascript"> 
    $(function() { 
     $('.newsitem').click(function() { 
      var $thisLink = $(this); 

      $('#dialog').empty(); 

      $.getJSON($thisLink.attr("href"), function(data) { 
       $('#dialog').html(data.content); 

       $("#dialog").dialog({ 
        autoOpen: false, 
        title: data.title, 
        bgiframe: true, 
        modal: true, 
        height: 450, 
        width: 540, 
        buttons: { 
         '关闭': function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 

       $('#dialog').dialog('open'); 
      }); 

      return false; 
     }); 
    }); 

ActionLink

<%= Html.ActionLink(item.Title, "GetByJs", "Article", new { id = item.ID }, new { @class = "newsitem" })%> 

액션 코드

public ActionResult GetByJs(Guid id) 
    { 
     var item = Article.SingleOrDefault(a => a.ID == id && a.AtFront == true); 

     var jsonData = new { title = item.Title, content = item.BodyContent }; 

     return new JsonResult 
     { 
      Data = jsonData 
     }; 
    } 

Answer 2

var ph = $("#idOfPlaceHolderInPage"); 
ph.load(/Controller/SomeActionWhichReturnsPartialView, function() { 
    // this callback will be called after your partial view loaded into placeholder 
    ph.dialog({ 
     // pass options here to customize dialog 
    }); 
}); 

Answer 3

첫 번째 사용 jQuery UI은 css 및 js 파일을 포함하는 문서를 따릅니다.

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript" ></script> 
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> 
<link href="../../Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#idOfModalPlaceholder").dialog({autoOpen: false, title:"MODAL TITLE"}); 
    }); 

    function OpenModalGetContent(){ 
     $("#idOfModalPlaceHolder").load("/Controller/View"); 
      $("#idOfModalPlaceHolder").dialog('open'); 
     } 
</script> 
<a href="#" onclick="OpenModalGetContent()">CLICK HERE FOR MODAL</a> 

2 당신은 정말 그냥 일반 ActionResult과 부분보기를 사용해야합니다 (*의 .ascx), 당신은 단지 일부 콘텐츠를 잡는 경우; 데이터를 호출하는 경우이 시나리오와 완전히 다른 자동 완성으로 로딩한다고 가정합니다.