Using JavaScript to display a notification modal when radiobutton in C# .NET project is checked

Question

I'm working on a C# .NET / ASP.NET project. I have a file called LineItemPage.ascx and this file contains a specific radiobutton. Whenever the user checks this radiobutton, I want to display a notification in the form of a pop-up window or modal, letting the user know a few conditions to keep in mind when checking that radiobutton. So far, I tried using Windows.Forms to display a pop-up but it didn't work as desired. I tried something like this:

MessageBox.Show("Test message");

It gave me an error since the application wasn't running in UserInteractive mode. There was another post about that so I changed the code to what was recommended here: How to resolve Error : Showing a modal dialog box or form when the application is not running in UserInteractive mode is not a valid operation

This didn't give me the desired result so I tinkered with the code some more and found some JavaScript that already exists for that radiobutton. Here is the front end:

<asp:RadioButton ID="rdOtherSpecialRelease" runat="server" GroupName="SpecialRelease" onkeypress="ignoreReturn(event)" onclick="ReleaseOptionChanged(this);" Text="Other"></asp:RadioButton>&nbsp;&nbsp;&nbsp;&nbsp;

Here is some of the code I added to the ReleaseOptionChanged() script. To make sure it works, I'm opening up another page. It's a test WebForm that I added to the project:

if(option.id.indexOf('OtherSpecialRelease') > -1 && option.checked) {
                   document.getElementById(clientIDLineItemPage+'txtOtherSpecialReleaseDesc').disabled = false;
                   var popUpObj = window.open('Test.aspx', 'ModalPopUp', 'toolbar=no,' + 'scrollbars=no,' + 'locations=no,' + 'statusbar=no,' + 'menubar=no,' + 'resizable=no,'
                                            + 'width=100,' + 'height=100,' + 'left=490,' + 'top=300');
                   popUpObj.focus();
                   LoadModalDiv();
            }

It works - whenever the user checks the radiobutton, the new window opens up successfully. I can tinker around with the placement as well. But this is an ugly solution. I'd prefer to open up a modal or something simpler in the center of the page, letting the user know "These are the requirements" and a simple OK button that they can use to acknowledge that they read the requirements. Is there a built-in way to do that with JavaScript? I'd prefer to avoid loading in a JavaScript or JQuery file. It doesn't have to be a fancy modal or form. As long as it's something that can open up on the same page, without having to open up another tab or window and without having to redirect the user to another page, that'd be great.

Thanks for any advice.

Answer 1

I was reading a bit more and tinkering a bit more before posting my question and found that JavaScript has a very nice built-in function called alert(). No doubt people with experience know about it but for newbies like me who may be looking around the internet for help with a similar task, try something like this:

if(option.id.indexOf('OtherSpecialRelease') > -1 && option.checked) {
                    document.getElementById(clientIDLineItemPage+'txtOtherSpecialReleaseDesc').disabled = false;
                    alert('test');
                }

So to reiterate, if you have a radiobutton or some kind of button that can be checked or selected...and if you need to issue a notification to the user to give them additional information or prerequisites regarding that button, you can incorporate some javascript into the code behind and use javascript's alert function. It'll display your notification on the same page.

There is a possible downside to this approach, though - it seems you can't edit the title of the page. From what I've read, you'd have to try overriding the Alert function or use a modal from an imported javascript file. If my solution isn't acceptable to my manager, because of the alert function's default title, I'll work on adding in a custom modal and then update this answer to include that option.