I have ASP.NET MVC 3 web app and List of objects
List<ConversionModel> Queue
I would like to display list of ConversionModel objects in one web page and refresh display every five seconds without reloading web page. I am new to MVC 3 and can't find any example.
You could use AJAX for this, but I don't think that has a good impact on your server (at least doing so every five seconds for every user on your site).
Client-side:
<script type="text/javascript">
// This is to refresh the items every 5 seconds (5000 milliseconds)
setInterval(getMyData, 5000);
function getMyData() {
// Using $.getJSON for simplicity, but try to use $.ajax or $.post
$.getJSON('/MyController/MyAction', function(response) {
var items = response.d.items;
// Iterate through the items here and add the items to your web page
});
}
</script>
Server-side:
public JsonResult MyAction()
{
List<ConversionModel> conversionModels = GetMyDataSomewhere();
return Json(new {
items = conversionModels
}, JsonRequestBehaviour.AllowGet);
}
If updating the view each five seconds is all you need, you could get away with simple ajax combined with a timer. See
Third, you will need to have an action method in one of your controllers fetching the set of ConversionModels from the database and generating a response from it (either JSON or directly a HTML markup).
If you read the documentation for the $.ajax() function, I believe you will see how the pieces fit in together.
If, however, you want to be more flexible than just polling the server each five seconds regardless of the real activity, you may want to check on SignalR, a great library for pushing data from server to the client (e.g. a browser).
use jQuery an make ajax requests every x minutes to the controller that will return a partial view with a model as List.
javascript on your main page could look like this:
function timerMethod() {
$.ajax({
type: "get"
url: "/Controller/Action",
cache: false,
success: function(result){
$("#partialContainer").html(result);
}
});
var timerId = setInterval(timerMethod, 5000); // 5 seconds
Controller/Action is your action that return partial view.
You also need to create a view with name Action in Views\Controller and write it so that it displays all the objects in the model (model should be of type List<ConversionModel>). Hope that helps
