Copied to clipboard

Flag this post as spam?

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


  • PierreD Savard 183 posts 290 karma points
    Oct 17, 2013 @ 22:43
    PierreD Savard
    0

    Need help with loding partial view with Ajax

    Hi, I try to adapt the DAMP Gallery MVC sample to my reality. I currently use MVC with custom Controller like:

        public class IndexMainController : PageContenuController
    {
        //
        // GET: /FrontPage/
    
        public ActionResult IndexMain()
        {
            var model = new IndexMainModel();
    
            return View(model);
        }
    
    }
    

    then PageContenuController derived from RenderMvcController. I acheive all the thumbnail part, and correct paging. I try now to load the page2 from a ajax call but I am stuck with 404 not found.

    On my product page I got the gallery section like DAMP:

        <div id="gallery1Layer">
    <div id="gallery1Overview">
        @Html.Partial("Gallery", Model.GalerieProduit)
    </div>
    

    That call a Partial view:

    @model List<umbBaultar.Models.Shared.ImageModel>
    

    @{

    if (@Model.Count() > 0)
    {
        //All pager logic is moved to a helper so it can be reused.
        var pager = umbBaultar.Classes.Helpers.Helper.GetPager(4, @Model.Count());
    
        <div class="photogallery">
        @foreach (umbBaultar.Models.Shared.ImageModel img in Model.Skip(pager.CurrentPage * pager.ItemsPerPage).Take(pager.ItemsPerPage))
        {
            <div class="img">
    
                <a class="popup" rel="gallery" href="@img.Url">
    
                    @*Show the gallery crop.*@
                    <img src="@img.UrlThumb" alt="@img.Nom"/>
                </a>
    
            </div>
        }
        </div>
    
        @*Pager*@
        <div class="pagination">
    
            @foreach (var number in pager.Pages)
            {
                if (number - 1 != pager.CurrentPage)
                {
                    <a href="?page=@number">@number</a>
                }
                else
                {
                    <span>@number</span>
                }
            }
        </div>
    }
    

    }

    Then in the js file I need to do:

    $.address.change(function (event) {
    
    var page = event.parameters['page'];
    
    if (page) {
    
        var qs = "?page=" + page
    
        //Build the ajax url.
        ajaxUrl = "/Views/Partials/Gallery.cshtml" + qs;
    
        // Load content
        $("#gallery1-loader").fadeTo(0, 0.8, function () {
            $("#gallery1Overview").load(ajaxUrl + qs)
        });
    }
    

    });

    But that do not work... Any suggestion?

Please Sign in or register to post replies

Write your reply to:

Draft