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?

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies