Copied to clipboard

Flag this post as spam?

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


  • Damien Green 72 posts 134 karma points
    Jul 22, 2014 @ 18:33
    Damien Green
    0

    How to keep Surface Controller Instances Unique

    Hi Guys,

    I'm implementing my first surface controller and I have so far managed to get the control to render to the page using the @Html.Action("RenderControl", "ImageGallerySurface") Razer direcive. My controller contains a Javascript reference which will dynamically act of the contents of the controller when it is first rendered.

    While this works fine if I have just one controller on the page, but if I have two or more then I need a way to make sure the Javascript can target the correct controller. Is there a property ID that I can access from both the SurfaceController view and from the Corresponding javascript so that I can ensure I'm manuipulating the contents of the correct controller?

    My view looks like this:

    @model ImageGallery.Models.ImageGalleryViewModel

    <script src="~/scripts/jquery-2.1.1.min.js"></script>
    <script src="~/scripts/ImageGallery.js"></script>

    I'd like a way of being able to put a unique ID after the GalleryWrapper (which is the DIV manipulated by the Javascript) and have a way to transfer that value into the associated Javascript, maybe passing it in via an Initialize method? Perhaps I am going about this the wrong way. If so can someone explain the correct way to integrate Javascript into a SurfaceController.

    Many thanks,

    Damien

  • Andy Butland 422 posts 2334 karma points MVP 4x hq c-trib
    Jul 23, 2014 @ 09:27
    Andy Butland
    0

    You can pass parameters in your Html.Action, so perhaps you could pass in the instance number of the gallery on the page.  So if you have two you could call them like this:

    @Html.Action("RenderControl", "ImageGallerySurface", new { number = 1 })
    @Html.Action("RenderControl", "ImageGallerySurface", new { number = 2}) 

    You can pick up that number from your controller action method by defining it as a parameter.

    public ActionResult RenderControl(int number = 1)

    From that you could pass that number into your generated HTML in the partial view, perhaps as an id attribute like id="gallery-1" on your outer element for the gallery and in some generated javascript something like this:

    <div id="gallery-1"></div>
    <script>
    initGallery("gallery-1");
    </script> 

    Hope that helps.

    Andy

  • Damien Green 72 posts 134 karma points
    Jul 23, 2014 @ 10:37
    Damien Green
    0

    Hi Andy,

    That's a really interesting idea, I was attempting to pass an ID from my model but this sounds like it will work. Once more thing, can you explain exactly how I can pass the number into the partial view? I can grab variables from my model using @(Html.Raw(Model.ID)) for a variable in my model called ID. However since the number is in the Controller how do I pass that into the partial view?

    Thanks again,

    Damien

  • Damien Green 72 posts 134 karma points
    Jul 23, 2014 @ 10:49
    Damien Green
    0

    I've figured it out, I was being a bit stupid! For anyone who would like to know, you simply create a constructor for your ViewModel that takes in the number (or in my case ID) as a parameter. e.g.

    public class ImageGalleryViewModel
    {
        public int ID { get; private set; }
    
        public ImageGalleryViewModel(int ID)
        {
            this.ID = ID;
        }
    }
    

    which can then be called from your controller like so:

    public class ImageGallerySurfaceController : SurfaceController
    {
        /// <summary>
        /// Renders the Contact Form
        /// @Html.Action("RenderControl","ImageGallerySurface");
        /// </summary>
        /// <returns></returns>
        public ActionResult RenderControl(int ID)
        {
            //Return a partial view ImageGallery.cshtml in /views/ImageGallerySurface/ImageGallery.cshtml
            //With an empty/new ContactFormViewModel
            return PartialView("ImageGallery", new ImageGalleryViewModel(ID));
        }
    
    }
    
  • Andy Butland 422 posts 2334 karma points MVP 4x hq c-trib
    Jul 23, 2014 @ 10:57
    Andy Butland
    0

    Yes, or, without the constructor, you can instantiate your view model like this:

    returnPartialView("ImageGallery",newImageGalleryViewModel { ID = ID }));

    Andy

  • Damien Green 72 posts 134 karma points
    Jul 23, 2014 @ 12:40
    Damien Green
    0

    Of course, using the C# feature to directly initialise the properties. I think my main stumbling block making the transition from WebForms to MVC is that MVC is actually a lot simpler which is throwing me a bit!

    Thanks again.

Please Sign in or register to post replies

Write your reply to:

Draft