使用 Ajax ASP .NET MVC 更新 ViewModel 中的列表

Question

我有一个在视图中显示的模型对象列表（列表）。我想在不刷新页面的情况下添加到该列表 - 因此我认为 Ajax 是一个很好的解决方案。我目前很难让它工作。

我的视图正在呈现一个包含列表的 PartialView。

有人可以告诉我如何在不更新整个页面的情况下将列表传递给控制器然后返回视图吗？

我希望我的问题是有道理的。

/克里斯

编辑：

我一直在尝试 JQuery。看起来像这样：

<script>
$(document).ready(function () {
    $("#btnSave").click(function () {

        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "/Video/Index", // Controller/View
                data: { //Passing data
                    testString: $("#txtArea").val(),
                    videoID: '@(Model.Video.iVideo_ID)',
                    taskID: document.getElementById('dropVal').value
                }
            }).success(function () {
                $("#proever").load("/Video/Index");
            });
    })
})

通过这种方法，我可以在我的控制器中使用 HttpPost 方法。并且我成功将参数传递给它。

[HttpPost]
    public ActionResult Index(CommentViewModel viewModel)
    {
        System.Diagnostics.Debug.WriteLine(viewModel.testString);
        System.Diagnostics.Debug.WriteLine(viewModel.videoID);
        System.Diagnostics.Debug.WriteLine(viewModel.taskID);



        viewModel.testString = "new text string";

        return View(viewModel);
    }

现在的问题是我无法将更新后的视图模型返回到视图中。我做错了什么？在这个例子中，我没有更新列表，只是更新了一个测试字符串，看看我是否可以将它更新回视图..

Answer 1

你可以试试这个：

$(document).ready(function () {
    $("#btnSave").click(function () {
    var model = {
                    testString: $("#txtArea").val(),
                    videoID: '@(Model.Video.iVideo_ID)',
                    taskID: document.getElementById('dropVal').value
                };
        $.ajax(
            {
               type: "POST", //HTTP POST Method
               url: "/Video/Index", // Controller/View                    
               data: JSON.stringify({ viewModel: model })
               async: false,
               processData: false,
               contentType: false,
               dataType: 'json'
            }).success(function (json) {
                $("#proever").html(json.responseText);
            });
    })
})

Answer 2

您需要在您的案例中使用持久数据存储。目前，您的异步 post 请求将更改视图模型数据，但是当您尝试使用 .load(...) jquery 函数加载视图时，后续 http 请求中的数据会丢失。

1- 向 http post 控制器操作发送异步请求以更改数据库存储中的数据。 2- 在 http get index 操作中从 db 读取视图模型数据。 ($("#proever").load("/Video/Index"))

Answer 3

对于那些感兴趣的人，我是这样解决问题的：

<script>
$(document).ready(function () {
    $("#btnSave").click(function () {

        $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "/Video/AddComment", // Controller/View
                data: { //Passing data
                    //Reading text box values using Jquery
                    sComment: $("#txtArea").val(),
                    videoID: '@(Model.Video.iVideo_ID)',
                    taskID: document.getElementById('dropVal').value
                }
            }).success(function () {
                console.log("good");
                var txt = document.getElementById('txtArea').value;
                console.log(txt);

                var taskId = document.getElementById('dropVal').value;
                var taskCont = $("#dropVal option:selected").text();
                var taskContNum = Number(taskCont) - 1
                console.log(taskCont);

                var node = document.createTextNode(txt);

                var para = document.createElement("div");
                para.appendChild(node);

                document.getElementById('taskPalace').appendChild(para);

                document.getElementById('cola-' + '' + taskContNum).appendChild(para);

                document.getElementById('txtArea').value = "";
            });
    })
})

因此，如果请求成功且 HttpPost 方法中没有任何错误，它会将评论添加到数据库（通过 HttpPost），然后 jquery 将其添加到视图中。

使用 Ajax ASP .NET MVC 更新 ViewModel 中的列表

Update List in ViewModel with Ajax ASP .NET MVC

c#

asp.net

asp.net-mvc

asp.net-ajax

razor