locked
display data of a continuously updating list in View RRS feed

  • Question

  • User-2103146910 posted

    Dear All,

    i have coded to fetch data from db even after seconds in a List collection but i want to display these all changes in table simultaneously in the View but cant. please suggest any easy way or technology that i should use to accomplish this.

    with regards

    Thursday, June 11, 2020 7:32 PM

All replies

  • User1686398519 posted

    Hi,  m_tack

    According to your needs, I made an example, please refer to it.

    • I used the modal and partial view.
    • I used TempData to display the operation result information.

    Controller

            public Model3 db = new Model3();
            public ActionResult TestEdit(int Id)
            {
                TestModel testModel = db.TestModels.Find(Id);
                if (testModel != null)
                {
                    return PartialView("_TestEdit", testModel);
                }
                return RedirectToAction("TestIndex");
            }
            [HttpPost]
            public ActionResult TestEdit(TestModel testModel)
            {
                try
                {
                    db.Entry(testModel).State = EntityState.Modified;
                    db.SaveChanges();
                    TempData["Message"] = "Id:" + testModel.Id + " has been changed";
                }
                catch (Exception e){
                    TempData["Message"] = "Id:" + testModel.Id + " has not been changed"+" Error:"+e.Message;
                }
                return RedirectToAction("TestIndex");
            }
            public ActionResult TestIndex()
            {
                return View(db.TestModels.ToList());
            }

    TestIndex

    <p>@TempData["Message"]</p>
    <table class="table">
        <thead>
            <tr><td>@Html.DisplayNameFor(m => m.Id)</td><td>@Html.DisplayNameFor(m => m.content)</td><td></td></tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayTextFor(m => item.Id)</td>
                    <td>@Html.DisplayTextFor(m => item.content)</td>
                    <td><button class="editbtu">Edit</button></td>
                </tr>
            }
        </tbody>
    </table>
    <div id="EditModel" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
        </div>
    </div>
    @section scripts{
        <script>
            $(document).ready(function () {
                $("table tbody").on("click", ".editbtu", function () {
                    var row = $("table tr").index($(this).closest("tr"));
                    var Id = $("table").find("tr").eq(row).find("td").eq(0).text();
                    $.ajax({
                        url: 'TestEdit',
                        type: 'GET',
                        data: {
                            Id: Id
                        },
                        success: function (data) {
                            $(".modal-dialog").html(data);
                            $("#EditModel").modal('show');
                        }
                    });
                });
            });
        </script>
    }
    

    _TestEdit

    @using (Html.BeginForm("TestEdit","Home"))
    {
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit</h4>
            </div>
            <div class="modal-body">
                @Html.HiddenFor(m=>m.Id)
                <table class="table">
                    <tr><td>@Html.DisplayNameFor(m => m.Id)</td><td>@Html.DisplayNameFor(m => m.content)</td><td></td></tr>
                    <tr><td>@Html.DisplayTextFor(m => m.Id)</td><td>@Html.TextBoxFor(m => m.content)</td></tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    }
    

    Here is the result.

     
    Best Regards,

    YihuiSun

    Friday, June 12, 2020 3:03 AM