MVC 액션/렌더링 액션, 아약스 포스트 및 부분 뷰의 Bizzare 동작

Question

그래서이 MVC 응용 프로그램에서 한 쌍의 다른 '위젯'으로 한 페이지를 만드는 것이 이상적입니다. 각 '위젯'은 자신에게 정보를 제출하고 다시로드 할 수 있어야합니다. 웹 형태의 단순 그다지 MVC와 그것이 우리의 메인 페이지 컨트롤러, 다음

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

특별한 아무것도가,

먼저 보인다, 우리는 우리의 주요 페이지를 볼 수 있습니다.

public ActionResult Index() 
{ 
    var model = GetMessages(); 
    return PartialView(model); 
} 

간결하게하기 위해 전체를 건너가는 : 나는 액션과 RenderAction 모두를 시도하고 메시지 컨트롤러의 행동에 변화

@Html.Action("Index", "Monitor", new { area = "Statistics" }); 

<div id="messages"> 
    @Html.Action("Index", "Messages", new { area = "Data"}); 
</div> 

@section Script { 
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $('#filter').click(function() { 
     $.ajax({ 
      method: 'POST', 
      url: '@Url.Action("Index", "Messages", new { area = "Data"})', 
      success: function(data){ 
       $('#messages').html(data); 
      } 
     }); 
     return false; 
    }); 
</script> 

인덱스 ActionResult가 존재하지 않습니다 모니터 색인보기 및 메시지의 간단한 버전 만 표시

@using (Html.BeginForm("Index", "Messages", FormMethod.Post)) 
{ 
    //Some fields to limit results are here, with style classes 
    <button type="submit" id="filter">Filter</button> 
} 

@foreach(var item in Model) 
{ 
    //Display results 
} 

기본 페이지를로드하면 모든 것이 잘 보입니다. 결과를 제한 할 필드와 메시지가 표시됩니다. 나는 필드에 뭔가를 입력하고, 필터를 클릭하고, 메인 페이지로 되돌아 왔지만,! ... 필드가 스타일 클래스를 잃어 버렸고 메시지가 필터링되지 않았습니다.

필드에 정보를 입력하고 필터를 클릭하면 메인 페이지로 이동하지 않고 메시지의 부분보기 만 표시되고 메시지는 필터링되지 않습니다. .

작동하지 않는 필터링이이 문제와 관련이 있다고 말할 수는 없지만 필터를 클릭하는 동작이 일관되지 않으면 나를 괴롭히는 부분입니다. 누군가 내가 여기서 잘못하고있는 것을 지적하고 싶습니까?

Answer 1

위젯에는 Html.BeginForm이 아닌 Ajax.BeginForm을 사용해야합니다. 즉, 위젯이 자신의 게시물을 관리 할 것입니다 :

이

<div id="messages"> 
    @using (Ajax.BeginForm("Index", "Messages", new AjaxOptions { UpdateTargetId = "messages" })) 
    { 
    // fields content 
    } 
    // other widget content 
</div> 

당신이 페이지에 있기 때문에 무슨 일이 일어나고 볼 수있는 "기괴한"행동이 (가) jQuery를 사용하여 납치되고 당신의 #filter 버튼에 대한 이벤트를 제출로드,하지만 첫 번째 교체 후 위젯 콘텐츠의 #filter 제출 이벤트는 더 이상 도용되지 않으므로 클릭하면 전체 페이지가 제출됩니다. Ajax.BeginForm을 사용하지 않으려면 $.click 대신 $.on을 사용해야합니다. 이벤트 가입 스크립트가 실행 된 후 생성 된 일치하는 요소의 이벤트를 처리하므로 이벤트를 등록하십시오.