Question

我们有一个项目列表。单击某个项目时，会弹出一个窗口，其中包含该项目的详细信息。问题是我们点击列表中的第一个图像是显示哪个图像。 id未被传递。有什么想法吗？

视图

@model IEnumerable<ProductViewModel>

@{
   ViewBag.Title = "View1";
}

<div id="productList">
@foreach (var item in Model)
{
    <a href="@Url.Action("OpenModel", "Product", new { id = item.ProductId })",
       data-otf-ajax="true" data-otf-target="#openModal">
        <img width="75" height="75"
             src="@Url.Action("GetImage", "Product", new { id = item.ProductId })" />
    </a>
}
</div>

部分视图

@model Product

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Product Information</h2>
        <h3>
            <img width="75" height="75"
                 src="@Url.Action("GetImage", "Product", new { id = Model.ProductId })" />
            <strong>@Model.Name, @Model.Category</strong>
        </h3>
    </div>
</div>

从视图中呈现HTML

<div id="productList">

    <a href="#openModal">
        <img width="75" height="75" src="/Product/GetImage/10" />
    </a>
    <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <h2>Product Information</h2>
            <h3>
                <img width="75" height="75" src="/Product/GetImage/10" />
                <strong>Fancy Hat, Hat</strong>
            </h3>
        </div>
    </div>

    <a href="#openModal">
        <img width="75" height="75" src="/Product/GetImage/11" />
    </a>
    <div id="openModal" class="modalDialog">

Answer 1

您的问题可能与重复ID有关。 <div id="openModal" class="modalDialog">

    <div id="productList"> <a href="#openModal"> <img width="75" 
height="75"src="/Product/GetImage/10" /> </a> <div id="openModal" class="modalDialog"> <div> 
<a href="#close" title="Close" class="close">X</a> <h2>Product Information</h2> <h3> <img 
width="75" height="75" src="/Product/GetImage/10" /> <strong>Fancy Hat, Hat</strong></h3> 
</div> </div> <a href="#openModal"> <img width="75" height="75" src="/Product/GetImage/11" /> 
</a> <div id="openModal" class="modalDialog">

而是每个模态及其触发器锚标记的唯一ID（可能是基于索引的）。它应该工作正常。呼叫#openModal始终以id='openModal'定位第一个div。这是你的问题。

元素的ID应该是唯一的，否则你的html将是无效的

Answer 2

我不确定我是否了解您的方法以及您为何添加了这些数据属性。

我可以看到data-otf-target="#openModal可能意味着当点击操作链接时它会发出一个ajax请求，结果应该用id openModal （即弹出窗口）替换元素中的html。

我怀疑你错过了对js库的引用（或者至少没有正确链接） - 也许检查渲染的html以确保所有js文件都被正确引用。

我个人使用@Ajax.ActionLink，但在您的情况下不允许使用图片，所以请查看此问题及其答案，例如

ASP.NET MVC Ajax.ActionLink with Image

还有ASP.NET MVC 3 (Razor) Ajax.ActionLink - What am i doing wrong?

连接到数据库mvc 4 asp.net的弹出窗口

2 个答案: