0

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

单击“Beach Search”，然后单击“Select a Coastline”或“Select a Town”将起作用，但之后没有刷新就什么也做不了。

有两个下拉菜单，但如果我删除一个下拉菜单并没有什么不同。

干杯，

麦克风

4

2 回答 2

0

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

部分视图只是一种 ASP.NET MVC 发明，允许您在页面之间共享 HTML 片段。将页面呈现给浏览器后，您只需处理 HTML 和 jQuery。

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

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

至于故障排除，请尝试：

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

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

于 2012-01-25T01:19:48.370 回答
0

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

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

阅读jQuery 文档.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 () { ... });

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

于 2012-01-25T01:27:19.207 回答