Question

如果我无法使用jQuery Mobile，以下代码可以正常运行！

表格：

@using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
    @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}

Javascript：

<script type="text/javascript">
    $(function () {
        $("#TownID").live('change', function () {
            //$("#TownID").change(function () {
            var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
            $('#TheForm1').attr('action', actionUrl);
            $('#TheForm1').submit();
        });
    });
</script>

但是如果我在网站上包装jQuery Mobile，那么每次我提交表单时，在我的日志中只会将ID字段一次又一次地粘贴到URL字符串的末尾。这只发生在我的日志中，而不是在浏览器中。在浏览器中，它仍然看起来像一样正在做正确的事情！ E.g ..

第一次

www.mysite.com/Home/SearchTown/2

www.mysite.com/Home/SearchTown/2/2 第二次

www.mysite.com/Home/SearchTown/2/2/2 第三次

但是在浏览器中它仍然看起来正确www.mysite.com/Home/SearchTown/2

为什么jQuery Mobile会这样做？

Answer 1

这很有可能发生，因为每次POST表单时，它都使用AJAX加载响应，并且加载的页面中包含重复的元素ID。

我猜这里，但根据你描述的内容，听起来就像你的表单回复到一个页面上有相同的表单标记。每次您的表单帖子呈现下一页时，您都会将另一个 #TheForm1添加到您的DOM中（因为jQuery Mobile会将之前加载的页面保留在DOM中，只需在活动{{1}之间切换元素）。由于这种行为，一旦页面上有多个data-role="page"，选择器#TheForm1将只返回与该ID匹配的DOM中的第一个元素 - 这将是您发布的表单第一次。因此，每次发布时，您的代码都将使用您最初修改的表单元素的action属性 - 这就是您看到多个值附加到URL的原因。

在jQuery Mobile中，使用类名称和活动页面作为容器来识别元素几乎总是更好，因为您永远不知道在多个页面更改中DOM可能会重复多少次ID。因此，不要使用$('#TheForm')，而是指定一个类名，并将其与$('#TheForm1')：$.mobile.activePage结合使用。（您的选择框也是如此）。

作为替代方案，您可以通过向表单标记添加$('.Form1', $.mobile.activePage)来告诉jQuery Mobile不要增强您的表单。这将使其表现得像没有任何AJAX的普通整页回发。

修改

我在第3段中提出的观点是，您需要确保始终为当前可见页面选择正确的表单元素，而不是无意中返回一个隐藏在视图中的表单元素。 data-ajax="false"全局变量将为您提供当前可见页面的上下文，然后基于类的选择器（而不是基于Id）将确保在更改处理程序中检索正确的表单元素。像这样：

$.mobile.activePage

Answer 2

因为你提交的是漏洞页面而且jQuery mobile并不喜欢这样的东西，并且在每个POST之后它只是将ID附加到document.location ...我在一些移动项目中了解到...

代替此行$('#TheForm1').submit();执行以下操作：

var url = $('#TheForm1').attr('action') + '/' + $('#TownID').val();

$.post(url, $('#TheForm1').serialize(), function(data) {
    // do something with data if you send back something...
    // or just change page with jQuery Mobile API
});

return false;

Answer 3

我已经把这个放了足够长的时间，没有人有答案！

jQuery Mobile和MVC3自动提交

3 个答案: