Question

我有一个下拉列表，自动提交表单并通过部分视图执行我在整个项目中使用的搜索，但它只在我第一次使用它时才有效，除非我刷新页面。这是一个带有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字符串，例如关于/ 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/

单击“海滩搜索”然后“选择海岸线”或“选择城镇”将起作用，但在此之后没有刷新。

有两个下拉菜单，但如果删除一个下拉菜单没有任何区别。

干杯，

麦克

Answer 1

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

部分视图只是一个ASP.NET MVC设计，允许您在页面之间共享HTML片段。一旦页面呈现给浏览器，您只需要处理HTML和jQuery。

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

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

就问题拍摄而言，请尝试：

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

如果你要发布一个链接到你的网站，我会很高兴看看jQuery方面。

Answer 2

在没有看到整个页面的情况下很难确定，但是问题的一个可能原因是页面部分的下拉列表在表单发布时重新加载。

如果是这样，那么您的问题是您正在将事件处理程序连接到一个下拉列表，然后期望该事件处理程序处理来自所有后续下拉列表的更改事件，这些下拉列表具有相同的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或更高版本，则{@ 1}}已弃用，应由.live()替换。为此，请替换

.on()

与

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

详细信息可在documentation for .live()中找到。感谢stian.net指出这一点。

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

2 个答案: