循环中的模式始终只显示第一个图像(Modals in loop display always only the first image)
我做了一个循环显示按钮作为用户帖子中的缩略图。 点击这个按钮后，缩小Bootstrap（4.0）模式显示完整的图像。
问题是，虽然按钮上的缩略图在每个帖子中都能正确加载，但它们都会打开一个具有相同完整图像的模式，并始终位于列表中的第一个模式。 问题是什么？
这是我的看法：
@model Dictionary<MyPigeons.Models.Entities.Post, List<MyPigeons.Models.Entities.PostImageGallery>> <div class="container"> @foreach (var item in Model) { <div class="card"> <div class="card-body"> <h5 class="card-title text-muted">@item.Key.UserProfile.FirstName @item.Key.UserProfile.LastName</h5> <h6 class="card-subtitle mb-3 text-muted">@item.Key.PostDate</h6> <p class="card-text">@item.Key.Content</p> @foreach (var itm in item.Value) { <button type="button" class="btn btn-light" data-toggle="modal" data-target="#Modal@itm.PostImageGalleryId"> <img class="img-fluid img-rounded" src="~/images/PostImages/@itm.ThumbnailName" alt="Card image"> </button> <div class="modal fade" id="Modal@itm.PostImageGalleryId" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content modal-lg"> <div class="modal-header"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> <div class="modal-body"> <img class="img-fluid" src="~/images/PostImages/@itm.ImageName" alt="Card image"> </div> </div> </div> </div> } </div> </div> } </div>foreach中的item.Value是类PostImageGallery，如下所示：
public class PostImageGallery { [Key] public string PostImageGalleryId { get; set; } public string ImageName { get; set; } public string ThumbnailName { get; set; } public string Path { get; set; } public DateTime AdditionTime { get; set; } [ForeignKey("PostForeignKey")] public string PostId { get; set; } public Post Post { get; set; } }我试图通过在其中插入@ itm.PostImageGalleryId来使模式ID唯一，但我不知道为什么浏览器将其视为纯文本，并且不会为其交换正确的值。 Bellow是浏览器代码探索的屏幕。
另外有趣的是，在附加屏幕上，按钮中的缩略图的路径和模态中的图像正确渲染的路径，但是实际上在点击按钮之后在模式中的什么样的显示是完全不同的图像，完全不同的名称比显示的同时在附件中浏览浏览器中的代码。
这是一个Bootstrap错误吗？ 任何想法如何绕过它？
I made a loop for displaying buttons as thumbnail images in users' posts. After clicking such button with miniature a Bootstrap(4.0) modal displays the full image.
The problem is, while the thumbnails on buttons load properly in every post, they all open a modal with the same full image, always the first from the list. What is the problem?
Here is my view:
@model Dictionary<MyPigeons.Models.Entities.Post, List<MyPigeons.Models.Entities.PostImageGallery>> <div class="container"> @foreach (var item in Model) { <div class="card"> <div class="card-body"> <h5 class="card-title text-muted">@item.Key.UserProfile.FirstName @item.Key.UserProfile.LastName</h5> <h6 class="card-subtitle mb-3 text-muted">@item.Key.PostDate</h6> <p class="card-text">@item.Key.Content</p> @foreach (var itm in item.Value) { <button type="button" class="btn btn-light" data-toggle="modal" data-target="#Modal@itm.PostImageGalleryId"> <img class="img-fluid img-rounded" src="~/images/PostImages/@itm.ThumbnailName" alt="Card image"> </button> <div class="modal fade" id="Modal@itm.PostImageGalleryId" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content modal-lg"> <div class="modal-header"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> <div class="modal-body"> <img class="img-fluid" src="~/images/PostImages/@itm.ImageName" alt="Card image"> </div> </div> </div> </div> } </div> </div> } </div>the item.Value in foreach is of class PostImageGallery, which is as follows:
public class PostImageGallery { [Key] public string PostImageGalleryId { get; set; } public string ImageName { get; set; } public string ThumbnailName { get; set; } public string Path { get; set; } public DateTime AdditionTime { get; set; } [ForeignKey("PostForeignKey")] public string PostId { get; set; } public Post Post { get; set; } }I've tried to make the modal id unique by inserting the @itm.PostImageGalleryId in it but I don't know why the browser sees it as plain text and doesn't exchange the proper value for it. Bellow is the screen from browser's code exploration.
What is also interesting, on the attached screen, the paths to the thumbnail in the button and to the image in modal rendered correctly, but in fact what diplays in the modal after clicking the button is completely different image with completely different name than this showing while exploring the code in the browser as attached.
Is this a Bootstrap bug? Any ideas how to bypass it?
原文：https://stackoverflow.com/questions/49519153
最满意答案
好问题，首先我们需要明确的是，“prerender”和“prefetch”是具有许多不同限制和行为的两个不同特征。 这里的一个重要问题是，它们都会根据webrowser而略有不同，它们经常被误解和误用。
快速概览
预取预取的概念包含在HTML5规范中，该规范更适用于加载资源（样式表，js，图片等） - 这是因为它作为子资源加载到缓存中。 当预取浏览器下载的页面时（一旦当前页面被完全加载），链接页面的顶层（目标页面中的iframe不会被预取）。 预取整个页面可能会导致性能下降。 预取的好处是限制更高 - 预取过程是每个选项卡（而不是webbrowser实例），并且您可以设置许多用于预取的链接（IE <9 - 最大10个链接，Mozilla未知）。
prerender首先由Chrome提供，然后由IE11稍后实现 - 当添加到页面时，它将在后台执行链接页面的页面完全加载过程（在隐藏标签上） - 您可以看到它正在启动（一旦主页面加载）通过查看任务管理器（Chrome）。 这里的一个重要问题是
prerender process是针对浏览器的每个实例（而不是每个选项卡打开的），这意味着如果另一个站点已经打开并且启动了该进程，那么您可能会忽略或延迟（取决于哪个浏览器）。 另一个有趣的事实是，每页只能添加一个“prerender”链接，如果添加更多，它们将被忽略 - 如果您要动态加载prerender链接，则需要知道存在间隔限制问题（500毫秒 - 在Chrome中）。预 渲染扩展了预取的概念。 它不是只下载顶级资源，而是完成向用户显示页面所需的所有工作，而不需要直到用户单击才显示。 预渲染的行为与用户中途点击页面上的链接（在后台选项卡中打开它）然后切换到该选项卡的行为类似。 然而，在预渲染中，该“背景标签”对用户是完全隐藏的，并且当用户点击时，其内容被无缝地交换到用户正在查看的相同标签。 从用户的角度来看，页面加载比以前快得多。
已知问题和重要说明：
- 显示页面时可能不会显示某些动画。 这可能是因为他们已经在页面加载到后台时运行了。
- 定时器可能会带来意想不到的结果
- Cookie，缓存的内容以及异步操作（例如IndexedDB和Web存储）所做的更改将保留。
- 某些浏览器中的隐私浏览将禁用预渲染和预取（“隐身”）。
- 某些浏览器不支持HTTPS链接（IE> 11，壁虎<1.9.1，Chrome不会）。
- Chrome和IE不支持
HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">预取摘要：
- 浏览器：是HTML5规范的一部分（Older IE <9充当dns-prefetch）。
- 加载到：作为当前标签的子资源进入缓存。
- 限制： IE11中有10个链接（IE10未知，FireFox未知）。
- 生活时间： 5分钟。
- 下载深度：仅顶层（网页的）。
- 链接： HTTP，HTTPS（IE> 10，Gecko> 1.9.1），没有“同源”限制。
- 动态：支持。
预呈现摘要：
- 浏览器： Chrome，IE> 10。
- 载入：分离隐藏的标签。
- 限制： 1个链接 - 每个浏览器实例触发一个链接。
- 生活时间：直到另一个预渲染过程被触发（从任何打开的选项卡）。
- 下载深度：完整页面加载。
- 链接： HTTP（HTTPS不会），没有'同源'限制。
- 动态：每次更改之间为500毫秒。
预取延迟或忽略：
- 目标URL不是HTTP GET XMLHTTPRequests - 被忽略（POST，PUT，DELETE）
- 下载使用mozila的东西 - 延迟
- IE> 9 - 页面上超过10个链接 - 忽略
- 两家浏览器（Mozila）开放竞争带宽 - 延迟
- 开发工具打开 - 忽略
- 私人模式启用 - 被忽略
- 目标网址是文件下载 - 忽略
预渲染中止或忽略/延迟：
- 目标URL不是HTTP GET XMLHTTPRequests - 被忽略（POST，PUT，DELETE）
- 另一个Prerender进程正在运行 - 延迟（可能会被忽略）
- 页面上超过1个链接 - 忽略（只有第一个链接会运行）
- 浏览器正在竞争带宽 - 延迟
- 开发者工具或“隐身” - 忽略
- 目标网址是文件下载 - 中止
- 在IE <10中：用户切换到不同的选项卡或浏览器实例 - 中止和删除
- 页面中的HTMLAudio或Video - 已中止
- 弹出/窗口创建 - 中止
- 触发恶意软件警告的页面 - 中止
更多
Nice Question, First we need to make it clear that "prerender" and "prefetch" are two different features with many different limitations and behavior. One of the big issues here are that they will both act slightly different depending on the webrowser and they are often misunderstood and misused.
Quick Overview
prefetch The concept of prefetching is included in the HTML5 spec better used for loading resources (stylesheets,js,pictures etc) - that's because it loads into the cache as a subresource. When prefetching a page the browser downloads (once the current page is fully loaded) the top layer of the page that is linked (Iframes in the target page won't be prefetched). Prefetching an entire page may cause lack of performance. what's cool about prefetching is that the limits are way higher - Prefetching Process is per tab (not webbrowser instance), And you can set Many links for Prefetching (IE < 9 - Max 10 Links, Mozilla unknown).
prerender First Presented By Chrome and implemented by IE11 Later - when added to a page it will execute a page full loading process (on a hidden tab) of the linked page at the background - You can see it firing (once the main page is loaded) by looking at the Task manager (Chrome). One of the big issues here are that a
prerender processis per instance of a browser (not per tabs open) that mean that in case another site is already opened and fired this process yours may be ignored OR delayed (it depends which browser). Another interesting fact is that you can add only one "prerender" Link per page, if you add more they will be ignored - and if you are loading the prerender link dynamically you need to know there is an interval restrict issue (500ms - in Chrome).Prerendering extends the concept of prefetching. Instead of just downloading the top-level resource, it does all of the work necessary to show the page to the user—without actually showing it until the user clicks. Prerendering behaves similarly to if a user middle-clicked on a link on a page (opening it in a background tab) and then later switched to that tab. However, in prerendering, that “background tab” is totally hidden from the user, and when the user clicks, its contents are seamlessly swapped into the same tab the user was viewing. From the user’s perspective, the page simply loads much faster than before.
Known ISSUES and IMPORTANT notes:
- Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.
- Timers may give unexpected results.
- Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.
- Private Browsing in some browsers will disable prerendering and prefetching ( "incognito" too ).
- Some Browsers Won't support HTTPS Links (IE > 11, gecko < 1.9.1, Chrome Won't).
- Chrome & IE won't support
HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">Prefetching Summary:
- Browsers: Is a part of HTML5 specs (Older IE < 9 acts as dns-prefetch).
- Loads To: as subresources of the current Tab into the cache.
- Limits: 10 links in IE11 (IE10 unknown, FireFox unknown).
- Life Time: 5min.
- Download Depth: Top layer only (of a webpage).
- Links: HTTP, HTTPS (IE > 10, Gecko > 1.9.1), No 'same origin' restrict.
- Dynamically: Supported.
Prerendering Summary:
- Browsers: Chrome, IE > 10.
- Loads To: Separate hidden Tab.
- Limits: 1 link - Will trigger one per instance of the browser.
- Life Time: Until another Prerendering process is fired (From any opened Tab).
- Download Depth: Full Page Load.
- Links: HTTP (HTTPS won't), No 'same origin' restrict.
- Dynamically: 500ms between each change.
Prefetching delayed or ignored:
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Downloading Something using mozila - delayed
- IE > 9 - More than 10 Links on the page - ignored
- Two browsers (Mozila) are opened competing on bandwidth - delayed
- Developer Tools open - ignored
- Private mode Enabled - ignored
- The target URL is a file download - ignored
Prerendering aborted or ignored/delayed:
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Another Prerender process is running - delayed (May be ignored)
- More than 1 Links on the page - ignored (only first will run)
- Browsers is competing on bandwidth - delayed
- Developer Tools Or 'incognito' - ignored
- The target URL is a file download - aborted
- In IE < 10: The user switches to a different tab or browser instance - aborted & erased
- HTMLAudio or Video in the page - aborted
- Popup/window creation - aborted
- Pages that trigger the malware warning - aborted
More
相关问答
更多-
首先，你不想添加?gwt.codesvr=... stuff - 它只与托管（调试gwt）模式有关。 您可以使用相对URL（例如，简单地“Main.html”）。 但由于您只能有一个入口点，您需要将应用程序拆分为两个客户端模块（实际上是两个独立的应用程序），或者根据URL（无论您是登陆Login.html还是Main）在您的入口点进行调度的.html） 其次，在这种情况下我要做的是有一个没有布局的空html，除了动态内容的单个div作为应用程序的唯一html页面。 然后我会使用2个UiBinders - 一 ...
-
-
好问题，首先我们需要明确的是，“prerender”和“prefetch”是具有许多不同限制和行为的两个不同特征。 这里的一个重要问题是，它们都会根据webrowser而略有不同，它们经常被误解和误用。 快速概览 预取预取的概念包含在HTML5规范中，该规范更适用于加载资源（样式表，js，图片等） - 这是因为它作为子资源加载到缓存中。 当预取浏览器下载的页面时（一旦当前页面被完全加载），链接页面的顶层（目标页面中的iframe不会被预取）。 预取整个页面可能会导致性能下降。 预取的好处是限制更高 - 预取 ...
-
您需要数据库的帮助才能将您的产品分成几组。 基本上，数据库将有一个“Products”表，表中的每一行都代表一个产品。 您将使用PHP来请求数据库检索第一个/下一个N行，然后在每个返回的行周围写出适当的HTML以创建产品列表。 网上有很多教程可以帮助你练习。 祝你好运！ You need the help of a database to paginate your products in sets. Basically, the database will have a "Products" table, ...
-
XSLT 1.0还是2.0？ 我担心在1.0中没有多输出关键字 - 你必须在外部做一些事情 - 例如带参数的XSLT：
-
您应该使用resolve机制： $module.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/actionWithAjaxData', { templateUrl: 'action.tpl.html', controller: 'ActionCtrl', resolve: { d ...
-
预渲染角度页面以使用Codeigniter为爬虫提供服务(Prerendering angular pages to serve crawlers with Codeigniter)[2022-04-04]
我最终在我的Home.php控制器中注入了meta标签，如下所示： public function index() { //get the page name to insert proper meta tags $pageName = ($this->uri->segment(1) == null ? 'homepage' : $this->uri->segment(1)); $metaTags = metatags(); // helper function gets the m ... -
你可以使用PHP来做到这一点。 在HTML文件中编写HTML代码，然后在HTML中添加include语句。 这使您不必再次编写相同的代码，专门用于导航等。 PHP手册解释了它。 希望能帮助到你。 You can use PHP to do that. Write the HTML code in PHP file, then add include statement in your HTML. This saves you from having to write same code again and ...
-
是否更改href将取消网络请求可能取决于浏览器，是否从缓存中删除可能取决于浏览器和用户设置。 要测试它，请使用F12弹出开发工具，打开网络选项卡并检查状态列。 如果它是304（未修改）它来自缓存。 Whether changing the href will cancel a network request is probably browser-dependent and whether it's removed from the cache is probably browser and user se ...
-
这很好，并且它不会影响性能，因为当你这样做 $("#owl-example").owlCarousel(); 并且没有任何东西与＃owl-example选择器相匹配，它不会返回任何元素，因此不会调用.owlCarousel（）。 因此，你不仅可以在一个带有这些泛型调用的js文件上执行此操作，我会鼓励它，因为这是最好的方法 - 如果你需要更改轮播功能，那么它就在一个地方。 That's fine to do, and it won't affect performance because when you ...