Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Frank Reinhold 3 posts 73 karma points
    Jun 30, 2016 @ 14:57
    Frank Reinhold
    0

    Load Partial View by AJAX

    Hi @All,

    I'm very new to Umbraco, C# and MVC and need a little bit help.

    I have a Partial View in my master.cshtml returning some database content. Everything works, but i want to speed it up. So I thought, I have to load by jquery/ajax after loading all the other stuff. This works for "normal" views (for those with an real URL).

    Can anyone tell me how to load a Partial View "Async"? I don't need code, just the right direction :)

    Thanks! Frank

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Jun 30, 2016 @ 16:49
    Alex Skrypnyk
    0

    Hi Frank,

    The easiest way to fix performance is to use CachedPartial helper. It's really easy to use and great performance results.

    Look here - https://our.umbraco.org/documentation/reference/templating/mvc/partial-views

    Ajax is good - but it's perfect I think. The best way is to fix serverside.

    Cheers,

    Alex

  • Frank Reinhold 3 posts 73 karma points
    Jul 01, 2016 @ 09:50
    Frank Reinhold
    0

    Hi Alex,

    thanks for you reply. Nevertheless the page must be loaded once for the first time. Caching seems to be a good idea for views that must be loaded recurrently.

    I want to load my Masterpage, with all the content, but in the little box, where the partial view is building, I want to show the user a simple tag with a text content "is loading..." and change this content after the page is ready loaded.

  • Jinesh Kaneriya 22 posts 155 karma points
    Jul 01, 2016 @ 10:44
    Jinesh Kaneriya
    0

    Hi,

    make a <div id="visitData" onload="javascript:GetVisits()"> Content is loading </div>and close it where you want to add partial view and call controller method

    <script type="text/javascript">
        function GetVisits(e) {
        var ip = $(e).parents("tr").children("td").eq(1).text();
        var visitDate = $(e).parents("tr").children("td").eq(0).text();
        $.get("/umbraco/surface/SiteVisitors/getVisits", {
            id: ip,
            visitDate: visitDate
        }, function (data) {
              $('#visitData').empty();
              $('#visitData').html(data);
        });
    }
    

    and in controller write something like

     public class SiteVisitorsController : SurfaceController
    {
        // GET: SiteVisitors
        [HttpGet]
        public ActionResult getVisits(string id, string visitDate)
        {
            var model = Visitor.GetSiteVisitorPageByIPAddress(id, visitDate);
            return PartialView("Partials/_SiteVisitors", model);           
        }
    }
    
  • Frank Reinhold 3 posts 73 karma points
    Jul 01, 2016 @ 12:31
    Frank Reinhold
    0

    Hi,

    this is the solution! Thanks a lot! My Code was very similar but I didn't know the correct URL:

    $.get("/umbraco/surface/SiteVisitors/getVisits", {
    

    This was the magic row .... I forgot umbraco/surface

    Greetings Frank

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Jul 01, 2016 @ 12:32
    Alex Skrypnyk
    0

    Great Frank, I'm glad that you solved the problem.

Please Sign in or register to post replies

Write your reply to:

Draft