Проверка Jquery ASP.NET MVC не сработает, если частичная загрузка через ajax

Question

Я использую опцию проверки jquery для выполнения проверки на стороне клиента при частичном просмотре.Частичное представление загружается через ajax в модальное диалоговое окно, используя URL-адрес (почти как Html.RenderAction).

Однако, когда загружено частичное представление, метаданные проверки не выводятся на страницу. Обычно вы видите что-то вроде этого:

//<![CDATA[
3if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
4window.mvcClientValidationMetadata.push({"Fields":[],"FormId":"form0","ReplaceValidationSummary":false});
5//]]> 

Мой вопрос очень похож на этот ASP.NET MVC 2 загрузка частичного представления с использованием jQuery - без проверки на стороне клиента , но я не хочу использовать проверку Microsoft, поскольку я знаком с jQuery.validate.

Answer 1

Если я правильно понял вашу проблему, то это может помочь.

В приведенном ниже примере я использую Ajax.BeginForm для обновления div (id = "div_to_update"), но это может быть и другой метод.

Важной вещью является OnSuccess, который запускает метод ниже. Это обновит содержимое div , а выполнит все javascripts, включая вашу проверку jquery. Первоначально я нашел это решение на форумах Telerik.

<div id="div_to_update">
<% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { OnSuccess = "updatePlaceholder", UpdateTargetId = "div_to_update", InsertionMode = InsertionMode.Replace }, new { id = "translationAjaxForm" }))
<% } %>

<script type="text/javascript">
    function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();

        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();

        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);

        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>
</div>

Answer 2

Частично проблема заключается в том, что сценарий, включенный в ответ, не выполняется. В моем случае мне пришлось работать с решением на основе решения jcruz, которое выбирает скрипт из определенной формы ajax:

var scripts = $('div#id_of_ajax_form>script');
for (var i = 0; i < scripts.length; i++) {
    //executes javascript
    $.globalEval(scripts[i].text);
}

Вторая часть проблемы заключается в том, что проверка Microsoft инициализируется после загрузки при вызове Sys.Mvc.FormContext._Application_Load. Поэтому после выполнения необходимого сценария, содержащего спецификации поля проверки, я вызываю ту же функцию, которая вызывается при загрузке документа:

Sys.Mvc.FormContext._Application_Load();

надеюсь, это поможет. Любые комментарии будут очень благодарны.

Answer 3

У меня была такая же проблема, и вот как я ее решил.

Откройте MicrosoftMvcJQueryValidation.js и внесите следующие изменения.

Добавить эту функцию

function __MVC_ApplyClientValidationMetadata() {
   var allFormOptions = window.mvcClientValidationMetadata;
   if (allFormOptions) {
      while (allFormOptions.length > 0) {
         var thisFormOptions = allFormOptions.pop();
         __MVC_EnableClientValidation(thisFormOptions);
       }
   }
}

Найдите $ (document) .ready () и замените его на

$(document).ready(__MVC_ApplyClientValidationMetadata); 

Теперь просто сделайте следующее

Если вы используете html (), тогда просто вызовите __MVC_ApplyClientValidationMetadata после загрузки html в элемент.

$("#someDiv").html(responseHtml);
__MVC_ApplyClientValidationMetadata();

Если вы используете load (), у вас есть другая проблема. Он удаляет все теги сценария. Поэтому вы должны сделать что-то вроде следующего.

$("#someDiv").load("/a/partialview/request" , function(response){
   var scripts = $(response).filter("script");
   for (var i = 0; i < scripts.length; i++) {
      //executes javascript
      $.globalEval(scripts[i].text);
   }
   __MVC_ApplyClientValidationMetadata();
});

Еще одна вещь. Убедитесь, что формы, которые вы загружаете с помощью ajax, имеют уникальный идентификатор. По умолчанию все формы получают идентификатор form0.

Answer 4

Возможно, я в замешательстве, но не могли бы вы просто позвонить валидатору при отправке и не отправить в случае неудачи?

$(function() {
    $("form:first").validate( { .. options for validator .. });

    $("submit").click(function() {
        if(!$("form:first").valid()){ 
             return false;
        }
        // Submit form here
    });

});

Answer 5

У меня были похожие проблемы с загрузкой JavaScript, когда я динамически помещал контент в DOM. Как вы вставляете контент в DOM? В jQuery есть несколько методов, которые удаляют JavaScript при вставке, попробуйте использовать это:

$("#mydiv").html(newContent);

Надеюсь, это поможет вам!

Answer 6

что понимает ваша проблема, так это то, что при частичном обновлении страницы соответствующие элементы DOM вставляются заново, т.е. они являются новыми и не имеют требуемой инициализации $ .validate.

Я думал, что вы могли быкаким-то образом используйте $ .live / $. livequery для привязки объектов $ .validate к этим полям, чтобы после каждого частичного обновления страницы код jquery повторно инициализировал $ .validate для этих полей.Возможно, вы могли бы использовать класс css, чтобы пометить эти элементы DOM.

То, что я предлагаю, это вид позднего связывания и использовать более новые события, относящиеся к вставке DOM.

Надеюсь, это поможет !!

Answer 7

Пожалуйста, проверьте эту ссылку: Выполнение динамически загруженного JavaScript
Он содержит исправления, которые предполагают выполнение javascript в динамически загружаемых (через AJAX) частичных представлениях.