0

我们有一个项目清单。单击一个项目时，应弹出一个窗口，其中包含该项目的详细信息。问题是无论我们单击哪个图像，列表中的第一个都会显示。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">
4

2 回答 2

2

您的问题可能与重复 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总是以第一个 div 为目标id='openModal'。那是你的问题。

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

于 2013-05-16T06:01:52.590 回答
1

我不确定我是否理解您的方法以及您添加这些数据属性的原因。

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

我怀疑您缺少对 js 库的引用（或者至少它没有正确链接） - 也许检查呈现的 html 以确保正确引用所有 js 文件。

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

ASP.NET MVC Ajax.ActionLink 与图像

还有这个ASP.NET MVC 3 (Razor) Ajax.ActionLink - 我做错了什么？

于 2013-05-16T05:57:37.477 回答