CODEWITHSUNDEEP
asp.netjqueryasp.net-mvc
leora
leora

Reputation: 196499

jquery adding an onclick event to a href link

i am converting over from websforms to asp.net mvc and i have a question.

i have a loop that generates links dynamicallly where picNumberLink is a variable in a loop and image is a variable image link.

i want to avoid putting javascript actions inline so in my webforms project is did the following:

hyperLink.Attributes.Add("onclick", "javascript:void(viewer.show(" + picNumberlink + "))");

what is the equivalent using jquery in asp.net mvc?

I have seen examples of using the $(document).ready event to attach on clicks but i can't figure out the syntax to pass in the picNumberLink variable into the javascript function.

suggestions?

Upvotes: 6

Views: 39638

Answers (4)

karim79
karim79

Reputation: 342635

EDIT: If you generate your links with the ID of this form:

<a id="piclink_1" class="picLinks">...</a>
<a id="picLink_2" class="picLinks">...</a>

<script type="text/javascript">
    $('a.picLinks').click(function () {
        //split at the '_' and take the second offset
        var picNumber = $(this).attr('id').split('_')[1];
        viewer.show(picNumber);
    });
</script>

Upvotes: 10

searlea
searlea

Reputation: 8378

Assuming you're able to change the HTML you output, can't you put the picNumberLink in the id or class attribute?

HTML:

<a href="..." id="piclink-242" class="view foo-242"><img src="..."/></a>

jQuery:

$(function() {
  // using the id attribute:
  $('.view').click(function() {
    viewer.show(+/-(\d+)/.exec(this.id)[1]);
  });

  // or using the class attribute:
  $('.view').click(function() {
    viewer.show(+/(^|\s)foo-(\d+)(\s|$)/.exec(this.className)[2]);
  });
}}

Upvotes: 1

Arnis Lapsa
Arnis Lapsa

Reputation: 47597

var functionIWantToCall = function(){
    var wrappedLink = $(this);
    //some serious action
}

//this should be called on document ready
$("#myLinkId").click(functionIWantToCall);

If you need to get URL of picture, keep it in anchor`s href: 

var functionIWantToCall = function(event){
    event.preventDefault(); //this one is important
    var link = $(this).attr('href');
    //some serious action
}

Upvotes: 2

Rigobert Song
Rigobert Song

Reputation: 2784

$(document).ready(function()
{

$('#LinkID').click(function() {
    viewer.show($(this).attr('picNumber'));
});

});

You can add an attribute called picNumber to your hyperlink tag and set this is your mvc view

The link in your view might look something like this:

<%= Html.ActionLink("Index", new { id = "LINKID", picNumber = 1 }) %>

Upvotes: 1

Related Questions