如何在不刷新页面（实时更新）的情况下显示 postgresql 表中的数据？答案

【问题标题】：How to show data from postgresql table without refreshing page (live update)?如何在不刷新页面（实时更新）的情况下显示 postgresql 表中的数据？
【发布时间】：2021-04-06 21:33:14
【问题描述】：

我正在 razor pages asp.net c# 中创建一个页面，我想在其中显示 postgresql 表的值，当插入新内容时，您会在页面上看到新的更新表而无需刷新（实时）。我知道它可能与通知和侦听功能有关，但我在互联网上找不到任何好的例子。我有点卡住了。希望有人能告诉我一个简单的方法来做到这一点。这是c#代码：

public List<NotificationModel> ShowNotification()
        {
            var cs = Database.Database.Connector();
            List<NotificationModel> not = new List<NotificationModel>();
            using var con = new NpgsqlConnection(cs);
            {
                string query = "Select datumnu, bericht FROM notification ORDER BY datumnu DESC OFFSET 1";
                using NpgsqlCommand cmd = new NpgsqlCommand(query, con);
                {
                    cmd.Connection = con;
                    con.Open();
                    using (NpgsqlDataReader dr = cmd.ExecuteReader())
                    {
                        
                        while (dr.Read())
                        {
                            not.Add(new NotificationModel { Datenow = ((DateTime) dr["datumnu"]).ToString("yyyy/MM/dd"), Bericht = dr["bericht"].ToString() });
                        }
                    }
                    
                    con.Close();
                }
            }
            return not;
        }

这里是html

<div class="container-fluid">
        <p id ="output"></p>
        <div class="col-3 bg-light">
            <h5 class="font-italic text-left">Old Messages</h5>
            <hr>
            @foreach(var n in @Model.ShowNotification())
                    {
                                                
                        <tr>
                            <img class="img-fluid" src="/Images/Reservation.png"/>
                            <td>
                                @Html.DisplayFor(m => n.Datenow)
                                                                
                            </td>
                            <td>
                                @Html.DisplayFor(m => n.Bericht)
                                                                    
                            </td>
                        </tr>
                                                            
                                                        
                                                    
                                                
                                                
                    }
            <hr>

                
        </div>
    </div>
</div>

【问题讨论】：

标签： c# asp.net postgresql razor

【解决方案1】：

您可以做的一件事是在鼠标拖动时进行 ajax 调用，首先加载一些 x 条记录并在 UI 中显示，然后每当用户向下移动时按需调用 ajax 调用并发送页码类型值并获取显示在 UI 上。

<script type="text/javascript">
    $(document).ready(function () {
        var serviceURL = '/ControllerName/GetData';

        $.ajax({
            type: "POST",
            url: serviceURL,
            data: param = "", //send page number here
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {     
            console.log(data); // append this to your table as applicable
        }

        function errorFunc() {
            alert('error');
        }
    });
</script>



public class ControlllerName : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Getdata(int pagenumber)
    {//fetch here the data based on pagenumber
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
   }

【讨论】：