CODEWITHSUNDEEP
c#asp.net-mvcdatabasepopup
rogerthat
rogerthat

Reputation: 1815

popup window that connects to database mvc 4 asp.net

We have a list of items. When an item is clicked a window should pop up with the details of that item. Problem is no matter which image we click on the first in the list is displayed. The id is not being passed. Any ideas?

The view

@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>

Partial View

@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>

Rendered HTML from the View

<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">

Upvotes: 0

Views: 1518

Answers (2)

Chris Moutray
Chris Moutray

Reputation: 18379

I'm not sure I understand your approach and why you've added those data attributes.

I can see that data-otf-target="#openModal probably means when the action link is clicked it makes an ajax request and the result should replace the html in the element with id openModal ie your popup.

I suspect you're missing a reference to a js library (or at least its not linked correctly) - perhaps check rendered html to ensure all js files are referenced correctly.

Personally I'd use @Ajax.ActionLink but in your case doesn't allow for images so have a look at this question and its answer for example

ASP.NET MVC Ajax.ActionLink with Image

There's also this ASP.NET MVC 3 (Razor) Ajax.ActionLink - What am i doing wrong?

Upvotes: 1

PSL
PSL

Reputation: 123739

Your issue could be related to duplicate 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">

Instead unique id (probably index based) to each modal and its trigger anchor tag. It should work fine. SO calling #openModal always targets the first div with id='openModal'. That is your issue.

Ids of elements should be unique, otherwise your html will be invalid

Upvotes: 2

Related Questions