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

本文关键字：窗口 net asp 数据库 MVC 连接 | 更新日期: 2023-09-27 18:13:52

我们有一个项目列表。当单击一个项目时，应该弹出一个窗口，显示该项目的详细信息。问题是，无论我们点击哪个图像，列表中的第一个显示。没有传递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>
<<p> 部分视图/strong> 
@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">

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

您的问题可能与重复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(可能基于索引)每个模式和它的触发锚标记。应该没问题。SO调用#openModal总是针对id='openModal'的第一个div。那是你的问题。

元素的id必须是唯一的，否则你的html将无效

我不太明白你的方法，也不知道你为什么要添加这些数据属性。

我可以看到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。我做错了什么?

相关文章：