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

我有一个在视图中显示的模型对象列表。我想在不刷新页面的情况下添加到这个列表中，因此我认为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");
            });
    })
})

<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 = "";
            });
    })
})

现在的问题是，我无法将更新后的viewmodel恢复到视图中。。我做错了什么？ 在本例中，我不更新列表，只更新一个测试字符串，以查看是否可以将其更新回视图。

您可以尝试以下操作：

$(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);
            });
    })
})

---

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

1-向http post控制器操作发送异步请求以更改数据库存储中的数据，例如。

---

2-在http get index操作中从db读取视图模型数据。（$（“#proever”）.load（“/Video/Index”）

对于感兴趣的人，我解决了如下问题：

<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");
            });
    })
})

<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 = "";
            });
    })
})

$（文档）.ready（函数（）{
$（“#btnSave”）。单击（函数（）{
$.ajax(
{
类型：“POST”，//HTTP POST方法
url:“/Video/AddComment”，//控制器/视图
数据：{//正在传递数据
//使用Jquery读取文本框值
sComment:$（“#txtArea”）.val（），
videoID:“@（Model.Video.iVideo_ID）”，
taskID:document.getElementById（'dropVal'）.value
}
}).success（函数（）{
控制台日志（“良好”）；
var txt=document.getElementById（'txtArea'）.value；
console.log（txt）；
var taskId=document.getElementById（'dropVal'）.value；
var taskCont=$（“#dropVal选项：选中”）.text（）；
var taskContNum=Number（taskCont）-1
console.log（taskCont）；
var节点=document.createTextNode（txt）；
var para=document.createElement（“div”）；
子节点（节点）段；
文件.getElementById（'taskPalace'）.appendChild（第段）；
document.getElementById（'cola-'+''+taskContNum）.appendChild（第段）；
document.getElementById（'txtArea'）。value=“”；
});
})
})

---

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

为什么要将列表传递给控制器？我想我应该将其传递到控制器中的[HttpPost]方法中，但我不确定。我愿意接受任何解决方案。你没有提供足够的信息。“列表”是只显示还是可以编辑现有列表中的项目？我添加了一些代码：）方法应该返回的是一个

JsonResult

，指示否则成功，然后可以根据表单值更新DOM（例如，向表中添加一行）-但谁知道什么时候不会显示任何相关代码）谢谢。在通过post方法将数据传递回视图后，我仍然遇到问题。你知道我如何展示更新后的数据吗？世界上有谁会投这个票？它会抛出一个'500内部服务器错误抱歉，我犯了一个错误。我已经更新了代码。请现在试一试@克雷莱我不知道你的意思？也许你可以用一些代码解释一下？