Geek Answers Handbook

Ajax.BeginForm Helper Does Not Load Partial View into Specified DIV

I am working with MVC trying to load form submission results into a specific DIV. Below is the code for my form:

<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>

I have included the necessary js files in my site master:

<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>

But somehow, the partial view displayed by the AirOption / ShopByAirCriteria action method is not loaded into the DynamicAirOptions div, but on a new page.

Any idea on what might be the problem? It worked correctly when I used the html.BeginForm helper, but I changed it to use the ajax helper because I need to load the results into a specific div. Is there a way to specify a TargetID using the html helper?

+4
2

Ajax.BeginForm. Web Forms , , . , , , . , ; AJAX, , .

, Html.BeginForm, JavaScript. AJAX, , . jQuery, :

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

, . , , JavaScript (, ), - .

+4

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>
0

More articles:


All Articles