CODEWITHSUNDEEP
jqueryasp.net-mvc
WhiskerBiscuit
WhiskerBiscuit

Reputation: 5157

How can I automatically update a partial view?

I'm trying to convert one of my MVC pages so that it automatically updates the data every 10 seconds. Here is the method that calls the "main" view.

    public ActionResult Index()
    {
        return View("SomeView", new SomeViewModel { Rows = GetSomeInfo() });
    }

Here is SomeView

@Html.Partial("SomeView",Model)

and the partial view consumes the model

@model DatabaseConnectionMonitor.Models.TestDbModel
@foreach(var row in @Model.Rows)......

Now how do I wire this all up so that the partial view automatically refreshes? There is a lot of (what appears to be outdated) methods of ahceiving this, and I want to follow the current best practice. My research is telling me I should be using jquery unobtrusive ajax to do this.

Upvotes: 2

Views: 3076

Answers (2)

Rowan Freeman
Rowan Freeman

Reputation: 16358

Your question is vague/broad, so you will likely get vague/broad answers.

If you want code examples then I recommend you provide code you've tried so that we can fix it. Stack Overflow is generally not a good place to go "How do I do this complex thing? Show me the code." There are many possible solutions.

I'm going to show you three of the (probably many) possible techniques.

  • Difficulty: How difficult I think it is for someone new to the technique.
  • Durability: (Probably a bad name) How easy it is to maintain/extend/modify. How reusable it is and a rough estimation of how SOLID it is.

1. Use SignalR

Difficulty: High, Durability: High

SignalR is a .NET library that is ideal for integrating into ASP.NET MVC applications. It allows you to send information from server-side code to a client or clients in real-time. This would meant that a section of a page would not refresh based on time, but rather on some arbitrary event.

This technique is very popular in modern, complex web applications such as Facebook. In such examples, pages will often do minor-refreshes or updates when new data is incoming.

SignalR flow

2. Use Javascript and jQuery

Difficulty: Low, Durability: Low

Javascript already has a setInterval() function. Simply give this function a callback and a timeout period (in milliseconds) as arguments and it will call your function every X milliseconds.

You can use this in conjunction with jQuery's AJAX API so that every X seconds, jQuery will call an MVC partial view asynchronously and replace a section of the page with the specified partial view. For example:

setInterval(function() {
    $.ajax({
        url: "@Url.Action("Action", Controller)"
    }).success(function(data) {
        $("#someElement").html(data);
    });
}, 10000);

3. Use a web application Javascript framework

Difficulty: Medium, Durability: High

Web application frameworks such as AngularJS (my choice), Backbone.js, Knockout and so on are much better ways to achieve this goal over jQuery. The basic idea is similar to jQuery but the solution is more robust.

You would need to create logic (usually in a view-model or controller) that will be responsible for synchronising some arbitrary data (such as HTML from a partial view) with what is on the user's page. This can easily be done with timers - which are often included in the framework.

Upvotes: 8

Steve Andrews
Steve Andrews

Reputation: 559

I personally make use of jQuery AJAX calls for this type of requirement. It allows you to query new data from the server without refreshing the page.

The accepted answer on this post is a good stub to get you started: jQuery/AJAX call with a timer

Reposting the code for easy viewing:

$("button").click(function refreshText(){
    $.ajax({
        url:"http://127.0.0.1:8080/",
        success:function(result){
            $("#text").val(result);
            setTimeout(refreshText, 5000);
        }
    });
});

One other options is SignalR, which can push updates to the client, but it's a bit more involved: http://signalr.net

Upvotes: 1

Related Questions