Question

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

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

<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将其添加到视图中。

Answer 2

你可以试试这个：

$(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 3

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

1-发送异步请求到http post controller操作以更改db store中的数据。 2-在http get index操作中从db读取视图模型数据。（$（ “＃proever”）。负载（ “/视频/索引”））

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

3 个答案: