Update List in ViewModel with Ajax ASP .NET MVC

Question

I have a List (List) of Model objects which is presented in a view. I would like to add to that list without refreshing the page - therefore i thought Ajax is a great soloution. Im currently having a hard time getting it working.

My view is rendering a PartialView which contains the list.

Can somebody give me a hint how to pass a list to the controller and then back to the view without updating the whole page?

I hope my question makes sense.

/chris

EDIT:

I've been trying with JQuery. Looks like this:

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

With this method i get to HttpPost method in my controller. And i pass the parameters into it succesfully.

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

The problem is now that i can't get the updated viewmodel back to the view.. What am i doing wrong? In this example I don't update the list but just a test string to see if i can get it updated back to the view..

I was thinking I should pass it into a [HttpPost] method in the controller but i'm not sure. I'm open to any soloutions. — crellee
– crellee, Commented Apr 20, 2017 at 10:31
You have not given enough information. Is the 'list' display only or can you edit items in the existing list? — user3559349
– user3559349, Commented Apr 20, 2017 at 10:33
All you method should be returning is a JsonResult indicating success of otherwise, and then you can update the DOM based on the form values (e.g. add a row to your table) - but who knows when you wont even show any relevant code) — user3559349
– user3559349, Commented Apr 20, 2017 at 10:40

crellee · Accepted Answer · 2017-04-20 15:33:22Z

For those who's interested I solved the problem like this:

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

So if the request succeeds without any errors in the HttpPost method it adds the comment to the database(through the HttpPost) and the jquery adds it to the view.

Houssam Hamdan · Accepted Answer · 2017-04-20 11:26:43Z

0

You need to use persistent data store in your case. Currently, your async post request will change the view model data but data is lost in subsequent http requests when you try to load the view with .load(...) jquery function.

1- Send async request to http post controller action to change the data in db store for example. 2- Read the view model data from db in http get index action. ($("#proever").load("/Video/Index"))

answered Apr 20, 2017 at 11:26

Houssam Hamdan

9026 silver badges15 bronze badges

1 Comment

crellee Over a year ago

I'm not sure what you mean? Perhaps you could explain it in some code?

Graham · Accepted Answer · 2017-09-23 05:28:40Z

0

You can try this:

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

edited Sep 23, 2017 at 5:28

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Apr 20, 2017 at 10:49

Adnan Niloy

46911 silver badges19 bronze badges

3 Comments

crellee Over a year ago

Thanks. I'm still having problems passing the data back to the view after it's been through the post method. Any idea how I can present the updated data?

user3559349 Over a year ago

Who in the world is up-voting this - its will throw a `500 Internal Server Error

Adnan Niloy Over a year ago

Sorry, I made a mistake. I have updated the code. Please try now. @crellee

Collectives™ on Stack Overflow

Update List in ViewModel with Ajax ASP .NET MVC

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related