更新列表 Model 與 Ajax ASP .NET MVC5

Question

有人可以給我一個提示，如何在頁面中調用操作結果和 ajax 后，將列表從 controller 傳遞到視圖頁面中的 Model 列表。 （意思是用 ajax 回調結果更新當前列表 model）？

這是我的默認加載視圖頁面代碼：

@model List<ChargeSystem.Models.Message>
@foreach (var item in Model)
    {
        <div class="container1">
                <p>@item.Msg</p>
                <span class="time-right">@item.MsgDate</span>
            </div>
    }

</div>
<div class="divContinMsg">
    <input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtMsg").keyup(function (e) {
            if (e.keyCode == 13) {
                $.ajax(
                    {
                        url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                        type: 'Post',
                        data: "",
                        contentType: false,
                        success: function (result) {
                        //What can i do????
                        },
                        error: function () {
                            alert("error");
                        }
                    })
            };
        });
    });
</script>

這是 Ajax 調用操作結果：

 public ActionResult ajaxContactAdmin(string msg)
        {
            var result = new { model = messageRepository.Select().ToList()};
            return Json(result, JsonRequestBehavior.AllowGet);
        }

那么，在 ajax 回調后，如何刷新 model 呢？

Answer 1

所以你要做的是 append 現有結果集的結果。

首先，我會添加一個容器以便於參考，其次您會將項目添加到容器中：

@model List<ChargeSystem.Models.Message>
<div id="listContainer">
  @foreach (var item in Model)
    {
        <div class="container1">
                <p>@item.Msg</p>
                <span class="time-right">@item.MsgDate</span>
            </div>
    }
  </div>
</div>
<div class="divContinMsg">
    <input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtMsg").keyup(function (e) {
            if (e.keyCode == 13) {
                $.ajax(
                    {
                        url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                        type: 'Post',
                        data: "",
                        contentType: false,
                        success: function (result) {
                         $('#listContainer').append('<div class="container1">'+
                             '<p>' + result.Msg + '</p>'+
                             '<span class="time-right">' + result.MsgDate +'</span>'+
                             '</div>');
                        },
                        error: function () {
                            alert("error");
                        }
                    })
            };
        });
    });
</script>

Answer 2

看起來您想在文本框中輸入信息並在視圖中保存和更新。 我認為你可以做到這一點。

這是一個例子：

您的 Controller：

public IActionResult GetUser ()
        {
            var messages = context.Messages.ToList();
            return View(messages);
        } 
        [HttpPost]
        public IActionResult ajaxContactAdmin(string msg)
        {
            var message = new Message
            {
                Msg = msg,
                MsgDate = DateTime.Now
            };
            context.Add(message);
            context.SaveChanges();
            return Json(message);

        }

你視圖中的 Js：

@section scripts{ 
    <script>
        $(document).ready(function () {
            $("#txtMsg").keyup(function (e) {
                if (e.keyCode == 13) {
                    var msg = document.getElementById("txtMsg").value
                    $.ajax(
                        {
                            url: '/Home/ajaxContactAdmin?msg=' + $("#txtMsg").val(),
                            type: 'Post',
                            data: { "msg": msg},
                            contentType: false,
                            success: function (message)
                            {
                                console.log(message);
                                window.location.reload();
                            },
                            error: function () {
                                alert("error");
                            }
                        })
                };
            });
        });
    </script>
}

結果顯示：