如何创建聊天窗口

Question

我可以通过表格显示消息。 我可以使用 textarea 吗？我不知道该使用哪些控件。 我是 MVC 的新手，任何帮助将不胜感激。

<table class="table-responsive">
    <tr>
        <td id="output"></td>
    </tr>
</table>

这是我的脚本：

function sendName(id) {
    $.ajax({   
        datatype: "json",
        type: "POST",
        data: { 'senderName': id },
        url: '/Inbox/GetInboxes/',
        success: function (result)
        {
            debugger;
            let output = result.map(i => "<tr><td>" + i.FromID + "/" + i.Body + "/" + i.DateSent);
    
            $("#output").html(output);        
        },
        error: function (status, exception) 
        {
        //alert('Exception:', exception);
        }        
    });
}

Answer 1

("#output").html(output) - 输出是 <td>（表格数据），您正在向其中添加表格行。 HTML结构应该是<table><tr><td>。

因此，您很可能希望将您的 result 添加到 <table>

为了说明这一点，我制作了一个基本示例，其中变量result 只是硬编码的array（看起来像您的数据）。只需调用forEach 并调用append() 以将<tr> 和<td> 添加为字符串。

举个简单的例子，试试：

HTML：

<table  id="output" class="table-responsive">
</table>

脚本：

$(function() {
  const result = [ 
    { FromID: "FromID 1", "Body" : "Body 1", "DateSent" : "1/1/2021" }, 
    { FromID: "FromID 2", "Body" : "Body 2", "DateSent" : "2/2/2021" }, 
  ]

  result.forEach(i => {
    $("#output").append("<tr><td>"  + i.FromID + "/" + i.Body + "/" + i.DateSent + "</td></tr>");
  });
});

在此处查看演示：https://jsfiddle.net/dy3r0oqn/

没有足够的代码来测试您的解决方案。但是，您应该能够将代码与以下内容集成：

function sendName(id) {
    $.ajax({   
        datatype: "json",
        type: "POST",
        data: { 'senderName': id },
        url: '/Inbox/GetInboxes/',
        success: function (result)
        {
             result.forEach(i => {
                $("#output").append("<tr><td>"  + i.FromID + "/" + i.Body + "/" + i.DateSent + "</td></tr>");
            });
        },
        error: function (status, exception) 
        {
           //alert('Exception:', exception);
        }        
    });
}