CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazor
Mahmod Abu Jehad
Mahmod Abu Jehad

Reputation: 177

MVC How i can get id value using jquery

Here Razor Code :

@foreach(var item in Model)
{
<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  [email protected] onclick="fun_ShowImages()" >@Website.ShowImages</button>
}

function fun_ShowImages() {
        var id = $(this).attr("id");
        var htmlContents = " ";
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

strong text Here Error :

i need to know id attribute var id = $(this).attr("id"); // This give me undefine

Upvotes: 1

Views: 6809

Answers (3)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

In your example, this is a reference to window object.

You can pass directly the id value as parameter.

@foreach(var item in Model)
{
   <button type="button" class="ShowImages" data-toggle="modal"
   id="@item.ProductID" data-target="#myModal"  
   [email protected] onclick="fun_ShowImages(@item.ProductId)" >@Website.ShowImages</button>
                                            ^^^^^^^^^^^^^^^^^^^^^^
}

function fun_ShowImages(id) {
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

Another method is to attach a click event handler and use $(this) selector.

Also, in this situation you have to use .on method for event delegation, especially for elements which were added dynamically.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    var htmlContents = " ";
    $.ajax({
        url: "/Products/ShowImage/" + id,
        type: "POST",
        contentType: 'application/json',
        success: function (response) {
           ...
            }
            htmlContents += '</table>';
            $('#ProductImages').html(htmlContents);
        },
        error: function (response) {
           ...
        }
    });
});

Upvotes: 2

ZombieBot
ZombieBot

Reputation: 127

First, you should add quotation marks for data-id value:

<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  data-id="@item.ProductID" onclick="fun_ShowImages()" >@Website.ShowImages</button>

then you can use jQuery event handler click

E.g.:

$(document).ready(function () {
    $(".ShowImages").click(function () {
        var id = $(this).attr("id"); //or you can use data-id value
        //your logic...
    });
});

Or you can use jQuery.on() 

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    //your logic
});

Upvotes: 3

Satpal
Satpal

Reputation: 133453

As per your code this doesn't refers to element which invoke the event handler, it refers to window object. Thus you are getting the error.

You can use .call() to set the context

<button type="button"  onclick="fun_ShowImages.call(this)" >@Website.ShowImages</button>


function fun_ShowImages() {
  console.log(this.id);
}
<button type="button" id="1" onclick="fun_ShowImages.call(this)">ShowImages</button>

Upvotes: 1

Related Questions