0

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.

Improve this question
2
  • 1
    You're mixing WebForms, jQuery, and React? Are you a glutton for punishment? Do you want to cause yourself and all those who have to work on your code after you years of torture? Please stop. At the very least remove jQuery from the equation. And read up on how to implement JSON-consuming web service endpoints in ASMX. Trying to keep the same PRG pattern of WebForms with React is asking for trouble. Commented Aug 28, 2020 at 13:01
  • @HereticMonkey, Thanks for your insight. Can you please give me bit more details ? I need to replace the user control with react component and want to send event to the associated aspx.cs page where its embedded. Commented Aug 28, 2020 at 13:19

1 Answer 1

Reset to default
1

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))

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

3 Comments

@albert-d-kallal, your idea sounds good ! but how would I pass the data 'e' from onUploadSucceeded(e) via document.getElementById('<%= btnOkUpLoad.ClientID %>').click(); to the button'n C# handler please ?
It really depends on what in e you need and want to extract? Don't know what uploader control etc. you are using. If I had to grab (send) the e value to the click (code behind routine). I would drop in a asp text box right below the hidden buttion (style="display:none") just like you hid the button. So, right before the js click event, simply shove e into the next box. With hidden text box you can in code behind me.MyTextBox.Text to get whatever value you shoved in before the js click. You did not mention what or where you doing e in your post anyway. but using a text box hidden works well.
Does not the server side event that fires after up-loading have that information? Issue is server side event fired by the up-loading events does NOT post back. So, VERY likely in the up-loading event you can also get at values passed. As noted, the trick/problem/pain/issue is that when all is said and done, you tend to need and want a final post back - and you can't use the sever side events for this - so the final client side event with the click even quite nicely solves this issue. I have assumed the server side up-load event passes e or whatever, but above comments should do the trick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.