Помощник Ajax.BeginForm не загружает частичное представление в указанный DIV

Я работаю с MVC, пытаясь загрузить результаты отправки формы в определенный DIV. Ниже код моей формы:

<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions {            UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnBegin = "return loadingBar();" }, new { @name = "AirOptionSegment_Air" }))     
   { %>

<%
    Html.RenderPartial("AirOneWay", Model);
%>
<br/>
<div class="agent-actions">
    <a href="" class="btn blue" style="margin-right: 25px;">Load Original Data</a>
    <input type="submit" class="btn green" id="a1"  name="SearchAir" value="Search" />
</div>
<% } %>
</div>

Я включил необходимые файлы js в свой мастер сайта:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>

Но каким-то образом частичное представление, отображаемое методом действия AirOption/ShopByAirCriteria, загружается не в div DynamicAirOptions, а на новой странице.

Есть идеи, в чем может быть проблема? Он работал правильно, когда я использовал помощник html.BeginForm, но я изменил его, чтобы вместо этого использовать помощник ajax, потому что мне нужно загрузить результаты в определенный div. Есть ли способ указать TargetID с помощью помощника html?


asp.net-mvc model-view-controller asp.net-ajax ajaxform
person Guzmán Fernández    schedule 21.10.2013    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я бы предостерег от использования Ajax.BeginForm. Это немного унаследовано от Web Forms, и, по моему скромному мнению, его нельзя использовать ни при каких обстоятельствах. Он скрывает логику и, следовательно, неизбежно приводит разработчика к ситуации, подобной вашей, когда он не работает без видимой причины. Явное всегда лучше неявного; когда вы управляете вызовом AJAX, вы всегда будете знать, почему он работает или не работает.

Итак, просто используйте обычный Html.BeginForm, а затем привяжите к событию отправки какой-нибудь пользовательский JavaScript. Сделайте вызов AJAX, чтобы отправить форму в обработчике событий, а затем отобразите полученный ответ на странице в нужном вам div. Поскольку вы уже используете jQuery, это очень просто:

$('#YourForm').on('submit', function (evt) {
    evt.preventDefault();
    $.post('/some/url', $(this).serialize(), function (response) {
        $('#YourDiv').html(response); // assuming response is HTML
    });
});

Дополнительным преимуществом этого подхода является то, что вы не наносите ущерб стандартной форме. Это по-прежнему обычная старая форма, поэтому, если JavaScript отключен или вообще недоступен (например, во многих программах чтения с экрана, используемых для слепых), форма может по-прежнему отправлять стандартный старый способ и возвращать новую страницу с результатами.

person Chris Pratt    schedule 21.10.2013
comment
Да сэр! Извините, что долго не отвечал, но я был в отпуске и только что увидел ответ. Взлом формы с помощью JQuery сработал как шарм! Большое спасибо за помощь =) - person Guzmán Fernández; 31.10.2013
comment
Отлично работает Крис! Спасибо. Мне пришлось поместить ваш код в функцию window.onload = function () {}, поскольку страница DOM еще не была загружена, чтобы ваш код JQuery мог найти html. Как только я это сделал, это сработало отлично! Благодарю. - person Stokely; 27.06.2017

arrow_upward
0
arrow_downward

Вы включили jquery перед jquery.unobtrusive-ajax.js? это также может быть какая-то ошибка javascript, проверьте консоль в инструменте разработчика вашего браузера. Я вставил ваш код в пустое приложение mvc4 и работает как положено.

Мастер:

<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>

Вид:

<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }, new { @name = "AirOptionSegment_Air" }))     
   { %>
    <div id="DynamicAirOptions">
    </div>
<br/>
    <input type="submit" class="btn green" id="a1"  name="SearchAir" value="Search" />
<% } %>
</div>
person Szakus    schedule 22.10.2013

arrow_upward
0
arrow_downward

Моя проблема заключалась в использовании следующего в моем макете. Я считаю, что загрузка ненужных файлов вызывала конфликт. Все это отлично работало в Edge и Safari, но PartialView не отображался внутри div в Chrome. Он будет отображаться на новой странице.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

Вместо использования пакетов я выбрал это, и Ajax.BeginForm отлично работает!

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
person Dumber_Texan2    schedule 24.04.2019
comment
Возможно, вам также придется добавить это в web.config. ‹appSettings› ‹добавить ключ=UnobtrusiveJavaScriptEnabled значение=true /› ‹/appSettings› - person Dumber_Texan2; 03.04.2020