Reputation: 229
Im calling a restfull api and this gives me some "summary" information about products based on a search query. The result is presented on a page. After this is presented i want the page to (ajax?) load additional information like all the images of the products without the user noticing. The images will be async loaded into a carousel. The question is how would i achieve this?
Should i call a controller action from my view? I tried this but i cannot call an async function as child. So I figured i call a javascript function and let that do an ajax call to get the images.
My question is is this the best approach? and will this slow down the view?
Upvotes: 2
Views: 1226
Reputation: 29186
I would look at executing some JavaScript code at the bottom of the view (to ensure the document body has be rendered) to make AJAX calls to the controller responsible for returning image data e.g.
Bottom of the view.
@section Scripts {
<script type="text/javascript">
// Load the image data using AJAX.
</script>
}
The above assumes that the layout page which the view uses has a RenderSection("Scripts", false)
call. If it does not, then simply remove the @section {}
bit.
The AJAX call can be async : true
(I'm assuming jQuery is what you're using) to allow the user to carry on interacting with the web page, and not experience a delay/freeze.
Upvotes: 1
Reputation: 3073
From my experience is better to contain all information in view model (name, description, price, picture, etc.). For example, you retreive data from database through controller (or any other layer) and then by controller return a view with the specific view model with data. However, in your situation you might have a big images and loading them in one query might not be efficient. In order to resolve this, you can create separate action in your controller and load image(s) after you'd render the view through AJAX. If the call is asynchronous browser wouldn't be freezed, but it's nice to notify user that's something is loading - in that case - images.
Upvotes: 1