[JQUERY] ASP.NET MVC에 jQuery를 사용하여 부분 뷰를 렌더링

ASP.NET MVC에 jQuery를 사용하여 부분 뷰를 렌더링

해결법

1. ---

   1.당신은 jQuery를 사용하여 부분 뷰를 렌더링 할 수 없습니다. 당신은, 그러나, 당신을위한 부분 뷰 렌더링 및 jQuery를 / AJAX를 사용하여 페이지에 추가하는 방법 (행동)을 호출 할 수 있습니다. 아래에서는 부하가 DIV를 대체하는 GET 요청 전원 버튼과 화재에 대한 데이터 속성에서 작업의 URL이 업데이트 된 내용으로 부분 뷰에 포함하는 버튼을 클릭 핸들러가 있습니다.

   당신은 jQuery를 사용하여 부분 뷰를 렌더링 할 수 없습니다. 당신은, 그러나, 당신을위한 부분 뷰 렌더링 및 jQuery를 / AJAX를 사용하여 페이지에 추가하는 방법 (행동)을 호출 할 수 있습니다. 아래에서는 부하가 DIV를 대체하는 GET 요청 전원 버튼과 화재에 대한 데이터 속성에서 작업의 URL이 업데이트 된 내용으로 부분 뷰에 포함하는 버튼을 클릭 핸들러가 있습니다.

   $('.js-reload-details').on('click', function(evt) {
       evt.preventDefault();
       evt.stopPropagation();
   
       var $detailDiv = $('#detailsDiv'),
           url = $(this).data('url');
   
       $.get(url, function(data) {
           $detailDiv.replaceWith(data);         
       });
   });
   

   사용자 컨트롤러는 않습니다 조치라는 이름의 세부 사항을 가지고 여기서

   public ActionResult Details( int id )
   {
       var model = ...get user from db using id...
   
       return PartialView( "UserDetails", model );
   }
   

   이것은 당신이 단지 호출 결과의 내용으로 전체 일을 대체 있도록 부분보기가 ID를 detailsDiv와 용기가 있다고 가정한다.

   상위보기 버튼

    <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
            class="js-reload-details">Reload</button>
   

   사용자가 컨트롤러의 이름이고 세부 Url.Action @에서 작업 이름 ()입니다. 일부보기 된 UserDetails

   <div id="detailsDiv">
       <!-- ...content... -->
   </div>
   

2. ---

   2.나는이 작업을 수행하는 데 사용 아약스로드를 가지고 :

   나는이 작업을 수행하는 데 사용 아약스로드를 가지고 :

   $('#user_content').load('@Url.Action("UserDetails","User")');
   

3. ---

   3.그의 대답에 @tvanfosson 바위.

   그의 대답에 @tvanfosson 바위.

   그러나, 나는 JS 내 개선과 작은 컨트롤러 검사를 제안했다.

   우리가 작업을 호출 할 @url 도우미를 사용하는 경우, 우리는 HTML 형식을받을 것입니다. 콘텐츠 (.html)을하지 실제 요소 (.replaceWith)를 업데이트하는 것이 좋습니다 것입니다.

   상세 정보에서 : jQuery를 replaceWith ()와 HTML ()의 차이점은 무엇입니까?

   $.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
       $('#detailsDiv').html(data);
   }); 
   

   이 내용이 여러 번 변경 될 수 있습니다 나무에 특히 유용하다.

   컨트롤러에서 우리는 요청에 따라 작업을 다시 사용할 수 있습니다 :

   public ActionResult Details( int id )
   {
       var model = GetFooModel();
       if (Request.IsAjaxRequest())
       {
           return PartialView( "UserDetails", model );
       }
       return View(model);
   }
   

4. ---

   4.당신이 (tvanfosson의 답변에 따라) 시도 할 수있는 또 다른 점은 이것이다 :

   당신이 (tvanfosson의 답변에 따라) 시도 할 수있는 또 다른 점은 이것이다 :

   <div class="renderaction fade-in" 
       data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>
   

   그리고 페이지의 스크립트 섹션에서 :

   <script type="text/javascript">
       $(function () {
           $(".renderaction").each(function (i, n) {
               var $n = $(n),
                   url = $n.attr('data-actionurl'),
                   $this = $(this);
   
               $.get(url, function (data) {
                   $this.html(data);
               });
           });
       });
   
   </script>
   

   이 아약스를 사용하여 @ Html.RenderAction 렌더링합니다.

   그리고 당신이 CSS를 사용하여 효과 페이드-A를 추가 할 수있는 모든 fansy의 sjmansy을 만들려면 :

   /* make keyframes that tell the start state and the end state of our object */
   @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
   @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
   @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
   
   .fade-in {
       opacity: 0; /* make things invisible upon start */
       -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
       -moz-animation: fadeIn ease-in 1;
       -o-animation: fadeIn ease-in 1;
       animation: fadeIn ease-in 1;
       -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
       -o-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
       -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
       animation-duration: 1s;
   }
   

   남자 I 사랑 MVC :-)

5. ---

   5.당신은 당신의 컨트롤러에 액션을 만들어야 그 반환 "된 UserDetails"부분보기 또는 컨트롤의 렌더링 결과. 그럼 그냥 렌더링 된 HTML을 표시 할 얻을 수있는 액션을 호출하는 jQuery를에서 HTTP GET 또는 포스트를 사용합니다.

   당신은 당신의 컨트롤러에 액션을 만들어야 그 반환 "된 UserDetails"부분보기 또는 컨트롤의 렌더링 결과. 그럼 그냥 렌더링 된 HTML을 표시 할 얻을 수있는 액션을 호출하는 jQuery를에서 HTTP GET 또는 포스트를 사용합니다.

6. ---

   6.표준 Ajax 호출을 사용하여 동일한 결과를 달성하기 위해

   표준 Ajax 호출을 사용하여 동일한 결과를 달성하기 위해

           $.ajax({
               url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
               type: 'GET',
               error: function (xhr) {
                   alert('Error: ' + xhr.statusText);
   
               },
               success: function (result) {
   
                   $('#divSearchResult').html(result);
               }
           });
   
   
   
   
   public ActionResult _SearchStudents(string NationalId)
           {
   
              //.......
   
               return PartialView("_SearchStudents", model);
           }
   

7. ---

   7.나는 이런 식으로했다.

   나는 이런 식으로했다.

   $(document).ready(function(){
       $("#yourid").click(function(){
           $(this).load('@Url.Action("Details")');
       });
   });
   

   세부 방법 :

   public IActionResult Details()
           {
   
               return PartialView("Your Partial View");
           }
   

8. ---

   8.당신이 동적으로 생성 된 값을 참조해야하는 경우는 또한 같은 URL.Action @ 애프터 쿼리 문자열 paramters를 추가 할 수 있습니다 :

   당신이 동적으로 생성 된 값을 참조해야하는 경우는 또한 같은 URL.Action @ 애프터 쿼리 문자열 paramters를 추가 할 수 있습니다 :

       var id = $(this).attr('id');
       var value = $(this).attr('value');
       $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);
   
   
       public ActionResult Details( int id, string value )
       {
           var model = GetFooModel();
           if (Request.IsAjaxRequest())
           {
               return PartialView( "UserDetails", model );
           }
           return View(model);
       }
   

from https://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc by cc-by-sa and MIT license