popup window that connects to database mvc 4 asp.net

Question

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

Your Url.Action code looks fine, but the source you pasted doesn't make sense. It seems like there is something on your page, maybe javascript which is reading the "data-otf-target" attribute and replacing the href value with '#openModal' — Robert Noack, May 15 '13 at 22:31
@RobertNoack Yes, that is the problem and we can't figure out how to implement a JS function to handle that. — rogerthat, May 15 '13 at 22:34
Well I have no idea what "data-otf-target" means, but you could just remove that part from the code unless it is doing something else for you. — Robert Noack, May 15 '13 at 22:36
@RobertNoack its to make it async. We don't want to make a full url request. We just want to update the partial. — rogerthat, May 15 '13 at 22:38
@healix guess figured out your issue. Have a look at my answer. — PSL, May 16 '13 at 06:04
@PSLsorry for the late reply. Appreciate all this help. I'm going nuts trying to figure this out — rogerthat, May 17 '13 at 02:28
@healix humor me for a moment, but are you able to show us example where the productList div has 3 or more products (I just want to see the html) because based on what PSL has highlighted why do you even need to make the ajax call? It seems you're already including the partial as each product link is rendered... — Chris Moutray, May 17 '13 at 05:31
@ChrisMoutray That's true. We are including the partial as each is rendered and thought that would solve the problem but it did not and I don't have any HTML to show besides from whats above. I am not at my computer at the moment. What were you thinking? — rogerthat, May 17 '13 at 05:52
@healix I'm still confused why your view source (razor) doesn't match the output html? — Chris Moutray, May 17 '13 at 08:58
@ChrisMoutray It's the wrong output.We tried different things, that must be from another try. Sorry. Still the same issue, though — rogerthat, May 17 '13 at 16:02
@healix ok so if the rendered html contains all the modals no need to do an ajax call - just unhide the modal... — Chris Moutray, May 17 '13 at 16:31

score 2 · Accepted Answer · answered May 16 '13 at 06:01

2

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

answered May 16 '13 at 06:01

PSL

123,204
21
253
243

+1 I didn't pick up on that duplicate id probably because the razor doesn't match the rendered html – Chris Moutray May 16 '13 at 08:04
@ChrisMoutray i guess that is the strong candidate for this issue as all the modal triggers tries to open with the hash `#openModal` always point to the first one with the same id. – PSL May 16 '13 at 15:20
@PSL No, i haven't figured it out. Figured I'd take a break, but this seems to be the problem I'm facing. So what you're saying is to have the divs with unique id's? AM i understanding that correctly? – rogerthat May 17 '13 at 02:20
@PSL and how would I implement that? Something like an auto incrementing variable within the loop? `element.id = "id" + (++i);` – rogerthat May 17 '13 at 02:23
1

@healix Yes assign the ids based on index and append as `openModal` + idx in the anchor href as well as the id of the div. It should work then.. – PSL May 17 '13 at 16:02
@PSL Thanks for everything. – rogerthat May 18 '13 at 00:25

score 1 · Answer 2 · edited May 23 '17 at 10:25

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?

popup window that connects to database mvc 4 asp.net

Product Information

Fancy Hat, Hat

2 Answers2