代码之家 › 专栏 › 技术社区 › Guzmán Fernández

Ajax.BeginForm帮助程序未将部分视图加载到指定的DIV中

ajaxform asp.net-ajax model-view-controller asp.net-mvc

4

Guzmán Fernández · 技术社区 · 12 年前

我正在使用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操作方法渲染的Partial视图并没有加载到DynamicAirOptions div中,而是加载到一个新页面中。

你知道问题可能是什么吗? 当我使用html.BeginForm帮助程序时,它工作正常,但我将其改为使用ajax帮助程序,因为我需要将结果加载到特定的div中。有什么方法可以用html帮助程序指定TargetID吗?

3 回复 | 直到 12 年前

1

4

Chris Pratt 12 年前

我会警告不要使用 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被禁用或根本不可用(例如许多盲人使用的屏幕阅读器),表单仍然可以以标准的旧方式提交,并返回一个带有结果的新页面。

2

0

Szakus 12 年前

在jquery.uno唐突-ajax.js之前包含jquery了吗?也可能是一些javascript错误,请检查浏览器开发工具中的Console。我已经将您的代码粘贴到空白的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>

3

0

Dumber_Texan2 7 年前

我的问题是在布局中使用以下内容。我认为是加载了不必要的文件导致了冲突。这一切在Edge和Safari中都很好,但PartialView不会在Chrome上的div中渲染。它将显示在一个新页面中。

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