Pass arguments to a C# controller method using <button> and jquery

Question

I have a bootstrap modal which has many buttons which help to download files of different formats. I am able to enter the controller method when I use the set the onclick function as below:

onclick="location.href='@Url.Action("DownloadAsJPG", "Home")'"

I would like to do some condition based file downloading, based on the button that was pressed and hence I was thinking of passing a parameter as done here and here by setting the value attribute of the buttons

HTML :

<button type="button" id="tojpg" class="btn btn-outline-primary" value="jpg">JPG</button>
<button type="button" class="btn btn-outline-primary" value="jpgcmyk">JPG-CMYK</button>
<button type="button" class="btn btn-outline-primary" value="jpgrgb">JPG-RGB</button>

The argument in the controller method always remains null. I'm not sure what I have missed.

Controller method:

public FileResult DownloadAsJpg(string argument)
{ Some action }

I tried to play with a jquery which I found on a stackoverflow question which doesn't help me either, I couldn't reach the controller using this jquery.

Jquery

$('#tojpg').click(function (e) {
        e.preventDefault();
        window.location = '/Home/DownloadAsJpg?argument=' + $('#tojpg').val();
    });

Any tips would be greatly appreciated.

Could it be that by any chance you've missed /api/ in your url ? So the url is smth like/Api/Home/DownloadAsJpg?argument=. What error do you get ? — Fabjan
– Fabjan, Commented Oct 9, 2018 at 12:37
@Fabjan, I added an alert into the function and it doesn't seem to capture the button events. I'm not sure if this is because of the bootstrap modal. I'm checking this. — Binoy Cherian
– Binoy Cherian, Commented Oct 9, 2018 at 12:41
The code you have shown works fine (although there are better ways to do it). What errors are you getting in the browser console? — user3559349
– user3559349, Commented Oct 9, 2018 at 12:42
@StephenMuecke, No errors, Could you suggest me the right way of doing this? — Binoy Cherian
– Binoy Cherian, Commented Oct 9, 2018 at 12:45
You can just use @Html.Actionlink("JPG", "DownloadAsJPG", "Home", new { argument = "jpg" }, new { @class = "btn btn-outline-primary" }). There is no need to use javascript. — user3559349
– user3559349, Commented Oct 9, 2018 at 12:48

Kamil Folwarczny · Accepted Answer · 2018-10-09 13:40:32Z

1

If you can reach your controller with

onclick="location.href='@Url.Action("DownloadAsJPG", "Home")'"

and just want to pass some parameters. You can do that same was as

onclick="location.href='@Url.Action("DownloadAsJPG", "Home", new { argument = "tojpg" })'"

or with help of Jquery event

Edit

Try to wrap your event into $(document).ready(). By my experience, most of the time the reason for not working events is a that your buttons is not yet created when event binding happends.

$(document).ready(function() {
    $('#tojpg').click(function (e) {
        e.preventDefault();
        location.href = '@Url.Action("DownloadAsJPG", "Home", new { argument = "tojpg" })';
    });
}

And if you dont want to write a separate event for each button option you can create something like this.

<button type="button" class="btn btn-outline-primary" value="jpg">JPG</button>
<button type="button" class="btn btn-outline-primary" value="jpgcmyk">JPG-CMYK</button>
<button type="button" class="btn btn-outline-primary" value="jpgrgb">JPG-RGB</button>

and Jquery event like this

$(document).ready(function() {
    $('.btn').click(function () {
        location.href = '@Url.Action("DownloadAsJPG", "Home", new { argument = "'+ $(this).attr("value") +'" })';
    });
}

That should work.

edited Oct 9, 2018 at 13:40

answered Oct 9, 2018 at 12:45

Kamil Folwarczny

5911 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Binoy Cherian Over a year ago

I used the second suggestion. For some reason I cannot get the jquery function fired up. I'm gonna investigate on that. Thanks

Jeroen · Accepted Answer · 2018-10-09 12:49:29Z

There are two ways of solving this:

Option 1

A <button /> is not part of the data that the form is posting. That is why it doesn't turn up at the server side. You should change this into an input like so:

<input type="submit" name="argument" value="jpg" />

The name of this field should be the same one as the name of the parameter in your action. Because this is an input-field, the browser will send the it with the entire post. This is what is being done in the posts you referred to.

Option 2

If you want to use window.location instead, then you need to make sure the action allows for a GET-request and that you pass in argument as the querystring:

onclick="location.href='@Url.Action("DownloadAsJPG", "Home", new { argument = "jpg" })'"

Collectives™ on Stack Overflow

Pass arguments to a C# controller method using <button> and jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related