ASP.NET MVC를 처음 사용하는 경우 양식이 포함 된 렌더링 작업에 문제가 있습니다.

Question

ASP.NET 웹 양식에 익숙하며 ASP.NET MVC를 배우고 있습니다. 내 웹 사이트에 홈페이지에 약간의 로그인 양식이 있습니다. 내 생각에이 로그인 양식은 다른 장소에서 유용 할 수 있으며 홈페이지의 기본 동작이 아니므로 부분보기로 분리하고 싶습니다. 계정과 관련되어 있기 때문에, 내 HomController가 아닌 AccountController에 로그인을 원합니다. 계정 컨트롤러에, 마지막으로

@Html.Action("_Login", "Account") 

이 : 나는이 있고, 홈페이지에

@model Models.Account.AccountLogin 

    <h2>Login Form</h2> 

    @using (Html.BeginForm("_Login", "Account")) { 

     @Html.ValidationSummary() 

     <div> 
      <span>Email address:</span> 
      @Html.TextBoxFor(x => x.EmailAddress) 
     </div> 

     <div> 
      <span>Password:</span> 
      @Html.PasswordFor(x => x.Password) 
     </div> 

     <div> 
      <span>Remember me?</span> 
      @Html.CheckBoxFor(x => x.RememberMe) 
     </div> 

     <input type="submit" value="Log In" /> 
    } 

</div> 

:

[HttpGet] 
    public PartialViewResult _Login() 
    { 
     return PartialView(); 
    } 

[HttpPost] 
public PartialViewResult _Login(AccountLogin loginDetails) 
{ 
    // Do something with this 

    return PartialView(); 
} 

로그인 양식은 아주 기본적인 강력하게 형식화 된 부분이다

이제 내 홈페이지를로드하면 모양이 보이며 양식이 포함되어 있습니다. 로그인 버튼을 클릭하면 폼이 포함되어 있지만 _Layout 마스터 페이지에는 기본 일반 HTML이 아닌 myurl/Account/_Login이 필요하며 로그인을 클릭해도 아무 것도하지 않습니다.

는 난 그냥 누군가가 올바른 방향으로 날 지점하시기 바랍니다 수 있습니다, 여기에 일을 할 내가 생각하고있는 무슨의 몇 가지 근본적인 측면을 놓친 것을 확신?

Answer 1

마스터 페이지를 제거하고 주요 콘텐츠 만 반환하는 부분보기를 반환하기 때문입니다. 밑줄로 시작하는 작업은 부분 검색에 사용되는 경우가 많습니다 (예 : 전체 페이지가 아닌 페이지의 일부에서 아약스 적용).

[HttpPost] 
public ActionResult Login(AccountLogin loginDetails) 
{ 
    // Do something with this 

    return View(); 
} 

Answer 2

여기서 전체 페이지 포스트 백을 수행하는 것이 문제입니다.

두 가지 옵션이 있습니다.

먼저 전체 페이지 다시 게시를 사용하고 Html.Partial을 호출하여 부분을 표시 할 수 있습니다.

뭔가 다음

[HttpGet] 
public ActionResult Login() 
{ 
    return View();//this typically returns the view found at Account/Index.cshtml 
} 

그리고

처럼

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Title</h2> 


@Html.Partial("PartialNameGoesHere") 

의 라인을 따라보기를 만들 귀하의 표시된 곳 부분은 다음 렌더링되어 있지만 페이지가로드 (당신이 보면 때 수행됩니다 생성 된 HTML은 마치 사용자가 인라인으로 작성한 것처럼 나타납니다.

또는 jQuery/AJAX를 사용하여 필요시 부분을로드 할 수 있습니다. 이제 당신은 몇 가지 JS를 사용하여, 필요할 때마다 그런 다음 용기 div에 PartialView을로드 할 수 있습니다보기

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Home</h2> 
<div> 
    <p>Hey welcome to my pretty awesome page!</p> 
</div> 
<a href="#" class="my-login-link">Show me the login!</a> 
<div id="container"> 

</div> 

만들기 당신은 몇 가지 설명

public ActionResult Home() 
{ 
    return View(); 
} 

public ActionResult Login() 
{ 
    return PartialView("_Login"); 
} 

의 홈페이지 있다고 가정 해 봅시다.

$(function() { 
    $('.my-login-link').click(function() { 
     $.ajax({ 
      url: 'account/login', 
      success: function(data) { 
       $('#container').html(data); 
      } 
     }); 
     return false;//cancel default action 
    }); 
}); 

이 경우 페이지는 로그인 부분없이 정상적으로로드됩니다. 사용자가 링크를 클릭하면 Account 컨트롤러의 Login이 AJAX/jQuery를 사용하여 호출됩니다. PartialView의 HTML을 반환합니다.이 HTML을 Success 핸들러의 jQuery를 사용하여 페이지에 추가 할 수 있습니다.