부분보기 유효성 검사에서 Ajax 양식

Question

부분보기 내부에 양식이 있지만 작동하지만 서버 측면 유효성 검증 오류가 발생하는 경우 부분보기 만 표시합니다. 그래서 제출을 위해 아약스를 사용하기로 결정했습니다. 실제로 연락처를 삽입하고 기본보기에 목록이 있으므로 의미가 있습니다.

이러한 오류 중 하나가 발생하면 게시 된 코드로보기에 제대로 표시됩니다 (부분적으로 다시 표시해야하지만 또 다른 문제입니다). 오류가 표시되지 않으면 오류가 표시됩니다. 부분 뷰 내에서만리스트 나는 다른 방법으로 반올림을 할 수 있으며, 오류가 없을 때 올바르게 표시하지만 유효성 검사 오류를 올바르게 표시하지는 못합니다.

내가 가장 좋은 방법, 또는 적어도있는 가능성이 무엇인지 이해하고 싶습니다 어쩌면 컨트롤러의 코드를 변경하거나 성공 콜백 체크인 어떤 종류의 일을 ...

내가 무엇을 편집 I 이전에는 오류가 없었기 때문에 이전에 게시 한 전체보기가 아니라 목록을 반환해야했기 때문에 이전에는 없었지만 어쨌든 게시 작업에 대한 호출이 모두 성공적이어서 두 가지 모두를 알리는 방법에 대해서는 여전히 의문이 있습니다.

감사

보기가 이쪽

컨트롤러 포스트 액션

[HttpPost] 
public ActionResult AddContact(AddContactViewModel viewModel) 
{ 
    var partyId = (int) Session["PartyId"]; 
    if (ModelState.IsValid) 
    { 
     _contactsManager.AddContact(viewModel, partyId); 
     // Here I should return the updated list 
    } 
    var newViewModel = _createBuilder.Rebuild(viewModel, partyId); 
    return PartialView("_AddContact", newViewModel); 
} 

그리고 더 이상 AMPContact.js 내부 아약스 제출 코드

내가 잘되는 것을 지금까지의이 대답을 이해하지만 어쩌면이 글은 누군가 유용

$('#addForm').submit(function (e) { 
    e.preventDefault(); 
    var addContainer = $(document.getElementById('addContainer')); 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     success: function(result) { 
      addContainer.html(result); 
     } 
    }); 
}); 

Answer 1

가능한 검색 범위를 좁히기위한 조건. 거대하게 끝나기 때문에이 업데이트를 내 자신의 질문에 대한 답변으로 게시하고 좋은 매너를 따르는 지 확실하지 않습니다.

내가 설명한 유일한 문제는 내가 직면 한 유일한 문제가 아니며 양식 재설정과 특히 연속 오류 제출 (오류가 다시 발생하면 오류가 다시 발생 함)으로 인해 어려움을 겪었습니다. 다른 문제에 대한 다른 솔루션을 엉망으로 만든다. 다행스럽게도 나는 기존과의 .js에서 지금

<div id="myContacts"> 
<h2>My Contacts</h2> 
<hr /> 

<div id="addContainer"> 
    <div class="toggler"> 
     Add Contact 
    </div> 
    <div id="addToggling" class="initiallyHidden"> 
     @{ Html.RenderAction("AddContact"); } 
    </div> 
</div> 

<div id="editContainer" data-amp-url="@Url.Action("Edit", "Contacts")" class="initiallyHidden"></div> 

<div id="list"> 
    @{ Html.RenderPartial("_ContactList", Model); } 
</div> 

$('#addContainer').on('submit', '#addForm', ajaxCall); 

function ajaxCall(e) { 
    e.preventDefault(); 
    var addToggling = $(document.getElementById('addToggling')); 
    var contactList = $(document.getElementById('contactList')); 

    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     success: function (result) { 
      if (result.passedValidation == true) { 
       // Json is returned with flag, we get the list from the server and update the list element 
       $.get(result.action, function (partial) { 
        contactList.html(partial); 
       }); 

       // Add some effects and clear the form 
       $(document).scrollTop(0); 
       setTimeout(function() { 
        addToggling.slideUp(300, resetAddForm); 
       }, 500); 
       setTimeout(function() { 
        contactList.effect("highlight", {}, 3000); 
       }, 1000); 
      } 
      else { 
       // The form partial view is returned and displayed in the same element when there are validation errors 
       $(document).scrollTop(0); 
       addToggling.html(result); 
       $.validator.unobtrusive.parse('#addForm'); 
      } 
     } 
    }); 
} 

function resetAddForm() { 
    var addForm = $(document.getElementById('addForm')); 

    // Hhide the error messages 
    addForm.find("span.field-validation-error").hide(); 
    addForm.find("div.validation-summary-errors").hide(); 

    // Removes the class associated to errors 
    addForm[0].reset(); 

    // Clear the inputs 
    addForm.find('input:text, input:password, input:file, select, textarea').val(''); 
    addForm.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); 
} 

컨트롤러를 사용하는 관점에서

감사

그것을 정리 할 수있을 것입니다 액션 메소드가 약간 변경되고 새 액션 메소드

public ActionResult ContactList() 
{ 
    var partyId = (int)Session["PartyId"]; 
    var viewModel = _displayBuilder.Build(partyId); 
    return PartialView("_ContactList", viewModel); 
} 

[HttpGet] 
public ActionResult AddContact() 
{ 
    var partyId = (int) Session["PartyId"]; 
    var viewModel = _createBuilder.Build(partyId); 
    return PartialView("_AddContact", viewModel); 
} 
[HttpPost] 
public ActionResult AddContact(AddContactViewModel viewModel) 
{ 
    var partyId = (int) Session["PartyId"]; 

    if (ModelState.IsValid) 
    { 
     _contactsManager.AddContact(viewModel, partyId); 

     if (Request.IsAjaxRequest()) 
      return Json(new { passedValidation = true, action = Url.Action("ContactList")}); 

     return RedirectToAction("Index"); 
    } 

    var newViewModel = _createBuilder.Rebuild(viewModel, partyId); 
    return PartialView("_AddContact", newViewModel); 
}