Ajax 콜 후 MVC3 방해 없는 검증이 기능하지 않음

Ajax 콜 후 MVC3 방해 없는 검증이 기능하지 않음

네, 이렇게 합시다.이 문제에 관한 SO에 관한 글을 몇 개 봤지만, 아무 것도 효과가 없습니다.

기본적으로는 부분 뷰에서 로드되는 드롭 다운을 선택하기 때문에 이전에 선택한 드롭 다운에 따라 이후의 각 드롭 다운의 내용을 필터링하려고 합니다.

콜을 div 컨테이너의 부분 뷰에 넣고 페이지를 로드하면 데이터 주석에서 검증이 정상적으로 동작합니다(주로 필수 속성).

단, 여기서 설정한 것과 동일한 부분을 AJAX를 통해 로드하려고 하면 Required Validation이 작동하지 않습니다.그 후 KABOOM을 통해 누구나 폼을 게시할 수 있습니다.

Success Callback에서 클라이언트 측 검증자가 폼을 재분석해야 한다고 하는 사람을 발견했고, 저는 폼을 재분석하려고 시도하고 있지만 작동하지 않는 것 같습니다.

이렇게 보이는 광경이 있는데...

  @model Area51.Models.Workflow.AddReportableItemToBatchActionModel
@{
    ViewBag.Title = "Add Reportable Item to Batch";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">

    $(function () {
        var fadeDelay = 150;

        $(".jqDatePicker").datepicker({
            dateFormat: 'm/d/yy',
            onSelect: function (date) {
                $("#categoryContainer").show(fadeDelay);
            }
        });

        $('#Category').change(function () {
            RetrieveItemsForCategory();
            $("#itemContainer").show(100);
        });

        $('#Item').live('change', function () {
            RenderPartialForUOMByItem();           
        });



        function RetrieveItemsForCategory() {

            var category = $("#Category :selected").val();

            $.ajax({
                type: "POST",

                url: '@Url.Action("RenderPartialForLocationItemsByCategory","BatchWorkflow")',

                data: 'category=' + category,

                success: function (result) {
                    $("#itemContainer").html(result.toString());
                    $("#itemContainer").show(100);
                    RebindValidation();
                },

                error: function (req, status, error) {
                    alert("Sorry! Could not request items for your selection at this time.");
                }

            });


        }


        function RenderPartialForUOMByItem() {

            var item = $("#Item :selected").val();

            $.ajax({
                type: "POST",

                url: '@Url.Action("RenderPartialForUOMByItem","BatchWorkflow")',

                data: "item=" + item,

                success: function (result) {
                    $("#quantityContainer").html(result.toString());
                    $("#quantityContainer").show(100);
                    RebindValidation();
                },

                error: function (req, status, error) {
                    alert("Sorry! Could not request items for your selection at this time.");
                }

            });
        }

        function RebindValidation() {
            alert("Rebinding Validation");
            $.validator.unobtrusive.parse("#frmAddItem");
        }

    });      // End OnLoad Event
</script>

<h3 class="pageHeader">Batch : @Model.BatchName</h3>

<div align="center">

@{Html.BeginForm("AddItemToBatch", "BatchWorkflow", null, FormMethod.Post, new { id = "frmAddItem" });}

    @Html.ValidationSummary(true)

    <fieldset style="width:60%">
        <legend>Add an Item to the Batch</legend>     

     <div>       
          <h3>Select Date Item was Added</h3>
          @Html.EditorFor(x => x.EventDate,null)
          <br />
      </div>

      <div id="categoryContainer" style="display:none"> 
        <hr />
          <h3>Select an Inventory Category</h3>
          @Html.EditorFor(x => x.Category,null)
          <br />
      </div>

      <div id="itemContainer" style="display:none"> 
        @*   @{Html.RenderAction("RenderPartialForLocationItemsByCategory", "BatchWorkflow", new { category = Model.Category });}*@
      </div>


      <div id="quantityContainer" style="display:none"> 
        @*  @{Html.RenderAction("RenderPartialForUOMByItem", "BatchWorkflow", new { item = Model.Item });}*@
      </div>

      <div id="reportingDataContainer" style="display:none"> 
        <hr />
          <h3>What quantity of the batch was affected by this addition?</h3>
          @Html.EditorFor(x => x.ConsumedWineQuantity) (Gallons)
        <br />
        <hr />
          <h3>What was the increase in Batch Volume as a result of this addition?</h3>
          @Html.EditorFor(x => x.ProducedWineQuantity) (Gallons)
      </div>

        <div style="display:block">
        <div></div>        
            <span><button type="button" id="btnCancel" class="linkButton" value="Cancel" onclick="location.href='@Url.Action("Home","Home",null)';">Cancel</button></span>  
            <span><button type="submit" id="btnSubmit" class="linkButton" value="Add">Add Item</button></span>
        </div>


    </fieldset>
        @{ Html.EndForm(); }
</div>

부분 뷰는 매우 단순합니다. 기본적으로 다음과 같습니다.

@model Area51.Models.Workflow.AddReportableItemToBatchActionModel

      <hr />
          <h3>Select the Item to Add</h3>
          @Html.EditorFor(x => x.Item)
          <br />

다시 Render Partial만 사용하면 검증은 정상적으로 동작하지만 Ajax를 통해 검증하려고 하면 검증이 사라집니다."Rebinding Validation" 경보는 실행되지만 $.validator.unobtruptive.parse("#frmAddItem");는 동작하지 않는 것 같습니다.

제가 놓친 걸 누가 좀 도와주시겠어요?그것은 매우 감사할 것이다.

<======================= UPDATE 1 =============================>

네, $.validator.unobtruptive.parse("#frmAddItem")를 문서 준비 이벤트에서 부분 뷰 하단에 추가하려고 했는데도 작동하지 않았습니다.기본적으로 아무것도 변경되지 않았지만 폼을 제출할 수 있었습니다.

mvc 버전의 jqvalidation에 이미 검증 규칙이 바인드 되어 있는 폼이 발견되면 .validator 호출을 무시한다고 하는 투고를 여기서 찾았습니다.http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/이 젠틀맨이 사용한 스크립트 확장을 실장했습니다만, 검증은 새로운 확장을 사용해 폼에 재바인딩 하고 있습니다.폼에 html을 추가하고 새로운 내선번호를 호출하면 테스트 할 수 있으며, 새로운 텍스트박스에 재바인딩 됩니다.

그러나 아직 문제가 완전히 해결되지 않았습니다.firebug를 사용하여 ajax 콜에서 돌아오는 필드의 실제 내용을 확인했는데 매우 이상한 점을 발견했습니다.

Render Partial을 사용하여 액션을 호출하면 다음 선택 내용이 기록됩니다.

<select id="Item" name="Item" data-val-required="The Item field is required." data-val-number="The field Item must be a number." data-val="true">

단, 동일한 컨트롤러 액션에 대해 Ajax 콜을 발신하면 다음 정보가 반환됩니다.

<select id="Item" name="Item">

스크립트 태그를 부분 뷰에도 추가해 봤지만 문제가 해결되지 않았습니다.Ajax 콜이 눈에 띄지 않는 검증 태그를 삭제하는 이유가 있습니까?

<======================= UPDATE 2 =============================>

자, 무슨 일이 있었냐면, 선택 목록을 가져와서 html 선택으로 변환하는 드롭다운 에디터 템플릿이 있었습니다.에디터 템플릿에 쓸 데이터 검증 속성을 얻으려면 폼 컨텍스트가 있어야 한다는 글을 발견했습니다.Html부터.RenderPartial이 폼 내에서 수행되고 있을 때 에디터 템플릿은 폼 컨텍스트에서 작업할 수 있습니다.Ajax를 통해 부분 호출을 시도했을 때 작업할 폼 컨텍스트가 없었고, 불만을 표시하는 대신 데이터 검증 속성이 기록되지 않았습니다.Select List Drop Down 에디터 템플릿에 새로운 폼 콘텍스트를 추가하면 문제가 수정되었습니다.

@{ // fix to stop stupid crappy brad wilson mvc3 code from stripping the jq data valdiation attributes
    if (ViewContext.FormContext == null)
    {
        ViewContext.FormContext = new FormContext();
    }
}

$.validator.unobtrusive.parse("#frmAddItem");과가있있 있있있다다Ajax를 통해 로드하는 것은 부분이어야 합니다(부분의 양식 아래).

<form id="frmAddItem" method="POST" action="...">
    <!-- all the items -->
</form>
<script type="text/javascript">
    $.validator.unobtrusive.parse("#frmAddItem");
</script>

위의 추천이 나에게 효과가 없었기 때문에 나의 경험을 덧붙인다.이 솔루션은 검색 엔진에서 이 페이지로 이동하는 다른 사용자에게 도움이 될 수 있습니다.

OnSuccess="$.validator.unobtrusive.parse('YourFormName');" Ajax에게

Ajax를 사용하는 예.Action Link:

@Ajax.ActionLink("This is a test to get unobtrusive javascript working",
                 "Name_of_your_controller_action",
                 new AjaxOptions { HttpMethod = "POST", 
                                   InsertionMode = InsertionMode.Replace, 
                                   UpdateTargetId = "UserDiv", 
                                   OnSuccess="$.validator.unobtrusive.parse('UserDetailsForm');"  
                                 }
                )

이 솔루션은 http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation 에서 구할 수 있습니다.

javascript 파일에 넣을 수 있는 작은 스니펫을 작성했습니다.이 스니펫은 Ajax 로딩된 모든 폼을 처리합니다.

//enable unobtrusive validation for ajax loaded forms
$(document).ajaxSuccess(function (event, xhr, settings) {
    //process only if html was returned
    if ($.inArray('html', settings.dataTypes) >= 0) {
        //will parse the element with given id for unobtrusive validation
        function parseUnobtrusive(elementId) {
            if (elementId) {
                $.validator.unobtrusive.parse('#' + elementId);
            }
        }

        //get the form objects that were loaded.  Search within divs
        //in case the form is the root element in the string
        var forms = $('form', '<div>' + xhr.responseText + '</div>');

        //process each form retrieved by the ajax call
        $(forms).each(function () {
            //get the form id and trigger the parsing.
            //timout necessary for first time form loads to settle in
            var formId = this.id;
            setTimeout(function () { parseUnobtrusive(formId); }, 100);
        });
    }
});

또 다른 선택지, 차라리 속임수였지, 나한테는 통했어.Ajax 콜에 의해 반환되는 부분 뷰의 선두에 다음 행을 추가합니다.

this.ViewContext.FormContext = new FormContext(); 

언급

내부 작업 검증만 받을 수 있었습니다.OnCompleteOnSuccess:

AJAX 코드는 다음과 같습니다.

@using (Ajax.BeginForm("Index", null, 
                       new AjaxOptions { OnSuccess = "onSuccess", 
                                         OnComplete = "onComplete"}, 
                       new { id = "mainForm" }))

제 대본은 다음과 같습니다.

function onComplete(result) {
    $.validator.unobtrusive.parse("#mainForm");
    alert("Complete");
};

언급URL : https://stackoverflow.com/questions/7048726/mvc3-unobtrusive-validation-not-working-after-ajax-call