MVC4、jQuery Mobile 和 Javascript 自动提交只工作一次，直到刷新答案

【问题标题】：MVC4, jQuery Mobile and Javascript auto submit only working once until refreshMVC4、jQuery Mobile 和 Javascript 自动提交只工作一次，直到刷新
【发布时间】：2012-01-25 00:08:30
【问题描述】：

我有一个下拉列表，它可以自动提交表单并执行我在整个项目中通过部分视图使用的搜索，但它仅在我第一次使用时才有效，除非我刷新页面。这是一个带有 jQuery Mobile 的 MVC 4 项目。

这是我的部分视图中的代码，

<script type="text/javascript">
    $(function () {
        $("#CoastLineID").change(function () {
            var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val();
             $('#TheForm').attr('action', actionUrl);
             $('#TheForm').submit();
         });
    });
</script>
<p>
    @using (Html.BeginForm("SearchCoast", "Home", FormMethod.Post, new { id = "TheForm" }))
    {
        @Html.DropDownList("CoastLineID", (SelectList)ViewBag.ArticleId, "Select a Coastline")
    }
</p>

我想每次以某种方式加载使用局部视图的页面/视图时，我都需要能够刷新页面或列表。这是 jQuery 的问题吗？？？

任何想法，如果允许，我可以为该网站提供 URL？

更新/编辑

谢谢大家，

我遇到了一些混合 jQuery Mobile 和 MVC 的问题，主要是由于它们处理 URL 字符串的方式不同，所有这些都来自 15 年的 Web 开发。所有 jQuery Mobile 文档都处理经典的 URL 字符串，例如 about/us.html 这不是 MVC 方式！

这是我用于填充下拉列表的控制器代码，

var coastlines = db.CoastLines.Select(c => new { c.CoastLineID, c.CoastLineName });
ViewBag.CoastLineId = new SelectList(coastlines.AsEnumerable(), "CoastLineID", "CoastLineName", 0);

这是网站，

http://www.peninsulaguide.com.au/

单击“海滩搜索”，然后单击“选择海岸线”或“选择城镇”将起作用，但之后如果不刷新就什么也做不了。

有两个下拉菜单，但如果我删除一个也没有什么区别。

干杯，

迈克

【问题讨论】：

如果在表单调用的控制器中设置断点，它会被命中吗？据我所知，除非您采取措施阻止它，否则没有什么可以阻止您重新提交表单。在重新提交之前我已经构建了 jQuery 表单，我必须清除提交时的值以防止它。
据我所知，该 URL 会很有帮助并且是允许的。

标签： jquery asp.net-mvc mobile asp.net-mvc-4

【解决方案1】：

如果不查看整个页面，很难确定，但您的问题的一个可能原因是表单发布时重新加载的页面部分的下拉列表。

如果是这样，您的问题是您将一个事件处理程序连接到一个下拉列表，然后期望该事件处理程序处理所有后续下拉列表中的更改事件，这些下拉列表具有相同的 id。

阅读jQuery documentation 中的.live() 方法，然后将代码更改为：

$(function () {
    $("#CoastLineID").live('change', function () {
        var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val();
         $('#TheForm').attr('action', actionUrl);
         $('#TheForm').submit();
     });
});

注意：如果您使用的是 jQuery 1.7 或更高版本，.live() 已弃用，应替换为 .on()。为此，请替换

$("#CoastLineID").live('change', function () { ... });

与

$(document).on('change', '#CoastLineID', function () { ... });

详情请见documentation for .live()。感谢 stian.net 指出这一点。

【讨论】：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序
@stian.net：感谢您的指点！没有注意到，因为我还没有广泛使用 jQuery 1.7+。编辑了帖子以包含此信息。
你们太聪明了，它已经修复了它，但我每次都会弹出“错误加载页面”但它有效，那会是什么？ jQuery Mobile 很难测试，因为它不会给我错误消息！
刷新后它也只能工作一次，如果我也去画廊，它根本就不能工作！！！

【解决方案2】：

你所描述的似乎完全正确。表单可以根据需要多次重新提交，除非您采取措施阻止它，并且部分视图不应对此产生任何影响。

部分视图只是一种 ASP.NET MVC 设计，允许您在页面之间共享 HTML 的 sn-ps。将页面呈现给浏览器后，您只需处理 HTML 和 jQuery。

最可能的罪魁祸首是您的 jQuery 中的错误。如果没有看到正在呈现的 HTML，就很难解决，但我猜测正在发生两件事之一：

由于您选择要提交的值的方式，您可能会一遍又一遍地重新提交相同的搜索。
每次更改下拉菜单选择时，事件都不会正确触发。

至于故障排除，请尝试：

在控制器中设置断点以查看它是否被调用以及请求中返回了哪些搜索词。
在change 回调函数中添加console.log('something') 语句，以确保每次更改选择时都会调用它。

如果您要发布指向您网站的链接，我将很高兴了解 jQuery 方面。

【讨论】：