警告框像计算器动态数据 [英] 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.

恩。我想从C＃code，当用户登录这条消息。
此外，当用户下订单。
什么是错的。

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.

推荐答案

如果你不想这样做在页面加载，但你希望它背后所（C＃）你需要code驱动使用AJAX。

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.

使用jQuery这是很容易做类似下面的完成（这是我的通用的'执行此控制器上的这一行动在ASP.NET MVC）：

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>

在服务器端，您只返回你想要的回应说什么字符串，如成功！你在被记录！然后id'ed回应的元素将有其内在的HTML换出与响应，然后将打开下跌：

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>

请注意，.fail（）事件将推动出整个错误页面，如果你不只是在返回抛出的异常的字符串，你会扔掉。 .fail（）将如果从服务器的HTTP状态code不是200（OK）触发。

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

如果您正在使用ASP.NET MVC的C＃code可以是这样的：

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!";
          }
     }
 }

如果您正在使用Web表单：

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>

显然，这种假设你有你需要的过程中，他们进入前一个登录请求，这将是一个有点弄巧成拙，因此您可以使用jQuery抢表单元素的内容，如延伸出一个特定函数的数据：

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" />

然后在您的函数add：

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>

这篇关于警告框像计算器动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！