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 (おそらくインデックス ベース) を使用します。それはうまくいくはずです。SO 呼び出し#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 with Image

このASP.NET MVC 3 (Razor) Ajax.ActionLink もあります。

于 2013-05-16T05:57:37.477 に答える