Javascript와 함께 Controller Action을 호출 할 때 ASP MVC에서 Partials를 사용하는 방법?

Question

새로운 아이가 블록 승/MVC ... tryna 자바 스크립트 대화 상자에서 편집 양식을 얻을. 행동의

내 현재 계획 :

• 메인 뷰 온 클릭이 RECORD_ID을 잡고 편집 버튼을 가지고 있으며, PARAM로 RECORD_ID 전달 내 컨트롤러 액션에 아약스 호출합니다.
• 동일한보기에서 탭/대화 상자 관련 코드가있는 "_EditApp"부분을 사용하고 있습니다.
• 동일한 onClick에서 _EditApp에 ​​지정한 탭을로드하고 있습니다.

JS ..

$('.btn_edit_app').click(function() { 

    var app_to_edit = $(this).attr('id'); 
    $.ajax({ 
     url: '/Application/editApp', 
     contentType: 'application/html; charset=utf-8', 
     data: { app_id: app_to_edit}, 
     type: 'GET', 
     dataType: 'html', 
     success: function (result) {}, 
    }); 
    $('#edit_tabs').tabs({ active: 0 }); 
    $('#edit_dialog').dialog({ width: 700, height: 400 }); 
}); 

내 컨트롤러/액션

public ActionResult editApp(int app_id) 
     {  
      AppDBServer ads = new AppDBServer(); 
      ads = findADS(app_id); 
      return View("_EditApplication", ads); 
     } 

문제 ...

은 단순히 내가 기록을 검색하고 탭과 대화를 채우려 검색된 데이터 필드가있는 상자. 따라서 모델을 EditApplication Partial에 전달합니다.

문제는 제가 메인 동작에서 컨트롤러 동작을하고 있는지에 대해서도 똑같은 부분을 사용하고 있습니다 ... 이것에 대해 어떻게 생각하는지 모르겠습니다 ... 아이디어, 또는 이보다 더 새로운 접근법은 A-OK입니다.

또한 Controller/Action에서 데이터 검색을 처리하려고합니다.

감사합니다. SOF fam!

Answer 1

나는 평판이 50 점 미만이므로 논평하고 싶지만 그럴 수 없다. 어쨌든, 제대로 이해하면 작업 호출 후 일부 탭을 표시하려고합니다. 나는 전에 이런 식으로해야했다. 여기 내 해결책은 다음과 같습니다. ID가있는 단추 또는 행의 onclick은 ActionResult를 호출하여

onclick입니다.

또는 아약스 양식 사용 @using (Ajax.BeginForm ("GetTabs", "ControllerHere"새로운 AjaxOptions() {LoadingElementId = "로드", UpdateTargetId = "targetdiv을"InsertionMode = InsertionMode.Replace, HttpMethod =))} "GET" { @ Html.Hidden ("ID", ID) .... }

돌려 PartialView 즉 "_Tabs"를 제출하고 (이 경우 ID를 모델을 통과).

` 
public ActionResult GetTabs(string id) 
{ 
.... 
//pass id or get model and pass model 
return PartialView("_Tabs", id); 
} 
` 

각 탭의 _Tabs.cshtml 호출 내에서 Html.RenderAction. (부트 스트랩을 사용하여 탭을 설정했습니다.) Html.RenderAction은 작업 메서드 이름을 취하고 매개 변수를 전달할 수 있습니다. 각 동작은 부분 뷰를 리턴 할 것이다 .. 등

`@{Html.RenderAction("GetTab1",new {id = @id}) } 

@{Html.RenderAction("GetTab2",new {id = @id}) }` 

... public ActionResult GetTab1(string id) { //get data model = id lookup return PartialView("_Tab1", model); } ...등

이제 우리는 _Tabs 부분보기를 렌더링하여 각자 고유 한 부분 모델을 가질 수 있습니다.

_Tabs 부분 렌더링이 끝나면 기본 페이지의 대상 div에 HTML이 반환되고 _Tabs.cshtml에 x 개의 탭이 생성됩니다.

<script> 
 
    $('#navtab a').click(function (e) { 
 
     e.preventDefault(); 
 
     $(this).tab('show'); 
 
    }); 
 

 
    // store the currently selected tab in the hash value 
 
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) { 
 
     var id = $(e.target).attr("href").substr(1); 
 
     window.location.hash = id; 
 
    }); 
 

 
    // on load of the page: switch to the currently selected tab 
 
    var hash = window.location.hash; 
 
    $('#navtab a[href="' + hash + '"]').tab('show'); 
 
</script>

:

은 또한 다음과 같은 스크립트를 사용하여 선택한 현재 활성 탭을 유지할 수 있었다