2009-09-16 3 views
3

페이지의 어딘가에 부분이있는 div가 있습니다. 버튼 하나에 이벤트가 있습니다. div를 가져 와서 다시로드하고 부분 뷰를 다시로드하는 Javascript를 작성하려면 어떻게해야합니까?jQuery를 사용하여 ASP.NET MVC에서 PartialView로 div를 다시로드하려면 어떻게해야합니까?

다른보기에도 있습니다. 하지만 지금은 이렇게 할 수 없습니다. 하지만 jQuery가 페이지에서 직접 실행하지 않고 동일한 작업을 수행해야합니다. 자바 스크립트도 jQuery 스크립트에서 simular 아약스 코드를 실행할 수 있습니까?

<% using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" })) 
    { %> 
<div id="feiertage"> 
    <% Html.RenderPartial("FeiertagTable"); %> 
</div> 
<% } %> 

답변

8

같은 클릭 이벤트 또는 무언가를 시작으로 나는 몇 가지 기본적인 컨트롤러 액션으로 시작할 수 있습니다 위의 스크립트를 실행할 수 있다면 내가 나를 도울 것 :

public class FeiertagController 
{ 
    IFeiertagService feiertagService = new FeiertagService(); 

    public ActionResult EditFeiertag() 
    { 
     // ... return your main edit view 
     return View(); 
    } 

    // Will be called by your jquery ajax call 
    public PartialResult GetFeiertagTable() 
    { 
     var feiertagData = messageService.getLatestFeiertagData(); 
     var viewModel = new FeiertagViewModel(); 
     feiertagViewModel.feirtagTableData = feiertagData; 

     return PartialView("FeiertagTableView", viewModel); 
    } 

} 

그래서, EditFeiertag ()는 전체 편집 페이지를 렌더링하는 데 사용되고이 페이지는 부분 뷰를 비동기 적으로 렌더링하려는 경우 GetFeiertagTable()을 호출합니다. 이 잘 작동 한 번 테이블을로드

<div id="Container"> 
    <div id="LeftPanel"> 
     // ... Some menu items 
    </div> 
    <div id="RightPanel"> 
     <a id="ReloadLink" href="#">Reload Table</a> 
     <div id="FeiertagTable> 
      <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %> 
     </div> 
    </div> 
</div> 

:

지금, 당신의보기에, 당신이 뭔가를 가지고 있다고 할 수 있습니다. 그러나 특정 요소 (여기서는 #ReloadLink)를 클릭하면 Feiertag 테이블을 다시로드하려고합니다.

는 페이지의 부분에 다음을 추가 한 후 JQuery와 load() 메서드를 호출하여 다시로드 링크 클릭 이벤트에 이벤트를 추가합니다

<head> 
     <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       $('#ReloadLink').click(function(e) 
       { 
        e.preventDefault(); // stop the links default behavior 
        $('#FeiertagTable').load('/Feiertag/GetFeiertagTable'); 
       }); 
      }); 
     </script> 
</head> 

. 이 메소드는 단순화 된 Ajax get 요청이며, 선택된 div (FeiertagTable)의 컨텐츠를 리턴되는 것으로 대체합니다.

우리 GetFeiertagTable() 컨트롤러 동작은 부분보기를 반환하고 그 부분에 삽입됩니다.

나는 이것이 올바른 방향으로 향하게되기를 바랍니다.

관련 문제