Passing parameter to @Url.Action based on jquery hasClass output

Question

I am trying to pass an integer parameter to Url.Action based on hasClass output of jquery. something like below but is invalid syntax.

<li class="myClass">
    <a href="@Url.Action("SetActionMode", "Home",  new { enable = $(this).find('i').hasClass("fa-check") ? 0 : 1 })">
      <i class="fa fa-check"></i> Debug Mode
    </a>
</li>

What is the correct syntax for above or is there some easy way to do this?

score 3 · Accepted Answer · edited Jun 19 '15 at 12:34

3

I'd say you should 'interrupt' link clicking, construct URL and then go to this URL.

$(".myClass a").click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
    // here you do whatever makes sense
    url = url + "?enable=" + ($(this).find('i').hasClass("fa-check") ? 0 : 1)
    window.location.href = url;

});

edited Jun 19 '15 at 12:34

Satpal

132,252
13
159
168

answered Jun 19 '15 at 12:24

Andrey Stukalin

5,328
2
31
50

1

Added `preventDefault()` to cancel default action. https://api.jquery.com/event.preventDefault/ – Satpal Jun 19 '15 at 12:34
Thanks, that goes too:) – Andrey Stukalin Jun 19 '15 at 12:46

score 0 · Answer 2 · answered Jun 19 '15 at 12:23

ASP.NET needs a value from jQuery, however the two don't run at the same time - jQuery is run on the client side, ASP.NET is run on the server side. So, on the server side, it compiles and sends it to the client side, then, on the client side, it runs the jQuery code. The hasClass is jQuery code, the new { ... is ASP.NET code, this is why it's incorrect syntax.

score 0 · Answer 3 · answered Jun 19 '15 at 12:23

0

You cannot do it like this,But you have another option i.e GIve your anchor tag a class, then write a click function for this, After this use location.href to perform the same:

<li class="myClass">
    <a href="javascript:void(0)" class="clickme">
      <i class="fa fa-check"></i> Debug Mode
    </a>
</li>

<script>
$('.clickme').on('click',function(){
location.href='/Home/SetActionMode?enable='+$(this).find('i').hasClass('fa-check')?0:1;
})
</script>

This will Surely do what you need.

answered Jun 19 '15 at 12:23

Rohit Arora

2,246
2
24
40

Rohit for somehow reason the above code that is simple and easy and prompted me to implement immediately got strange errors of going to /0 action instead of the said href action. I changed it to window.location.href even but that too didn't worked. It is going server/0 action instead. I struggled for an hr. but still the same issue that i am not able to figure out. Then I tried the below answer from Andrey which is not as simple like yours but that worked in one go. – AKS Jun 22 '15 at 06:10

Passing parameter to @Url.Action based on jquery hasClass output

3 Answers3