MVC3을 사용하여 부분 뷰를 탭으로 작성

Question

애플리케이션에 2-3 개의 다른 뷰가 있으며 기본 뷰가 있습니다. 나는이보기를 탭으로 보여주고 싶다. 따라서 사용자가 탭을 클릭하면 이전보기가 숨겨져 새로운보기가 열려야합니다. 새 탭을 여는 동안 Ajax 호출을하고 있지만 다른보기는 열리지 않습니다. 어떻게 구현합니까?

는

$('#tabRating').click(function() { 
     $.ajax({ 
      "dataType": 'json', 
      "type": "get", 

      "url": '@Url.Action("TabsSelect", "Employee")' 



     }); 

    }); 


public ActionResult TabsSelect() 
    { 
     return PartialView("Rating"); 
    } 

Answer 1

위의 Duncan이 권고 한대로 JQuery UI Tabs을 사용하는 가장 좋은 프레임 워크는 충분히 재미 있습니다.

다음은 몇 가지 코드 samnples입니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tabs").tabs(); 
     getContentTab (1); 
    }); 

    function getContentTab(index) { 
     var url='@Url.Content("~/SiteAdmin/AjaxGetTab")/' + index; 
     var targetDiv = "#tabs-" + index; 
     var ajaxLoading = "<img id='ajax-loader' src='@Url.Content("~/Content")/ajax-loader.gif' align='left' height='28' width='28'>"; 

     $(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>"); 
     $.ajax({ 
      type: 'get', 
      url: url, 
      cache: false, 
      success: function(result) { 
      $(targetDiv).html(result); 
      } 
     });   


    } 

여기에 필요한 부분보기 팩을 전달 내 컨트롤러 액션 방법 :

보기는 jquery.tabs에 도청 JQuery와 스크립트() 기능이 있습니다.

 /// <summary> 
    /// AJAX action method to obtain the correct Tab to use. 
    /// </summary> 
    /// <param name="index">Tab number</param> 
    /// <returns>Partial View</returns> 
    public ActionResult AjaxGetTab(int id) 
    { 
     string partialViewName = string.Empty; 
     object model = null; 

     //--Decide which view and model to pass back. 
     switch (id) 
     { 
      case 1: 
       partialViewName = "_TransactionType"; 
       model = db.TransactionTypes.ToList(); 
       break; 
      case 2: 
       partialViewName = "_DirectionType"; 
       model = db.DirectionTypes.ToList(); 
       break; 
      case 3: 
       partialViewName = "_UserType"; 
       model = db.UserTypes.ToList(); 
       break; 
      case 4: 
       partialViewName = "_CurrencyType"; 
       model = db.CurrencyTypes.ToList(); 
       break; 
      case 5: 
       partialViewName = "_tabError"; 
       break; 

     } 

     return PartialView(partialViewName,model); 
    } 
} 

이렇게하면 여러 개의 탭을 실행하고 각 탭마다 필요한 데이터를 별도로 전달할 수 있습니다.

탭을위한 JQuery UI를 사용하면 탭을 깔끔하게 구현할 수 있습니다.

Answer 2

사용하고있는 jQuery 코드는 아약스 호출을하지만 다시 얻는 부분보기에 아무것도하지 않습니다. 이 페이지에 삽입 할 경우, 예를 들어, 그렇게 할 콜백 함수를 제공해야합니다 :

$.ajax({ 
    type: "get", 
    url: '@Url.Action("TabsSelect", "Employee")', 
    success: function (data) { 
     $("#thingToPutTabContentIn").html(data); 
    } 
}); 

가 (당신이 당신이 가지고있는 "dataType": 'json' 비트를 원하지 않는 점에 유의, 당신의 '평가'를 가정 partial은 정상적인 부분보기입니다).

$("#thingToPutTabContentIn").load('@Url.Action("TabsSelect", "Employee")'); 

당신이 아직하지 않은 경우 당신은 아마 정확히 할 수 있도록 설계되어, jQuery UI's Tabs을 확인해야했다 가졌 : 당신은 jQuery의 load() 방법을 사용할 수 있습니다, 조금 더 간단하게 같은 일을하려면 당신이 필요로하는 일종의 - 그냥 아약스 예제를 보면서 당신이 어떻게 사용하는지 살펴 보자.