Alert box like stackoverflow dynamic data

问题

Want to add an alert box like stackoverflow. i saw some good examples but not something i want. I want different messages that are appearing on different occasions.

ex. I want this msg from C# code when user logins. Also when user places an order. or something is wrong.

This answer is good but the message is appearing on page load. Another example demonstrate the same.

回答1:

You need to create a generic-http-handler or web service or page-method and call it through jQuery and show the message on the alert.

create a handler like this

  public class VideoViewValidation : IHttpHandler
  {
      public void ProcessRequest(HttpContext context)
      {
           string videoID = string.Empty;
           string id = context.Request["Id"];
           context.Response.Writ("your message");
      }
}

and call it through jQuery on button client click

$.ajax({
        url: 'VideoViewValidation.ashx',
         type: 'POST',
          data: { 'Id': '10000', 'Type': 'Employee' },
          contentType: 'application/json;charset=utf-8',
          success: function (data) {
                    alert('Server Method is called successfully.' + data.d);
                },
          error: function (errorText) {
                alert('Server Method is not called due to ' + errorText);
          }
       });

回答2:

If you don't want to do it on page load but you want it to be driven by code behind (C#) you'll need to use AJAX.

Using JQuery this is easily accomplished by doing something like the following (this is my generic 'perform this action on this controller' in ASP.NET MVC):

 <script type="text/javascript">
 function execute(controller, action) {
        $.ajax({
            type: 'get',
            url: ('/' + controller + '/' + action),
            dataType: 'text'
        }).done(function (data, textStatus, jqXHR) {
            $('#response').html(data).slideDown();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $('#response').html(jqXHR.responseText).slideDown();
        });
    }
 </script>

You can expand this out to pass whatever data you need to whatever URL you need such as:

 <script type="text/javascript">
 function execute(controller, action, username, password) {
        $.ajax({
            type: 'get',
            url: ('/' + controller + '/' + action),
            dataType: 'text',
            data: ('username='+username+'&password='+password)
        }).done(function (data, textStatus, jqXHR) {
            $('#response').html(data).slideDown();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $('#response').html(jqXHR.responseText).slideDown();
        });
    }
 </script>

On the server side you just return the string of what you want the response to say, such as "Success! You've been logged in!" and then the element id'ed "response" will have its inner HTML swapped out with that response, and then will be slid open:

 <div id="response" style="display:none"></div>

Be aware that the .fail() event will push out the entire error page you would throw if you don't just return a string on a thrown exception. .fail() will trigger if the HTTP status code from the server is not 200 (OK).

If you're using ASP.NET MVC your C# code can look like this:

 namespace MySite.Controllers
 {
     public class SomeController : Controller
     {
          public string Login(string username, string password){
               // Process login
               return "You've been logged in!";
          }
     }
 }

If you're using Webforms:

 //On Page_Load() call a function if it's an AJAX Login
 // such as 
 if(Request["ajax"] == "login"){
       AjaxLogin(Request["username"], Request["password"]);
 }

 private void AjaxLogin(string username, string password){
      // Process login
      Response.Write("Ajax login complete!");
      Response.End(); // Don't send anything else and stop processing request.
 }

Then to call it simply pass the variables to your function:

 <a onclick="execute('MyController', 'Login', 'UserName', 'MyPass')">Login!</a>

Obviously this assume you have the data you need to process a login request before they enter it, which would be a little self defeating so you can extend out a specific function using JQuery to grab form element content such as:

 <input type="text" name="username" id="username" />
 <input type="text" name="password" id="password" />

Then in your function add:

 <script type="text/javascript">
 function login(controller, action) {

      var username = document.getElementById('username').value;
      var password = document.getElementById('password').value;

        $.ajax({
            type: 'get',
            url: ('/' + controller + '/' + action),
            dataType: 'text',
            data: ('username='+username+'&password='+password)
        }).done(function (data, textStatus, jqXHR) {
            $('#response').html(data).slideDown();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $('#response').html(jqXHR.responseText).slideDown();
        });
    }
 </script>

回答3:

try this

public void message(string msg)
{
    ScriptManager.RegisterClientScriptBlock(this, GetType(), "Done", "alert('" + msg + "');", true);
}

to use this method

write message("You are logged in sucessfully.");

来源：https://stackoverflow.com/questions/15675704/alert-box-like-stackoverflow-dynamic-data