2010-10-01 5 views
8

Я обновляю DIV с частичным видом, используя что-то вроде этого:Как обновить div с помощью Ajax.BeginForm И выполнить функцию javascript?

<% using (Ajax.BeginForm("Action", "Controller", 
       new { id=Model.id }, 
       new AjaxOptions 
       { 
        UpdateTargetId = "divId", 
        InsertionMode = InsertionMode.InsertAfter, 
       })) 
    { %> 

и его работает нормально, возвращаемый вид получает appened к DIV, но я теперь нужен выполнить JavaScript, когда пост успешный, поэтому я подумал: «Просто, просто добавьте OnSuccess = "MyJsFunc()"» в AjaxOptions, но после этого он прекратил работать! теперь страница обновляется, и отображается только возвращенный частичный вид :(, я даже пробовал с простым Alert("Hi") и не работал. Как я могу заставить это работать?

(кстати, я думаю, это может быть DUP из https://stackoverflow.com/questions/1994754/execute-javascript-after-loading-a-mvc-page-using-ajax-beginrouteform, но этот вопрос был заброшен без ответа)

+0

+1 по этому вопросу; Я считаю, что сам видел такое же поведение; используя ASP.NET 4.0 с MVC2 и C#. Каждый раз, когда я добавляю значение члена OnSuccess в AjaxOptions, форма Ajax, похоже, превращается в обычную форму. Я только начал использовать jQuery.form для отправки таких форм сейчас, но я тоже хотел бы это выяснить! –

+0

Хм, я также использую ASP.NET 4 и MVC2 и C# –

+0

Возможный дубликат [Назначение функции Javascript для свойства AjaxOptions OnSuccess вызывает ошибку - ASP.NET MVC] (http://stackoverflow.com/questions/695729/assign-a-javascript-function-to -ajaxoptions-onsuccess-property-raise-an-error-a) – bzlm

ответ

16

Любые причины не делать это по-своему (ведь мы в 2010 году)? Дамп MS AJAX, где он принадлежит вместе со всеми помощниками Ajax.*, которые зависят от него и создают правильный код. Хотя использование MS AJAX в классических веб-формах могло быть оправдано из-за UpdatePanels и т. Д. ... это было сделано в новом приложении ASP.NET MVC сегодня, особенно после того, как Microsoft полностью охватила jQuery, кажется плохой идеей.

Таким образом, после тирады вот моя рекомендация:

<% using (Html.BeginForm("Action", "Controller", new { id = Model.id }) { %> 

, а затем присоедините представить обработчик ненавязчиво с помощью JQuery в отдельном файле:

$(function() { 
    $('form').submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      success: function(result) { 
       // feel free to execute any code 
       // in the success callback 
       $('#result').html(result); 
      } 
     }); 
     return false; 
    }); 
}); 

или используя отличную jquery form plugin:

$(function() { 
    $('form').ajaxForm(function(result) { 
     // feel free to execute any code 
     // in the success callback 
     $('#result').html(result); 
    }); 
}); 

Преимущества такого подхода:

  • Ненавязчивый
  • Четкое разделение между разметкой и JavaScript
  • Кэширование файлов JavaScript и уменьшения использования полосы пропускания

Bonus выгоды: нет головных болей.

+0

Как передать идентификатор модели функции .ajax? –

+0

@ Ник Масао, вы можете включить его в скрытое поле внутри формы. –

+0

@Nick Masao, вы также можете включить опцию «данные» в блоке параметров, передаваемом в параметр ajax. И.Е. $ .ajax ({..., data: {id: @ Model.id}, ...}); – Brian

5

Я продолжал смотреть вокруг и нашел ответ здесь:

Assign a Javascript function to AjaxOptions OnSuccess property raise an error - ASP.NET MVC (с ответом, который не был выбран)

Цитирование Atzu

Если вам нужно передать какой-либо параметр в событие OnSuccess, возможно, вам нужно будет напишите funcion таким образом.

OnSuccess = "function(){exampleFunction('" + param1 + "');} 

и он работал для меня!

Смежные вопросы