버튼을 클릭하면 팝업이 생성됩니다.

Question

제출 버튼을 클릭하면 항목 목록을 보여주는 팝업이 생성됩니다. `

색인보기 : 다음과 같이 내가 팝업창을 만들려고 코드는

<script type="text/javascript"> 
$('#popUp').Hide(); 
$('#button').click(function() { 
    $('#popUp').click(); 
}); 
</script> 

<div class="left-panel-bar"> 
@using (Html.BeginForm(FormMethod.Post)) 
{ 
     <p>Search For: &nbsp;</p> 
     @Html.TextBox("companyName",Model); 
     <input id="button" type="submit" value="Submit" /> 
} 
</div> 

<div id="popUp"> 
    @Html.ActionLink("Get Company List", "CreateDialog", "Company", null, new 
    { 
     @class = "openDialog", 
     data_dialog_id = "emailDialog", 
     data_dialog_title = "Get Company List" 
    }); 
</div> 

하지만 난 내가 대신 팝업의 또 다른 페이지가 열립니다 제출 버튼을 클릭 할 때 ..이 코드를 사용하여 문제가 있어요.

[HttpPost] 
public ActionResult Index(Companies c) 
{ 
    Queries q1 = new Queries(c.companyName); 
    if (Request.IsAjaxRequest()) 
     return PartialView("_CreateDialog", q1); 
    else 
     return View("CreateDialog", q1); 
} 

Answer 1

당신은 사용할 수 AJAX를 : 다음과 같이 컨트롤러 코드는

<script type="text/javascript"> 
    $(function() { 
     $('form').submit(function() { 
      $.ajax({ 
       url: this.action, 
       type: this.method, 
       data: $(this).serialize(), 
       success: function(result) { 
        $('#popUp').html(result); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

<div class="left-panel-bar"> 
    @using (Html.BeginForm()) 
    { 
     <p>Search For: &nbsp;</p> 
     @Html.TextBox("companyName", Model); 
     <input id="button" type="submit" value="Submit" /> 
    } 
</div> 

<div id="popUp"> 
</div> 

이제 폼이, Ajax 요청이 인덱스 POST 액션에 전송 내부 이후 당신이 경우 테스트됩니다 제출 EHN 요청은 AJAX 요청이었으며 _CreateDialog.cshtml 부분보기를 반환하고 #popUp div에 삽입했습니다. 또한 브라우저를 현재 페이지에서 리디렉션하는 경우에도 기본값을 취소하기 위해 양식 제출 처리기에서 false를 반환하는 것이 중요합니다.