jquerymobile app multipage doc不会渲染所有页面

时间:2012-11-23 23:14:57

标签: c# jquery jquery-mobile asp.net-mvc-4

我有一个jquerymobile多页文档。 有了这个布局

@using ParadigmaNet.Infraestructure;
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" href="@Url.Content("~/css/ParadigmaNTouch.css")" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
 </head>
 <body>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @Scripts.Render("~/Scripts/paradigmaN_Ajax.js")
    <script type="text/javascript">
        var Wres = $(window).width();
        var Hres = $(window).height();
        document.cookie = "ScreenRes=" + Wres + "x" + Hres;
    </script>
    if (IsSectionDefined("scripts"))
    {
        @RenderSection("scripts", false)
    }
 </body>
</html>

有两页的文件

@model ParadigmaNet.Areas.Documentos.Models.Merlin_MovimientoDocumentosFacturacion_Enc 
@using ParadigmaNet.Infraestructure
@using ParadigmaNet.Areas.Items.Models
@using ParadigmaNet.Areas.Documentos.Models
@using ParadigmaNet.Areas.Items.Controllers;

@{
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@*Pagina principal de pedidos*@
<div id="DocumentoPedidoPrincipal" data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed" >
        @Html.ActionLink("Cancelar", "DocsCancelar", "Docs", new { area = "Documentos" }, new { StrIdDocumento = "", data_icon="delete" })
        <h1 id="NombreItem">Ubicacion: @SessionBag.Current.IntIdUbicacion</h1>
        @Html.ActionLink("Grabar", "DocsGuardar", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_icon="check" })
        <div style="padding:2px;">
            @if (ViewBag.ParaEdicion)
            {
                @MyHelpers.menu("MenuItemEnPedido", new System.Collections.ArrayList { @Html.ActionLink("Detalle", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { @class = "no-Ajax ui-btn ui-btn-up-a" }) })
            }
            else
            {
                string detalle = "<a id=" + ParadigmaNTouchHelpers.quote("MostrarDetallePedido") + " href=" + ParadigmaNTouchHelpers.quote("#") + " onclick=" + ParadigmaNTouchHelpers.quote("mostrarDetallePedido(true);") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">";
                string condiciones = "<a id=" + ParadigmaNTouchHelpers.quote("ItemCondiciones") + " href=" + ParadigmaNTouchHelpers.quote("#CondicionesDocumento") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">Condiciones</a>";
                @MyHelpers.menu("MenuItemEnPedido",
                new System.Collections.ArrayList 
                { 
                       @Html.ActionLink("Adiciones", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="a" , id="ItemAdiciones" , @class="ui-disabled"})
                      ,@Html.ActionLink("Componentes", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="c" , id="ItemComponentes" , @class="ui-disabled"})
                      ,@MvcHtmlString.Create(condiciones) //@Html.ActionLink("Condiciones", "", "", new {}, new { data_role="button", data_ajax = "false" ,data_theme="e" , id="ItemCondiciones" , @class="ui-disabled" , onclick="mostrarCondiciones(true)"})
                      ,@Html.ActionLink("Eliminar", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="d" , id="ItemEliminar" , disable="true",@class="ui-disabled"})
                      ,@Html.ActionLink("Detalle", "", "", new {} , new { data_role="button", id = "MostrarDetallePedido", data_ajax = "false" ,data_theme="b", onclick="mostrarDetallePedido(true)"})
                }
                , 1, "c")
            }
        </div>
    </div>
    <div id="BodyContent" data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
        <div id="LineasTouchContainer">
             @ParadigmaNTouchHelpers.TouchContainer(ViewBag.LineasList, ViewBag.LineasTouchContainer);
        </div>

        <div id="ItemsTouchContainer">
            @ParadigmaNTouchHelpers.TouchContainer(ViewBag.ItemsList, ViewBag.ItemsTouchContainer)
        </div>

        <div id="GruposTouchContainer">
        </div>

        <div id="QuickList">
            @ParadigmaNTouchHelpers.TouchContainer(ViewBag.QList, ViewBag.QuickListAccess)
        </div>

        <div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetalleDocumento" class="ParadigmaNDetallePedidoHide">
            <div data-role='button' onclick="mostrarDetallePedido(false)" data-theme="b">Ocultar Detalle</div>
            <div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetallePedidoRegistros">
                @if (1==1){
                    Merlin_MovimientoDocumentosFacturacion_Enc DatosDoc = (Merlin_MovimientoDocumentosFacturacion_Enc)SessionBag.Current.DocEditar;
                    <div data-role="collapsible" data-collapsed="false">
                        <h3>Datos del Pedido</h3>
                        Abierto por @DatosDoc.StrUsuarioGenera<br />
                        A las @DatosDoc.DatFechaDocumento<br />    
                        Mesa: @DatosDoc.IntIdMesa
                     </div>        
                 }
            </div>
            @foreach (Merlin_Movimientos_Pedidos Item in SessionBag.Current.DocEditar.Merlin_MovimientoDocumentos_Pedidos_Enc.Merlin_Movimientos_Pedidos)
            {
                Html.RenderPartial("DocsDetalleTransaccionPedido", Item);
            }
        </div>
    </div>        
</div>

@*Pagina de condiciones*@
<div id="CondicionesDocumento" data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed" >
        <a href="#" data-icon="home" onclick="mostrarCondiciones(false)">Volver</a> 
        <h1 id="TituloCondiciones">Editando condiciones</h1>
        @if (1 == 1)
        {
           <a>Hola Mundo</a>
        }
    </div>
    <div data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
        <div class="ui-grid-a">
            <div class="ui-block-a" style="width:50%; top:1em; position:relative;left:0em;" data-theme="a" >
                <ul id ="CondicionesDocumentoDisponibles" data-role="listview" data-filter="true" data-inset="true">
                </ul>
            </div>
            <div class="ui-block-b" style="width:48%;position:relative; left:1%;">       
                <ul id ="CondicionesDocumentoSeleccionadas" data-role="listview" data-filter="false" data-inset="true" style="left:51%;top:1em;postion:relative;" >
                </ul>
            </div>       
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        $('#CondicionesDocumentoDisponibles').listview();
        $('#CondicionesDocumentoSeleccionadas').listview();
        $('#DetalleDocumento').listview();
    </script>
}

通过redirecttoaction()将文档调用到控制器方法中,直到此处一切正常。

问题是第二页id =“CondicionesDocumento”没有渲染到_Layout

2 个答案:

答案 0 :(得分:0)

我看不到页面“CondicionesDocumento”被加载或链接到的任何地方......我错过了什么?您需要明确链接到页面:

<a href="#CondicionesDocumento">Second Page</a>

或通过JavaScript加载页面:

$.mobile.changePage("CondicionesDocumento);

答案 1 :(得分:0)

问题是jQUery mobile仅为第一次调用呈现所有页面,其他调用仅呈现文档的第一页。

第一次通话后,每个文件只能包含一页。