Server side alert disturbs page styling

Question

I needed to show a message on web page. I'm using ASP.Net and C#. I added below code in the back-end code to show message to the user

protected void btnRenew_Click(object sender, ImageClickEventArgs e)
{
    //other code removed for clarity on where and how this alert is triggered
     if (newExpiryDate.Date == memberDetails.ExpiryDate.Date)
     {
          Response.Write("<script>alert('Invalid renewal date');</script>");
     }
}

This works fine as expected on the event call. But, the moment I click OK button on the alert message, the font-size of the text increases. It looks like somehow this alert message is disturbing my styles on the page.

Does anyone know a safe method to display alert from ASP.Net code behind page?

Blocking script execution is likely actual reason... Trying to come up with [MCVE] may solve the issue. — Alexei Levenkov, Feb 08 '16 at 20:46
@charlietfl, it happens in all browsers I tested - IE, Firefox and Chrome — techspider, Feb 08 '16 at 20:53
@AlexeiLevenkov - I know this problem is weird and there is no easy way to be as per your definitions; I know it is even tough to think of a solution with what I provided but even I am not sure how to expand this problem! This is weird for me too; probably if i know how to phrase question, I would know answer :) — techspider, Feb 08 '16 at 20:54
an alert is not part of page itself and is part of window api. I doubt the problem is just the alert and rather as mentioned some other script involved — charlietfl, Feb 08 '16 at 20:55
@charlietfl - may be true; my client side alerts work fine; it is only problem with the alert I kept on server side; I do have feeling that there must be some standard way of doing server side alerts — techspider, Feb 08 '16 at 20:59
no such thing as server side alert...you are simply sending javscript to run in browser. Is this full page reload? Or ajax? — charlietfl, Feb 08 '16 at 21:02

score 0 · Answer 1 · edited May 23 '17 at 12:23

It is hard to tell what is causing the font shift based on what you posted, but your design can be vastly improved by 1. not making a server call just to validate a date, and 2. not using alert() which locks the whole browser until someone clicks "ok".

You could change your approach to set a few variables in javascript on page load, and then trigger a function on say change of your input or even on button click. your check function could look something like this

_memberExpiryDate = new Date('@memberDetails.ExpiryDate.Date'); // or whatever the notation is to write out server variable here

function validate() {
    if (new Date($('#myDateInput').value()) >= _memberExpiryDate.getTime()))
       $('#invalidDateLabel').show();

}

this way you're not making unnecessary postbacks, validation can autocorrect as users adjust dates, and there are no alerts in your face.

you can also use a library such as Toastr to show a more graceful message which disappears after a few seconds. but ideally you want to show something right next to the input field like asp.net date validator even

toastr.error('date is expired');

Also you could just use the asp.net range Validator.

i agree; many times implementation depends on certain specific requirements which we end up doing so; i posted it as just an example; I need to lock the browser until someone clicks "ok" :) — techspider, Feb 08 '16 at 22:36

Dave Bush · Accepted Answer · 2016-02-08T22:21:10.930

-1

See if

<script>setTimeout(function(){alert('Invalid renewal date');},1000);</script>

fixes your issue

Using ClientRegisterScriptBlock

protected void btnRenew_Click(object sender, ImageClickEventArgs e)
{
    //other code removed for clarity on where and how this alert is triggered
     if (newExpiryDate.Date == memberDetails.ExpiryDate.Date)
     {
ClientScript.RegisterClientScriptBlock
        ("".GetType(), "s", "<script>alert('Invalid renewal date');</script>");
     }
}

This renders the script in the HEAD section

edited Feb 08 '16 at 22:21

answered Feb 08 '16 at 22:09

Dave Bush

2,382
15
12

no, it didn't work; i don't think it is an issue with javascript; i think it is the way Response.Write renders this on page – techspider Feb 08 '16 at 22:15
You used response write to render it? You should be using RegisterClientScriptBlock. string myscript = @""; ClientScript.RegisterClientScriptBlock ("".GetType(), "s", myscript); } Sorry comments don't format that well. – Dave Bush Feb 08 '16 at 22:16
Please refer to my code in the question and advise how you would like to do it there – techspider Feb 08 '16 at 22:19
see above for your code with RegisterClientScriptBlock – Dave Bush Feb 08 '16 at 22:28

Server side alert disturbs page styling

2 Answers2