Pass variable value calling c# behind function with javascript in asp.net

Question

this is my scenario: I have an asp website that can merge tiff file. So, to do this i need to use a c# function and it is called after a javascript event. The c# is like this:

public void mergeImages(string initialUrl, string lastImageUrl)
        {....}

I created two hidden field like this:

 <input type="hidden" id="hi1" value="D:\\ProvaUpload\\1.tif" />

to get the value to pass at the function, because I didn't know in which way I can pass js variable to it. I call the function in this way:

'<%mergeImages(par1,par2); %>';

In which way can I pass variable value to the function?

You want to call `mergeImages` after the user clicks a button that posts back to the server right? — Mike Perrenoud, Aug 14 '13 at 14:13
@TheSolution After a click,When a function finish there is "UploadFinished" function, in which I need to call the c# method — SamDroid, Aug 14 '13 at 14:17
@SamDroid, so you're doing the upload via AJAX then, yes? You're not actually posting back to the ASPX page. — Mike Perrenoud, Aug 14 '13 at 14:17

Christian Phillips · Accepted Answer · 2013-08-19T14:11:42.853

5

Decorate the method with WebMethod Attribulte:

[WebMethod]
public void mergeImages(string initialUrl, string lastImageUrl)
        {....}

Get the hidden fields, and pass these to Jquery Ajax call, from a button click

var hdn1 = $('#hi1').val();
var hdn2 = $('#hi2').val();

var parameters = '{initialUrl:' + hdn1 + ', lastImageUrl:' + hdn2 + '}';

    $.ajax({
        type: "POST",          
        url: "page.aspx/mergeImages",          
        data: parameters,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {

        }
    });

edited Aug 19 '13 at 14:11

answered Aug 19 '13 at 08:49

Christian Phillips

18,399
8
53
82

in the end this one is the best method, thank you! The only change that i propose is to "JSON.stringify({ initialUrl: hdn1, lastImageUrl: hdn2 })," when you initialize "parameters"! @christiandev – SamDroid Aug 21 '13 at 14:52

score 2 · Answer 2 · edited May 23 '17 at 10:31

2

Refer the stackoverflow thread. ASP.NET - Passing JSON from jQuery to ASHX

This will help you to understand to use handler file (ashx) to do ajax json request.

your requirement can be achieved with this concept.

you do not need to call cs method into javascript. you should post using ajax on any kind of handler file e.g ashx, asmx, or any other service .

edited May 23 '17 at 10:31

Community

1
1

answered Aug 19 '13 at 08:43

Sandip

981
1
6
22

Pranav · Answer 3 · 2013-08-19T12:20:44.537

1

one of the easy way to achieve this :-

As you already have two hidden fields but must add runat attribute to it ,so that you can get their values at server side. Let's Say:-

 <input type="hidden" id="hi1" value="D:\\ProvaUpload\\1.tif" runat="server" />
 <input type="hidden" id="hi2" value="D:\\ProvaUpload\\2.tif" runat="server" />

and Make a hidden button :-

<asp:button id="btnhidden" runat="server" Text="hide" Onclick="btnhidden_Click" Style="display:none"/>

Now you can click the button in javascript function :-

function UploadFinished()
{
   //your JS code:-
   // After finish uploading ..Click the button .. i have used jquery for simplicity:-
   $('input[id$="btnhidden"]').click();
}

Now in your code behind :-

protected void btnhidden_Click(Object sender,EventArgs e)
{
   // you can get hidden fields values here ....
   string val1=hi1.Value;
   string val2=hi2.Value;
   // Call your merge function here :-
    mergeImages(val1,val2);
}

edited Aug 19 '13 at 12:20

answered Aug 19 '13 at 09:44

Pranav

8,563
4
26
42

I think this one is the better way in my case, but the btnhidden_Click is not fired. When it will work without problem (it depends on me, not by your answer, I Know) I'll sign your answer at correct. – SamDroid Aug 19 '13 at 12:07
Check on browser console .. what error message you are getting..see the updated answer.. – Pranav Aug 19 '13 at 12:16
@SamDroid, this is not using Ajax or Javascript. – Christian Phillips Aug 19 '13 at 14:13

score 1 · Answer 4 · answered Aug 19 '13 at 11:51

Nothing to do much you just need to take an extra button which will be hide in output:

<asp:button id="btnGetAndPassvalues" runat="server" Text="hide" Onclick="btnGetAndPassvalues_Click" Style="display:none"/>

Now javascript function should be like below:

<script>
    $('[id$=btnUpload]').live('click', function (e) {
        // code to finish Upload prosess
        $('[id$=btnGetAndPassvalues]').click();
    });
</script>

That's all and in click event get the values of hidden field:

protected void btnGetAndPassvalues(Object sender,EventArgs e){
 string hd1=hiden1.Value;
 string hd2=hiden2.Value;
}

or you can make AJAX Call,

@Pranav i had not read your answer.. i have read it now, it uses the same concept no issue dear i am deleting my answer. the main motive is to resolve the problem. please comment with ok so that i can remove my answer. — Ram Singh, Aug 19 '13 at 12:59

Pass variable value calling c# behind function with javascript in asp.net

4 Answers4