CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Binoy Cherian
Binoy Cherian

Reputation: 384

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

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.

Upvotes: 0

Views: 1294

Answers (2)

Kamil Folwarczny
Kamil Folwarczny

Reputation: 591

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.

Upvotes: 1

Jeroen
Jeroen

Reputation: 1262

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" })'"

Upvotes: 1

Related Questions