MVC4 내용이 포함 된 jQuery 탭

Question

jQuery 탭에 표시 할 MVC4 뷰를 얻으려고합니다. 여기에 내 코드입니다 :

<div id="tabs"> 
    <ul> 
     <li><a href="#appone">App One</a></li> 
     <li><a href="#apptwo">App Two</a></li> 
    </ul> 
    <div id="appone"> 
     @{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); } 
    </div> 
    <div id="apptwo"> 
     @{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); } 
    </div> 
</div> 

문제는 첫 번째 탭의 내용이 표시 단지를 미세하지만 두 번째가 비어 있다는 것입니다. 부분보기가 렌더링되지 않은 것 같습니다.

jQuery 탭에서 페이지를로드 할 때 모든 탭의 내용을 강제로 업데이트하거나 페이지 뷰에서 부분 뷰를 강제로 렌더링하는 방법이 있습니까?

Login.cshtml

@{ 
    AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" }; 
    AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" }; 
} 
<section id="login-tabs"> 
    <ul> 
     <li><a href="#login-tab-login">Returning Customers</a></li> 
     <li><a href="#login-tab-register">New Customers</a></li> 
    </ul> 
    @using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" })) 
    { 
     <div id="login-tab-login"> 
      @Html.Partial("Account/_Login") 
     </div> 
    } 
    @using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" })) 
    { 
     <div id="login-tab-register"> 
      @Html.Partial("Account/_Register") 
     </div> 
    } 
</section> 
<script type="text/javascript"> 
    $(function() { 
     $('#login-tabs').tabs(); 
    }); 
</script> 

내 부분적인 전망이 계정 하위 폴더의 공유 폴더에 있습니다

Answer 1

여기에 내가 적극적으로 그에서 잘 작동하는지 일하고 있어요 코드입니다. 또한 각 부분 뷰에는 자체 모델이 있습니다. 그 외에는, 구현은 특별한 것이 ... 나는 아약스는 두 개의 탭에 호출을 구현하는 코드를 추가 한

UPDATE는 없다. 탭 섹션 위의 코드 블록은 두 개의 <form> 요소에 대해 AjaxOptions 개의 객체를 보유합니다. 컨트롤러는 다음과 같이 보일 필요가있다 :

AccountController.cs

public class AccountController : Controller 
{ 
    ... 
    [HttpGet] 
    public ActionResult Login() 
    { 
     ... 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Login(LoginModel model) 
    { 
     ... 
     if (ModelState.IsValid) 
      return RedirectToAction("Index", "Home") 
     else 
      return PartialView("/Account/_Login", model); 
    } 

    [HttpPost] 
    public ActionResult Register(RegisterModel model) 
    { 
     ... 
     if (ModelState.IsValid) 
      return RedirectToAction("Index", "Home") 
     else 
      return PartialView("/Account/_Register", model); 
    } 
} 

Login GET 액션 메소드가 _Layout.cshtml 및 _ViewStart.cshtml 뷰를 포함하여 전체 페이지를 렌더링합니다. 내 부분보기, _Login.cshtml 및 _Register.cshtml은 입력 양식에 대한 HTML 요소를 보유합니다. 각 부분보기가 자신의 제출 버튼이 있습니다 각 부분보기 호출이 자신의 using (Ajax.BeginForm(...)) 블록에 쌌다 나는 각 <form> 자신의 id 속성을 부여했기 때문에

<input type="submit" value="<Whatever you want to display>" /> 

을, 나는 submit 이벤트를 납치 자바 스크립트 코드를 추가 할 수 있습니다. 어떤 submit이 눌러 졌는지에 따라 Ajax.BeginForm(...) 호출에서 지정된 작업 및 컨트롤러와 연결된 작업 메서드가 실행됩니다. 필자의 경우 양식 데이터가 유효성 검사를 통과하면 컨트롤러는 자동으로 /Home/Index으로 리디렉션됩니다. 유효성 검사가 실패 할 경우

그러나, 액션 메소드는 브라우저 내 부분보기의 렌더링 된 버전을 다시 전송하고 <form>와 관련된 AjaxOptions 객체의 UpdateTargetId 속성에 지정된 요소에 배치됩니다. InsertionMode 기본값은 Replace이므로보기 엔진은 이전 버전의 부분보기를 새 버전으로 바꾸고 양식 데이터 및 유효성 검사 메시지 (포함되어있는 경우)로 완료합니다.

내가 포함하지 않은 유일한 코드 관련 항목은 부분보기입니다. jQuery 탭 기능이 중요하다는 점은 중요하지 않습니다. 부분 뷰에는 추가 자바 스크립트가 없으므로 AccountController의 추가 코드는 내 외부 웹 API 콘솔 응용 프로그램을 호출하고 권한 쿠키를 설정하는 것과 관련이 있습니다. JavaScript를 로컬로 호스팅하는 대신 jQuery 및 jQuery UI 선언에 Google의 CDN을 사용하고 있습니다.

머리를 감싸는 데 시간이 걸립니다. 일단 당신이 그것을 가지고 있지만, 당신은 그것을 가지고 지식은 양도가 가능합니다. 이것은 이 아니고 WebForms입니다. 감사합니다.