jquery移动多页MVC 4

Question

I am just trying to do a simple multiple page with jquery mobile but something with the cache (i think) messes it up. 我只是试图用jquery移动设备做一个简单的多页面，但是有一些缓存（我认为）搞砸了它。

this is my Layout: _MobileSwipe.Mobile.cshtml 这是我的布局：_MobileSwipe.Mobile.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8" />
    <title>@ViewBag.Title </title>
    @Html.MetaAcceptLanguage()
    <script src="@Url.Content("~/Scripts/kendo/2012.3.1121/jquery.min.js")"></script>
    @Scripts.Render("~/bundles/jquerymobile")
    @Styles.Render("~/Content/Mobile/css")
    @Styles.Render("~/Content/jquerymobile/css")
</head>
<body>
    @RenderBody()
</body>
</html>


<script>
    $(document).ready(function () {
        $.ajaxSetup({ cache: false });

    });
</script>

This is my View: 这是我的观点：

 @model List<ExtremeOnline.Models.BookingDays>

@{
    ViewBag.Title = "Välj din tid";
    Layout = "~/Views/Shared/_MobileSwipe.Mobile.cshtml";
}

<div data-role="page" id="1" class="ui-page">
    page 1
</div>
<div data-role="page" id="2" class="ui-page">
    page 2
</div>

 <script>
        $('div.ui-page').live("swipeleft", function () {
            var nextpage = $(this).next('div[data-role="page"]');
            // swipe using id of next page if exists
            if (nextpage.length > 0) {
                $.mobile.changePage(nextpage, 'slide');
            }
        });
        $('div.ui-page').live("swiperight", function () {
            var prevpage = $(this).prev('div[data-role="page"]');
            // swipe using id of next page if exists
            if (prevpage.length > 0) {
                $.mobile.changePage(prevpage, 'slide', true);
            }
        });

    </script>

Here is the form 这是表格

  @using (Html.BeginForm("SearchMobile", "Boka", FormMethod.Post))
            {
                <input class="searchbutton" id="searchBtn" data-ajax="false" type="submit" data-theme="b" value="Sök bokning" />
            }

        </div>

The thing is when i run this, the page's layout i sent the post from is cached and displayed in source code. 事情就是当我运行这个时，我发送帖子的页面布局被缓存并显示在源代码中。

Why is the layout cached? 为什么要缓存布局？ What to do? 该怎么办？

Answer 1

JQuery mobile relies on the page events for multiple page layouts. JQuery mobile依赖于多页面布局的页面事件。 instead of using $(document).ready(). 而不是使用$（document）.ready（）。 Use the Page events listed here: http://api.jquerymobile.com/category/events/ 使用此处列出的页面事件： http ： //api.jquerymobile.com/category/events/

You can then disable ajax navigation in the mobile init event 然后，您可以在移动init事件中禁用ajax导航

$(document).on(“mobileinit”, function() { 
    $.mobile.ajaxEnabled = false; 
});

you also need to move the data-ajax="false" attribute to the form instead of the input button. 您还需要将data-ajax =“false”属性移动到表单而不是输入按钮。

@using (Html.BeginForm("SearchMobile", "Boka", FormMethod.Post, new {data_ajax="false"}))
{
    <input class="searchbutton" id="searchBtn" type="submit" data-theme="b" value="Sök bokning" />
}

jquery移动多页MVC 4

问题描述

1 个解决方案

解决方案1
0 2013-12-07 05:33:12

jquery移动多页MVC 4

问题描述

1 个解决方案

解决方案1 0 2013-12-07 05:33:12

解决方案1
0 2013-12-07 05:33:12