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

时间:2017-04-20 10:28:55

标签: c# asp.net asp.net-mvc razor asp.net-ajax

我有一个模型对象的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);
    }

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

3 个答案:

答案 0 :(得分: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将其添加到视图中。

答案 1 :(得分:0)

你可以试试这个:

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

答案 2 :(得分:0)

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

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