I am trying to get an image from an external source in Play Framework. When working with just the string this works fine, but I need to pass to the controller an Integer also but this always give me a not applicable to String error. I think this is because of the img src html tag I am using. item.Myjob is the string and works fine by itself, item.MyItem is the integer
<img src ="#routes.ImagesController.getImage(item.MyJob,Item.MyItem)"/>
My plan is to pass the parameters to the image controller from the parameters I have to make up the path and the image file name and then return the image. Or any other advice on how this can be achieved. Thanks
Why you want to do this?
Why not pass a list of items with their image ids, and a for loop; if you want to get the list of items and their images? Something like:
//In controller
case class Item (name: String, picId: Int, whateverElse: Any)
//In your views
#(items: List[Item])
#for(item <- items){
#item.name
<img src="whateverPath/#item.picId">
}
or...
In a case you have a small application and unique items, you could simply make the image ids the same as items' names; so you don't need to look for it.
Related
I wrote a class for my project like this using typescript and react.
class myImage extends Image {
oriHeight: number;
}
After I uploaded two images I have an array named 'results' which is full of objects with type myImage.
[myImage, myImage]
When I click it in browser, I could see the data of oriHeight of each element.
Then I try to use results.map() method to traverse all the elements in that array.
results.map((result: myImage) => {
console.log(result);
var tmp = result.oriHeight;
console.log(tmp);
})
However, the output of result is no longer an object but an img tag (because the type of Image is a HTMLElement) which makes the data of result unreadable. So the output of every tmp is undefined.
I am confused about that. Why the myImage object will become an img tag when I want to traverse it? I hope someone could help me with that. Really appreciate it.
I bet your data is actually fine. When you console log an html element, the chrome console displays it as an html tag instead of the javascript object.
Update: It's generally a bad practice to add your own properties to DOM elements because they're harder to debug and you risk them being overwritten by future browser properties. Instead, you could create a javascript object that contains both the image and your custom property. Here's an example interface definition:
interface MyImage {
imageEl: HTMLImageElement;
oriHeight: number;
}
I'm working on a breadcrumb implementation in .net core 2.0,
The requirement is to be able to create a hierarchical menu, where the previous bread crumb item will take to the parent and so on...
the implementation is based on a bread crumb ViewComponent model, which reads the current route data and embeds the params as part of the breadcrumb links as tag helpers (asp-route-{value})
Problems:
I have 2 problems:
The ViewContext.RouteData.Values in the Razor View for the breadcrumb Component does not contain the key "id" thats supposed to get passed as query string parameter
Even if I hard code the above for testing purpose, injecting it back into the anchor tab in Razor view using asp-route-id - doesn't inject it as query string parameter at the end of the action but inserts it as "{controller}/{action}/{id}" after the action
Here's the URL from the browser:
http://127.0.0.1:5100/XXX/Service/{item_id}/Hardware/UpdateOrder?orderId={order_id}
for the previous breadcrumb, it should generate
http://127.0.0.1:5100/XXX/Service/{item_id}/Hardware/Detail?orderId={order_id}
the Id's are GUID
The Route template in Startup.asp
routes.MapRoute(
name: "areaRouteWithWholesaleCustomerCodeAndTargetId",
template: "{wholesaleCustomerCode}/{area:exists}/{baseItemId:guid}/{controller=Home}/{action=Index}/{id:guid?}"
);
The Breadcrumb ViewComponent Razor View:
#model BreadcrumbModel
<ul class="list-unstyled breadcrumbs" id="breadcrumbs">
#{
var baseItemId = ViewContext.RouteData.Values["baseItemId"] ?? "";
var id = ViewContext.HttpContext.Request.QueryString.Value ?? "";
id = "orderid=testid-123";
}
#foreach(var li in Model.Breadcrumb)
{
<li>
<a asp-area="#li.AreaName" asp-controller="#li.ControllerName" asp-action="#li.ActionName" class="#li.Class" asp-route-baseItemId="#baseItemId" asp-route-id="#id">
#li.DisplayName
</a>
</li>
}
</ul>
Data Available in ViewContext.RouteData - note that there's no id being passed as part of the route data -
ViewContext.HttpContext.Request.QueryString value:
Using the asp-route-{value} tag helper I'm injecting 2 id's into the anchor tag, baseItemId which is part of the route mapping and id - which is also part of the route mapping but as query string
when the menu is rendered this is what I get at the breadcrumb :
<a class="" href="/XXX/Service/Hardware/Detail/orderid%3DtestId-123?baseItemId=09185d87-5e3f">
Hardware
</a>
somehow, it isn't respecting the route template at all
I expected it to render it as follows:
Hardware
Expected Behavior:
I would have expected it to work as follows:
I should be able to get the value "id" from route values, rather than relying on query string parameters
on injecting the 2 id's based on the documentation, they should appear at their respective positions as defined in the routing template, baseItemId first as part of the route - then id as a query string part of the last action
Any Suggestions or insights into this ?
It's doing exactly what you're telling it to do. You're setting the id to the query string or simply orderId=test123. As a result, it's cramming that string into the id part of the route (while escaping the = sign, since it's invalid in that portion of the URI). What you should be doing instead, if you want the orderId as part of the query string, is to pass that as a route param: asp-route-orderId="#orderId".
As far as your baseItemId not going into the route goes, there's most likely another route that's being matched, which doesn't include this param. Routing short-circuits, so it will always choose the least specific route it can match, and then just dump anything else it doesn't need as the query string. You should either change the order of your routes or use a custom named route instead, to remove ambiguity.
If that's not the issue, the only other possibility is that the guid constraint on baseItemId is somehow not being satisfied by what you're passing for that param.
I'm looking for suggestions on how to simplify/optimize a piece of code in one of my view files in my ASP.Net MVC project. The code works, but I'm not sure if I've written it the best way.
Basically, the code is used to display a list of links to documents, with little thumbnails to the left of each link. The main problem, is that there are two different types of documents, and each type has to have it's thumbnail image stored in a different location, this is a project requirement and can't be changed.
I'm currently accomplishing this with the view code shown below.
// Display a link to every document.
foreach (var document in documentList)
{
<a href="#Url.Content("~/Document/DownloadDocument/" +
document.documentid)" target="_blank">
#{
// This will be the root of all the paths.
var path = "~/Document/DisplayImage/";
// If it's a Type 1 document, we need to use a different path.
if (document.documentType == "Type 1") {
path += "Path/To/Image/Folder";
<img id="imageHolder" src="#Url.Content(path)"
onerror="imgError(this);" />
#document.documentname
}
else {
path += "Path/To/Different/Image/Folder";
<img src="#Url.Content(path)" />
#document.documentname
}
}
</a>
<br />
}
Like I said, the code works, but I'm not too happy with how it's written. Does anyone have any suggestions?
When working with MVC, it's best to keep your Views dumb (no logic, simply rendering).
You can accomplish this by using a strongly-typed View and performing all of the logic in the Controller. It looks like you may already be doing this since you have a documentList.
In this case, documentList should be a list of View Model objects that already have the appropriate image path already set on them from the controller.
I would suggest moving the path to your document image into your model. That way you can just display the image from the path in the model and you wouldn't have to put any logic in your view.
I want to display a list of dynamically generated images. I am trying to use an IconItemRenderer, however, I cannot figure out how to display the image (a spark.components.Image) in the IconItemRenderer.
I have tried the following:
iir.iconContentLoader = image.contentLoader;
But this did not work. The image is correct, when I use addElement(image) instead, it works.
So, how can I add a dynamic image to an IconItemRenderer?
You could try using the iconFunction property in the iconItemRenderer class as follows:
iir.iconFunction = getImage;
...
private function getImage(item:Object):* {
return image.contentLoader;
}
Here is the idea:
When the user wants to see /controller/action, then I want the page to have a "robots" meta tag with its value set to "all".
When the user wants to see /controller/action?sort=hot&page=2 (i.e. it has a query string), then I want the page to have a "robots" meta tag with its value set to "noindex".
Of course this is just an example and it could be another tag for the existence of this question.
At what stage in the MVC architecture could I place a hook so that the view generates the tag I want in the master page?
I do something similar for generating page titles and it works well. Put your tag in your masterpage as normal:
<%= Html.Encode(ViewData["Title"]) %>
Then subclass ActionFilterAttribute and override OnActionExecuting. From there you get access to the controller context and can set your viewdata to whatever you want.
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.Controller.ViewData["title"] = "whatever";
}
last step is to put Attribute your controllers that you want to use the filter context. You can inherit from a base controller if you want to add the attribute to all classes. There are also overloads if you want to pass parameters. In my app. I actually pass the page title.
Hope that helps.