ASP.NET一对一聊天应用

Question

我已经开发了一个简单的ASP.NET Ajax聊天应用程序我想升级我的项目我有一个在线用户列表，我正在点击其中一个打开一个新的网络浏览器窗口(我正在用javascript window.open()做这件事)。现在我想改进我的项目。

我想打开一个动态div而不是一个新窗口。这也可以是一个jquery聊天框。所以我的问题是：

如何打开div或jquery框以及如何导入asp.net控件(更新面板、计时器等)转换为动态div ?？

Answer 1

您可以使用dynamic loader plugin (您可以在那里找到完整的示例)来执行此操作。首先，使用ajax调用用户控件：

$(function() {
        var content = $('#content');
        var btnAddCell = $('#btn-add-table');
        var tableid = 1
        //dynamically add a new table to the page when the add button is clicked
        btnAddCell.click(function() {
            $.dynamicLoader.loadUC({
                ucName: 'UserControls/TableWidget.ascx',
                queryString: 'tableid=' + tableid++,
                eventBindings: {
                    ready: function(wrappedData) {
                        content.append(wrappedData);
                    } //here is where we get the rendered html and attach to the row
                }
            });
            return false;
        });
    });

定义一个为控件提供服务的服务(svc)，这样您的jquery就可以调用它们：

    namespace DynamicLoader
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Ajax
    {
        // Add [WebGet] attribute to use HTTP GET
        [WebGet]
        [OperationContract]
        public Stream RenderUC(string path)
        {
            Page pageHolder = new Page();
            UserControl viewControl = (UserControl)pageHolder.LoadControl(path);
            pageHolder.Controls.Add(viewControl);
            StringWriter output = new StringWriter();
            HttpContext.Current.Server.Execute(pageHolder, output, true);

            //trick to output exactly what you want (without wcf wrapping it)
            return new MemoryStream(Encoding.UTF8.GetBytes(output.ToString()));
        }

        // Add more operations here and mark them with [OperationContract]
    }
}

Answer 2

最好的创建方法是当你点击在线用户的链接时创建一个动态的表格结构。这可以在window.load()上使用javascript和jquery ..and来完成。

你可以参考下面的链接，它显示了像facebook和gmail一样的聊天窗口

http://20fingers2brains.blogspot.com/2013/03/gmail-facebook-style-online-chat.html