MVC Ajax 양식의 전체 내용보기.

Question

MVC4를 사용 중입니다. 눈에 잘 띄지 않는 자바 스크립트는 내 프로젝트에서 사용 가능하고 참조됩니다. Ajax 스크립트가 공유 된 마스터 페이지에로드되고 있습니다. FireBug는 오류나 404를보고하지 않습니다.

내 페이지에 Text 상자를 추가했습니다.이 상자는 내 Ajax 양식의 Hidden 필드 내용을 업데이트합니다. 사용자가 키 및 KeyUp 이벤트가 발생을 누를 때, 나는 호출하여 제출 내 Ajax 양식을 강제로 :

ajaxForm는 아약스 양식의 이름입니다

$("form#ajaxForm").trigger("submit"); 

. 이것은 잘 작동합니다. 양식이 배경 뒤에서 제출되고 컨트롤러 이벤트가 시작됩니다. 모델은 사용자의 입력을 기반으로 새 데이터로 업데이트됩니다.

그러나 이상한 곳에서는 결과가 내 양식으로 돌아갑니다. 내 양식 div 태그의 전체 내용이 결과로 대체됩니다. 전체 페이지입니다. 기본 모달 콘텐츠 지금 자신을 포함하는 방법

<div id="basic-modal-content""> 
    <input id="breed" type="text"/> 
<div> 
<form id="ajaxForm" method="post" data-ajax-update="#results" data-ajax-mode="replace" data-ajax="true" action="/Poultry/ListBreeds?Length=7"> 
    <div id="results"> 
    ->THIS AREA IS GETTING REPLACED WITH THE ENTIRE FORM <- 
     <div id="basic-modal-content"> 
     </div> 
    </div> 
</form> 

• 공지 사항, 다른 기본 모달 콘텐츠. 결과 div는 전체보기가 아닌 업데이트 결과 만 포함해야합니다. 다음과 같이

내 코드는 다음과 같습니다

보기 (BreedSelectorPartial.cshtml)

@model IQueryable<Inert.BreedViewModel> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#breed").keyup(function (e) { 
      $("input[name=breedSearch]").val($("#breed").val()); 
      $("form#ajaxForm").trigger("submit"); 
     }); 
    }); 
</script> 

<div id="basic-modal-content"> 
<input id="breed" type="text" style="width:100%; height:22px;" /> 
    <div> 
     <div style="margin-top: 4px;"> 
      <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label> 
     </div> 
    </div> 
    @using (Ajax.BeginForm("ListBreeds", "Poultry", new AjaxOptions {UpdateTargetId = "results" }, new { id = "ajaxForm" })) 
    { 
     <input id="breedSearch" name="breedSearch" type="hidden" /> 
    } 
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;"> 
     @{ 
      var grid = new WebGrid(Model, ajaxUpdateContainerId: "results"); 
      int c = Model.Count(); 
     } 
     @grid.GetHtml(tableStyle: "webgrid", 
      alternatingRowStyle: "webgrid-alternating-row", 
      rowStyle: "webgrid-row-style", 
      displayHeader: true) 
    </div> 
</div> 
<script type="text/javascript" src="/scripts/jquery.simplemodal.js"></script> 
<script type="text/javascript" src="/scripts/basic.js"></script> 

컨트롤러 (PoultryController.cs)

[HttpPost] 
public ActionResult ListBreeds(string breedSearch) 
{ 
    InertDatabaseEntitiesConnection db = new InertDatabaseEntitiesConnection(); 
    var breeds = db.Breeds.Where(q => q.Name.Contains(breedSearch)); 
    var names = breeds.Select(q => new BreedViewModel { Name = q.Name }); 
    return PartialView("BreedSelectorPartial", names); 
} 

,536,

나는 이것이 어디에서 잘못 될지 잘 모르겠습니다. 나는 이것을 알아 내려고 애 쓰면서 몇 시간을 보냈다. 어떤 해결책?

Answer 1

첫 번째 문제는 당신이 Ajax.BeginForm 도우미의 잘못된 과부하를 사용하고 있다는 것이다 (하지만이 원하지 않는 동작을 일으키는 아니에요, 그냥 (!) 참고입니다) :

@using (Ajax.BeginForm(
    "ListBreeds",          // actionName 
    "Poultry",           // routeValues 
    new AjaxOptions { UpdateTargetId = "results" }, // ajaxOptions 
    new { id = "ajaxForm" })       // htmlAttributes 
) 

당신이 필요로하는 반면 :

@using (Ajax.BeginForm(
    "ListBreeds",          // actionName 
    "Poultry",           // controllerName 
    null,            // routeValues 
    new AjaxOptions { UpdateTargetId = "results" }, // ajaxOptions 
    new { id = "ajaxForm" })       // htmlAttributes 
) 

---

이제 진짜 문제는 #results div 외부에 부분 및 내부를 넣어야한다는 것입니다. 메인보기 :

<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;"> 
    @Html.Partial("BreedSelectorPartial") 
</div> 

지금은 물론 당신은 단지 다음이 부분의 내부에만 그리드를 떠나 기본보기 외부 형태를 이동하는 것이 더 의미가 것 WebGrid 부분을 업데이트해야합니다.

그래서 기본보기가 지금이된다 : 그리드가 포함되는 BreedSelectorPartial.cshtml 부분

@model IQueryable<BreedViewModel> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#breed").keyup(function (e) { 
      $("input[name=breedSearch]").val($("#breed").val()); 
      $("form#ajaxForm").trigger("submit"); 
     }); 
    }); 
</script> 

<div id="basic-modal-content"> 
    <input id="breed" type="text" style="width:100%; height:22px;" /> 
    <div> 
     <div style="margin-top: 4px;"> 
      <label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label> 
     </div> 
    </div> 
    @using (Ajax.BeginForm("ListBreeds", "Poultry", null, new AjaxOptions { UpdateTargetId = "results" }, new { id = "ajaxForm" })) 
    { 
     <input id="breedSearch" name="breedSearch" type="hidden" /> 
    } 
    <div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;"> 
     @Html.Partial("BreedSelectorPartial") 
    </div> 
</div> 

업데이트해야하는 유일한 부분이다 :

때문에보기 모델 디스플레이 템플릿의

@model IQueryable<BreedViewModel> 
@{ 
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "results"); 
} 
@grid.GetHtml(
    tableStyle: "webgrid", 
    alternatingRowStyle: "webgrid-alternating-row", 
    rowStyle: "webgrid-row-style", 
    displayHeader: true 
) 

Answer 2

나는 이전과 비슷한 것을 가지고있었습니다.

정확한 문제는 기억이 나지 않지만 개체의 HTML 요소뿐 아니라 전체 개체를 반환하는 것과 관련이 있습니다.

현재로서는 코드를 찾을 수 없지만 Firebug 또는 이와 비슷한 것을 사용하는 경우 반환되는 데이터를 볼 수 있는지 확인하고 올바르게 기억하면 .html을 라인의 끝.

미안하지만 다소 모호합니다. 잘하면 도움이 될 것입니다.

Answer 3

정규 양식을 제출하지 않으시겠습니까? 나는이 라인이 $("form#ajaxForm").trigger("submit"); 정규 양식을 제출하고 있다고 생각합니다. 아마 당신은 보통 양식 제출을 호출하는 대신 여기에 ajax 양식을 게시해야합니다. 그 때문에 전체 페이지를 다시 볼 수 있습니다.