CODEWITHSUNDEEP
javascriptc#asp.netreactjs
Aby
Aby

Reputation: 1924

React/javascript component to send data back to aspx

I've a legacy ASP.NET application, which I'm trying to modernize. I've a page

MyPage.aspx, and its codebehind MyPage.aspx.cs

I've replaced a custom user control (which does a fileupload) with a custom react component. The react component is working as expected. The old ascx usercontrol had an event handler which is defined in 'MyPage.aspx.cs'as follows.

protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
  //logic to set the uploaded file's name etc for saving.
}

Nowthat the custom control is replaced with an empty DIV, where the react component is being mounted, I'm left with no option to call my C# logic in the 'MyPage.aspx.cs' codebehind file.

I've created a 'CreateProperty.aspx.js' file which is responsible of initializing my react component inside the .aspx page, and below is the contents of this file.

$(document).ready(function () {

    if ($('#Myupload').length) {

        ReactDOM.render(
            <Upload id="pictureupload2"
                onChange={onChange}
                setBusyState={onBusy}
                onUploadSucceeded={onUploadSucceeded}
            />,
            document.getElementById("Myupload")
        );
    }
});


function onChange(e) {
    console.log(e);
}

function onBusy(e) {
    console.log(e);
}

function onUploadSucceeded(e) {
    console.log(e);
}

Once the react component has done the uploading, it calls the function onUploadSucceeded() with my required parameters. But how will I pass that value back to my MyPage.aspx.cs file ?

Please help.

Upvotes: 0

Views: 1243

Answers (1)

Albert D. Kallal
Albert D. Kallal

Reputation: 49049

Drop in a standard asp.net button on the form.

Move the code you have/had for the previous event into that button code stub eg:

 protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
//logic to set the uploaded file's name etc for saving.
}

So, move the above code to the button (style="display:none) to hide it. AND OF COURSE don't copy the event stub code!!!.

Now, in your js function, do whatever and simply "click" on that button.

The bonus here is you get the badly needed post back when the client side js/ajax runs. So, you have this:

function onUploadSucceeded(e) {
   console.log(e);
   document.getElementById('<%= btnOkUpLoad.ClientID %>').click();

So, the above is nice. I mean you could do a js __DoPostBack(); in js, but then you have to pass some parameters, and then client side in the on-load page event, detect the parameters (a pain to wrire up).

So, anytime I want to run code behind from js? Just drop in a asp button, write the code stub for that button, and then client side, use the above ".click()" to run that code. As noted, in MOST cases you want a post back anyway - which is what a asp.net button does for you.

Edit: now I said we want a post back in most cases? Well, I mean when we are all said and done - and thus this button click makes sense. We certainly don't want needless post backs - but when you do, and when you want to run+call a code stub, the this button trick is nice. Just use style="display:none" to hide it from view - but js code can still use the .click() to run (click) the button for you))

Upvotes: 1

Related Questions