无法将部分视图显示为 JQuery Mobile 对话框

Posted 2023-05-09

【中文标题】无法将部分视图显示为 JQuery Mobile 对话框

【英文标题】：Unable to display Partial View as JQuery Mobile dialog

【发布时间】：2012-08-04 03:47:09

【问题描述】：

我整理了一个简单的例子：

我有一个缩略图列表，我想在选择列表中的图像时显示更大的图像：

@if (Model.GalleryIcon.Any())

    foreach (var cell in Model.GalleryIcon)
      
        <a href="/Logo/MobileImage?url=@cell.TargetImagePath" data-rel="dialog" data-transition="pop" ><img src="@cell.ThumbInvPath" /></a>        
        

/Logo/MobileImage?url=@cell.TargetImagePath 返回一个局部视图，其中@Model 是一个 imagePath 字符串：

@model string

<div id="logo-image-wrap">
      <img src='@Model' id="logo-wrap-mobile-image"/>
      <br />
      <a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
 </div>

这项工作是我在锚上设置 rel="external" 并简单地在新的单独页面中打开图像，但它不能用作对话框。 当从列表中选择缩略图图像时，会出现一个空白对话框，并显示“未定义”

当从列表中选择缩略图时，如何在对话框中使用图像详细信息来显示部分视图加载？

谢谢。

【参考方案1】：

编辑三：

对于任何试图利用我的回答的人，我深表歉意。我不知何故错过了问题的整个“移动”部分，所以我在这里的例子+解释完全无关紧要。如果您想查看以前编辑的代码和其他内容，请单击答案下方的“已编辑”链接。

在与 OP 讨论了这个问题后，我们认为这样的事情可能会起作用（但需要在我们知道之前进行测试）：

修改生成的锚点，为我们的 jQuery 绑定添加一个钩子：

<ul>
...
    <li><a class="btn" href="someurl">Art</a></li>
...
</ul>

然后，我们需要为这些链接的点击事件添加一个处理程序：

$('a.btn').on('click', function(event)
    event.preventDefault();
    var href = $(this).attr('href');
    $.mobile.changePage( href,  role: 'dialog', transition: 'slide'  );
);

这应该做什么它向我们想要显示的页面发出请求，该页面被 jQuery Mobile 框架劫持。第二个参数告诉框架将页面显示为对话框，而不是“导航”到它。

【讨论】：

请。我不必为列表中的所有项目加载部分视图，是吗？

取决于你的意思。发布示例后，我的意思可能会更明显。

无论何时。这是你的问题。只要记住对任何看起来不明显的事情寻求解释。

再次编辑答案。我想我想太多了。看看第二个例子是否更有意义。

谢谢蒂森。就像我说的，这只是一个简单的例子。如果我确实有一个更复杂的模型绑定部分视图需要显示为对话框，我是否真的需要预加载每个可能最终成为页面上模态对话框的实例？例如，如果我的列表中有 100 个缩略图图像，我是否需要将 100 个填充了模型数据的占位符部分视图预加载到 DIV 中，然后才能正确打开对话框？这对我来说没有意义。谢谢阿甘

【参考方案2】：

我认为您可能会尝试通过 onclick 事件而不是动态 dom 加载的内联语句来调用对话框。通过这种方式，您可能有机会加载创建的 dom 元素，而不是正在处理的元素。在 onclick 事件中，您还可以在发送到对话框之前通过 .load 刷新 dom。

【参考方案3】：

详细解决办法贴在这里：

http://usnitch.blogspot.com/2012/08/jquery-mobile-how-to-dynamically-load.html