ASP.Net C# POST not returning view

Question

Using ASP.NET, C# and Javascript, I'm trying to dynamically get Data for the user, POST it to a controller, and return a view that changes depending on the Data.

Here's the code :

Javascript function :

function editEntry(id) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "Edit?id=" + id, true);
    xmlhttp.send({ id: id });
    //xmlhttp.send();
}

Controller handling post (a portion) :

[HttpPost]
public ActionResult Edit(EditEvenementiel edit)
{
    var contexte = new intranetEntities1();                       

    SqlParameter Id_viewBag = new SqlParameter("@id", edit.id);
    ViewBag.edit = contexte.evenementiel
       .SqlQuery("SELECT * FROM evenementiel WHERE id_evenementiel = @id", Id_viewBag);

    return View();
}

when i fire the javascript, i can see the POST in the firebug console (working fine), i can see the variable getting the correct value in Visual Studio's Debugger, but the view doesn't change.

I even see the expected view (with all the treatements expected) returned in the firebug console; but my page still doesn't change.

How can i do that ?

Answer 1

By default, you should have 2 Actions , one that should process/get the data through a Post method and one that collects data for the View . (it's called Post/Redirect/Get - more details on wiki )

Having this in mind, you can leave your post method as :

[HttpPost]
    public ActionResult Edit(int id)
    {
        var contexte = new intranetEntities1();
        SqlParameter Id_viewBag = new SqlParameter("@id", id);
        EditEvenementiel edit = contexte.evenementiel.SqlQuery("SELECT * FROM evenementiel WHERE id_evenementiel = @id", Id_viewBag);

        return RedirectToAction("Edit",new { edit = edit} );
    }

and create a new action which sends the data to the view.

Something like:

    public ActionResult Edit(EditEvenementiel edit)
    {
       //logic here
        return View(edit);
    }

Please be aware that this is just an example , modify it according to your scenario.

Answer 2

As you are using Ajax (XMLHttpRequest) to fetch this data you also need to present it on your page, it wont happen automatically.

Maybe something like this?

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        alert(xmlhttp.responseText); // or put the responseText in a HTML element of your choice to do whatever you want to do

    }
}

Answer 3

Where do you actually update anything on the page? All you do is send the request:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "Edit?id=" + id, true);
xmlhttp.send({ id: id });

But you ignore the response. The browser isn't going to know what you want to do with that response, you have to tell it. Which could be something as simple as:

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById('someElement').innerHTML = xmlhttp.responseText;
  }
}

Basically, use the AJAX response (which is an HTML view?) to update the page content.