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?
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.
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:
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?
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));
}
}
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!
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
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
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:
You can pick up that number from your controller action method by defining it as a parameter.
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:
Hope that helps.
Andy
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
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.
which can then be called from your controller like so:
Yes, or, without the constructor, you can instantiate your view model like this:
Andy
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.
is working on a reply...