通过JavaScript将C#中的值添加到DIV中

Question

我的聊天脚本的最后一个模块是将C#代码中的值传递给JavaScript，然后JavaScript将这些值发布到DIV。以前我使用DataBinder，但是直接使用它会被AJAX的更新面板接管C#代码。现在，我需要一组数组值通过定时器Tick函数传递给JavaScript。如何使用<%= %>从C#传递数组到JavaScript？以下是我的部分代码：

protected void Timer1_Tick(object sender, EventArgs e)
    {
        if (MyConnection.State == System.Data.ConnectionState.Open)
        {
            MyConnection.Close();
        }
        MyConnection.Open();
        OdbcCommand cmd = new OdbcCommand("Select message from messages where name=?", MyConnection);
        cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "human";
        OdbcDataReader dr = cmd.ExecuteReader();
        ArrayList values = new ArrayList();
        while (dr.Read())
        {
            string messagev = dr[0].ToString();
            // What should I do here?
        }
        MyConnection.Close();
    }

我不希望将值直接发送到 DIV 中。首先必须将其发送到 JavaScript，然后再发送到 DIV。

更明确地说

我需要 C# 从后端检索数据，并将该数据传递给客户端（即 JavaScript），然后从 JavaScript 将其转发到 DIV 层。

- Mad coder.

---

你可能会对这篇博客文章感兴趣：http://www.hanselman.com/blog/AsynchronousScalableWebApplicationsWithRealtimePersistentLongrunningConnectionsWithSignalR.aspx - Guillaume86

JavaScript和HTML是同一层。DIV标签只是你的HTML标记中的一个标签。调用你的ASP.Net应用程序进行AJAX调用，返回序列化数据(JSON或XML)，然后使用JavaScript填充DIV。 - one.beat.consumer

Answer 1

我建议采用jQuery方法并且摆脱服务端计时器。使用jQuery和jQuery.Timer插件：http://code.google.com/p/jquery-timer/，在我看来，这样做更容易，并且客户端的效果会更好。

在您的aspx页面中，您有一个元素来显示输出内容：

<span id="status" style="display:none"></span>

同时还需要引用JQuery、JQuery.Timer.js和您调用C# Web方法的代码。

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timer.js" type="text/javascript"></script>
<script>
    $(function () {
        var timer = $.timer(getMessage, 10000);
        timer.play();
    })

    function getMessage() {
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: 'message-service.asmx/getDBMessages',
            data: "{}",
            dataType: 'json',
            success: getMessageSuccess,
            error: getMessageError
        })
    }

    function getMessageError(jqXHR, textStatus, errorThrown) {
       $('#status').html(errorThrown).show();
    }

    function getMessageSuccess(data, textStatus, jqXHR) {
        $('#status').html(data.d).show();
    }
</script>

我会使用 Web 服务来实现服务器端的数据库消息获取：

[WebService(Namespace = "http://site.com/service")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class contact_service : System.Web.Services.WebService
{

    [WebMethod]
    public string getDBMessages()
    {
        try
        {
 if (MyConnection.State == System.Data.ConnectionState.Open)
        {
            MyConnection.Close();
        }
        MyConnection.Open();
        OdbcCommand cmd = new OdbcCommand("Select message from messages where name=?", MyConnection);
        cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "human";
        OdbcDataReader dr = cmd.ExecuteReader();
        ArrayList values = new ArrayList();
        while (dr.Read())
        {
            string messagev = dr[0].ToString();
        }
        MyConnection.Close();
return messagev;
        }
        catch (Exception ex)
        {
            return ex.Message;
        }
    }

希望这样说起来有意义。我创建了一个Web服务器（asmx），并编写了服务端代码以返回一个字符串。在aspx标记中，我使用JQuery启动一个10秒计时器，然后使用.ajax post轮询服务，检索消息并显示它。无需页面刷新，从我的角度来看也不需要太多的hacky操作。

- justinlabenne

---

我不会让数据库调用成为Web请求处理程序的一部分。这通常是不可扩展的。我会保留OP定时器基础的DB请求代码，但是让它填充某种缓存。然后让Web方法从缓存中获取数据，以响应你上面添加的Ajax调用。 - musaul

同意，但基于所问的问题目的，我不想太过偏离原始数据库实现方式，因此选择将他已经编写好的服务器端代码复制粘贴到 Web 方法中。 - justinlabenne

通常是服务器端代码出错，因此您应该查看已实现的 Web 方法或 Web 服务。另外，请检查 CustomErrors web.config 设置，以便您可以获得完整的错误详细信息，而不仅仅是通用的“内部服务器错误”。 - justinlabenne

Answer 2

有两种方法可以将内容引入JavaScript代码中。你可以从JavaScript发起一个AJAX请求，让服务器返回需要的内容（通常是字符串或JSON格式）。或者你可以在原始请求时在服务器上动态构建JavaScript代码。

看着你的代码，我认为第一种方法是最好的选择。所以，不要在服务器上编写计时器函数，而是在JavaScript中编写定时函数，并通过AJAX轮询服务器获取新消息。

- EPLKleijntjens

---

是的，SignalR可能是最好的选择。对我来说，这看起来不太理想，因为它使用了服务器端计时器...除非只有2-3个人会使用它。如果SignalR行不通，至少应该使用客户端轮询+AJAX。 - kamranicus

Answer 3

假设您的 div 元素的 ID 是 div1, 您可以执行以下操作：

div1.Controls.Add(new LiteralControl(dr[0].ToString()) + "<br />");

那将把消息文本附加到您的Div中。

- Shai

---

这是个好主意，但我遇到了一个错误：“当前上下文中不存在'div1'的名称”。当然，我的DIV名称就是div1。 - Mad coder.

@Madcoder。在你的div1中添加runat="server"，像这样：<div id="Div1" runat="server"></div>。 - Guilherme de Jesus Santos

@GuilhermeJSantos，Shai - 谢谢！它可以工作了，但是当我使用 + "<br />" 时，我会收到一个错误 invalid arguments。当我将其删除时，它可以工作，但没有新行来分隔。 - Mad coder.

是的，通过更改为 Controls.Add(new LiteralControl(dr[0].ToString() + "<br/>")); 已经解决了。 - Mad coder.

以上代码有效。但是对于我的函数，我需要JavaScript作为中介。 - Mad coder.

@Madcoder：请记住，您正在输出JavaScript。<br />在JavaScript中是不合适的换行符。相反，在末尾注入：+ Environment.NewLine); - Joel Etherton

Answer 4

您可以尝试使用RegisterStartupScript调用您的javascript函数，并在该调用中传递'messagev'变量。

更多信息请参见：http://msdn.microsoft.com/en-us/library/bb359558.aspx

- Peter Evjan

Answer 5

只是一个想法；您可以使用Flash或applet与JavaScript进行套接字通信。

在此处找到了Flash的websocket实现：https://github.com/y8/websocket-as。这可能很适合聊天，但也可能过度，这取决于具体情况。

- RobotRock

---

可能会变得更加复杂！ - Mad coder.

Answer 6

我建议您使用长轮询来获取推送通知。 从这里了解有关长轮询的信息。

您可以在这里找到一个很好的示例，它解释了服务器端和客户端实现。 如果您正在使用HTML 5，则建议您查看Web Sockets。

对于服务器端技术，您可以使用C#，但某些Node.js正为此类工作做出所有正确的声音。

- Anand

Answer 7

如果您在页面上使用一个隐藏的HTML控件，并在Timer1_Tick方法中进行设置，然后在javascript函数中使用它来读取值，会怎么样？ hiddenControl.Text = dr[0].ToString(); 然后在javascript函数中 var data = document.getElementById('hiddenControl').value 这样，您可以将该数据添加到您的div中，以任何您喜欢的方式。

- Erik

Answer 8

使用ScriptManager并注册客户端脚本块。

 ScriptManager.RegisterClientScriptBlock(
                this.Page,
                this.GetType(),
                "WebUserControlSript",
                "FunctionABC('" + messagev + "')",
                true);

在.aspx页面中使用以下JavaScript代码：

FunctionABC(message)

{
     append "message" to div here..
}

谢谢,

祝好,

Dhaval Shukla

- Dhaval Shukla

---

感谢您的代码，Dhaval先生。在客户端，这段代码<script type="text/javascript"> function FunctionABC(message) { var elem = document.getElementById('div1'); elem.innerHTML = message; } </script>就足够了吗？但是这个JavaScript不起作用，您能帮我构建它吗？ - Mad coder.

请尝试使用以下代码： <body> <script type="text/javascript"> function FunctionABC(message) { alert(message); $('#abc').html(message); } </script> <div id="abc"></div> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </div> </form> </body> 您需要将div标签放在form标签外面，以使其正常工作。 - Dhaval Shukla

请注意，在上面给出的评论示例中，我已经在按钮单击事件上注册了客户端脚本。 - Dhaval Shukla

您提供的代码是可行的，但它只能从数据库中检索到第一个值。那么如何检索所有的值呢？ - Mad coder.

一个解决方法是创建一个HTML字符串，将其作为参数传递给JavaScript，并将其附加到div中，如下所示： string messagev =“<table><tr><th>”+ message +“</th><th>”+ messageev1 +“</th><th>”+ messageev2 +“</th><th>”+ messageev3 +“</th></tr></table>”; 在这里，messageev1、messageev2等是字符串对象，其中分配了一些值。 - Dhaval Shukla