Question

我正在使用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操作方法呈现的部分视图未在DynamicAirOptions div中加载，而是在新页面中加载。

对问题可能是什么有任何想法？当我使用html.BeginForm帮助程序时，它工作正常，但我改为使用ajax帮助程序，因为我需要将结果加载到特定的div中。有没有办法用html帮助器指定TargetID？

Answer 1

我会警告不要使用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被禁用或根本不可用（例如用于盲人的许多屏幕阅读器），表单仍然可以提交标准旧方法并返回包含结果的新页面。

Answer 2

你有没有在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>

Answer 3

我的问题是在布局中使用以下内容。我认为它正在加载引起冲突的不必要文件。在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>

Ajax.BeginForm帮助器没有将部分视图加载到指定的DIV中

3 个答案: