Partial MVC Page Update

Question

I have an MVC project where I have a form with fields that the user can enter and save. On the same page, I have a table that shows a brief list of information that the user has just saved. The problem I encountered is trying to update only the table after saving, not refreshing the whole page.

Is this possible in jquery or MVC? If so, does anyone have an example.

Here's what the action looks like in the controller:

public ActionResult RefreshList() { string _employeeID = Request.QueryString["empIDSearch"]; this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID); return View("CourseHistoryList"); } 

Function in view: (and this is where I got confused about how to update only the table)

 $.ajax({ url: "/Home/RefreshList", type: "POST", success: function(result) { alert("got here"); }, error: function(xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError + " " + ajaxOptions); } }); 

Removing ViewData from the controller:

 <% foreach (var item in (IEnumerable<EdMVC.Models.tblEdCourse>)ViewData["coursehistorylist"]) { %> 

Thanks.

Answer 1

Note. When I wrote that this MVC was only in version 1, although it is mostly relevant, now there are some parts of this post that are not applicable to later versions of MVC.

This is a deeper version of NickLarsen's answer, unfortunately, I ran out of space in the comments, so I added it as an answer.

This should probably be a "GET" request, since you are not sending data to the server in this request. jQuery will really work for itself when you use the $ .ajax request so you can leave it as I did below. When the "POST" action is explicitly required, be sure to make this distinction.

In the ajax call you make here, the result variable is the string returned from the server, and can be viewed and applied as such. If you want, you can also turn this into a jQuery object and filter it, but that is beyond the scope of this question.

Your $ .ajax code needs to be updated to the following:

 $.ajax({ url: '/Home/RefreshList', success: function(result) { alert('Received: ' + result); $('#myDivId').html(result);//This is the line you need }, error: function(xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError + " " + ajaxOptions); } }); 

The above code inserts the result into the element with the identifier "myDivId" if the server responds correctly.

This div should have the following id attribute, but the contents of the div and other attributes do not matter.

 <div id="myDivId"></div> 

The above examples will be fully executed by themselves, as long as the controller action, which your url indicates, returns a value.

In a completely different note ...

The following will fully facilitate your life with MVC, even if it is not related to a question that it will not put in the comments and deserves mention.

To shorten the namespace declaration, add the namespace to the web.config file in the <pages><namespaces> node section, add the following: <add namespace="EdMVC.Models"/> You must also do this with any other namespaces, to which you should regularly contact, as this will allow you to easily access your objects from the view.

Also, in this case, you should probably send data to the view through the "model" view, if at all possible, and not the ViewData dictionary, which you should always discard if it is used.

To do this, change your return from:

 this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID); return View("CourseHistoryList"); 

to:

 return View("CourseHistoryList", _service.ListCoursesByEmpID(_employeeID)) 

Here you need to create a strongly typed view so that it replaces the inherits attribute at the top of your view:

 Inherits="System.Web.Mvc.ViewPage<IEnumerable<tblEdCourse>>") 

Using these steps, you can access it as a strongly typed object:

 foreach(tblEdCourse item in Model) { } 

Or, if it is a single object, just <%= Model.Id %>

This should allow you to reduce the casting time and save you a lot of time in the long run, if any of the above questions does not make sense or is difficult to understand, let me know and I will repeat it.

Answer 2

The only thing you are missing is replacing the existing table with new data that returns to the success function.

For more information, you must transfer the call to a partial view in the action view using a div that has an identifier. Then call the .html(newData) function on this div in your success method.

Answer 3

You can do this in web forms that sound like you are using just using the update panel.

However...

MVC is ideal because it removes the tight connection between the presentation layer of a web application and the actual code that controls user interaction. However, if you invest in a webforms solution, jquery execution can be done ...

JQuery is a JavaScript library that allows you to "query" the DOM of web pages to access various elements on this page. It also has convenient functionality for executing asynchronous requests to the server.

In web forms, you can create a web service to save user input and return a new row in the table for partial updates. You also need to learn how to return JSON from a web service in order to simplify processing in JavaScript.

Below are some useful links:

JSON return from .NET web service: http://blog.davebouwman.com/index.php/2008/09/posting-data-to-aspnet-json-services-with-dojo/

Using the .NET web service using jQuery: http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/