4

我正在使用 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？

4

3 回答 3

4

我会警告不要使用Ajax.BeginForm. 这有点像 Web 表单的保留，以我的拙见，在任何情况下都不应该使用。它隐藏了逻辑，因此不可避免地导致开发人员陷入像您这样的情况，它不起作用并且没有明显的原因。显式总比隐式好；当您控制 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 被禁用或根本不可用（例如许多用于盲人的屏幕阅读器），该表单仍然可以提交标准的旧方式并返回带有结果的新页面。

于 2013-10-21T15:07:12.350 回答
0

您是否在 jquery.unobtrusive-ajax.js 之前包含了 jquery？也可能是一些 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>
于 2013-10-22T08:58:44.340 回答
0

我的问题是在我的布局中使用以下内容。我相信它正在加载导致冲突的不必要文件。在 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>
于 2019-04-24T15:04:33.447 回答