I'm trying to show some picture for user in a strongly typed View..
In Model members there is one that represents contents of image (ex. jpeg)
How should I pass this content to img tag to render this image?
model looks like:
publiŃ class Image {
public virtual FileContentResult currentImage { get; set; }
public Image()
{
currentImage = createSomeImage();
// createSomeImage returns new FileContentResult(bmpBytes, "image/png");
}
}
View looks like
#model app.Models.Image
<img src='#Model.currentImage' alt="" class="img" />
and I render it from parent View as:
#Html.Partial("_ImageShow", new app.Models.Image())
I've searched a lot, but found only implementations of returning image as a result of action of some controller..Is there any way to show image having fileContentResult in a View?
Thanks in advance.
Related
i'm trying to display an image in my view.
i've written an Image helper:
public static class Helpers
{
public static FileContentResult Image(this HtmlHelper htmlHelper,
byte[] imageData, string mimeType)
{
return new FileContentResult(imageData, mimeType);
}
}
myImage - is a byte array.
<img src="#Html.Image(myImage, "image/jpeg")" />
but my image is not displayed...
when i look at the source code all i see is:
<img src="System.Web.Mvc.FileContentResult">
anyone? :)
The way you are doing it you are returning the FileContentResult in between the quotes of the src="".
I see what you are trying to do, but in order for this to work, the <img src=> needs to request the URL of the image not simply put the byte[] in the src. So you'll need to set up an action method that takes in some parameter and returns the FileContentResult.
I'm trying to render different partial views from the _Layout file depending on what function I'm in, controller-wise.
The partial view is in the right column of the website which is located in the _Layout like so:
<aside id="right">
#Html.Partial("RightPartial")
</aside>
What I want to do is render a different partial view depending on where I am.
If I'm in the Index view I might want to view news and in the About view I might want to view phone numbers or something.
Appreciate any help :)
#{
string currentAction = ViewContext.RouteData.GetRequiredString("action");
string currentController = ViewContext.RouteData.GetRequiredString("controller");
}
Now based on the values of those variables decide which partial to render. To avoid polluting the Layout I would write a custom HTML helper:
<aside id="right">
#Html.RightPartial()
</aside>
which might look like this:
public static class HtmlExtensions
{
public static IHtmlString RightPartial(this HtmlHelper html)
{
var routeData = html.ViewContext.RouteData;
string currentAction = routeData.GetRequiredString("action");
if (currentAction == "Index")
{
return html.Partial("IndexPartialView");
}
else if (currentAction == "About")
{
return html.Partial("AboutPartialView");
}
return html.Partial("SomeDefaultPartialView");
}
}
I guess it's something very straight forward but I can't find out how to do it. In my controller I have:
public ViewResult ShowForm()
{
ViewBag.Title = Resources.ApplicationTitle;
ViewBag.LabelStatus = Resources.Status;
//Logo
ViewBag.Logo =#"C:\Images\Logo.png";
return View("ShowForm");
}
And in my view I try this:
<div id="drawForm">
<img src="#ViewBag.Logo" alt="Logo" />
</div>
However when I run this I just get the "Logo" text.
Use Server.MapPath to get the correct path of the image. Suppose your images folder is inside the Content folder that is normally included in an MVC project. You can do something like this:
public ViewResult ShowForm()
{
//Logo
ViewBag.Logo = Server.MapPath("~") + #"Content\Images\Logo.png";
return View("ShowForm");
}
And you don't have to change the code in your view.
Try this:
ViewBag.Logo = Url.Content("~/Content/Images/Logo.png");
You need a ImageController to render that.
See this:
ASP.NET MVC3: Image loading through controller
and this:
Can an ASP.NET MVC controller return an Image?
once you have a controller you can render as follows:
public class ImageController{
public ActionResult ShowImage(string path)
{
return File(path);
}
}
in your views:
<img src="#Url.Action("Render","Image", new {id =1 // or path })" />
public ActionResult ShowForm()
{
ViewBag.Title = Resources.ApplicationTitle;
ViewBag.LabelStatus = Resources.Status;
//Logo
byte[] imgbytes = File.ReadAllBytes(#"C:\Images\Logo.png");
return File(imgbytes , "image/png");
}
<div id="drawForm">
<img src="controllerName/ShowForm" alt="Logo" />
</div>
I have same action in a controller that fetch from db for example a Employee with a name, age, image (byte[]).
So I store the info in ViewBag. Then in the View the specific code for the image is:
<img src="#ViewBag.Image" alt="Logo" />
But when I see the content of the response I have:
<img src="System.something.FileContentResult" alt="Logo" />
I have seen a lot of examples that gets the FileContentResult from a specific Action in a Controller for example:
(The code is an example only)
public ActionResult GetEmployeeImage (int id){
byte[] byteArray = GetImageFromDB(id);
FileContentData file = new File (byteArray,"image/jpg");
return file;
}
And then render the image with:
<img src="#Url.Action("GetEmployeeImage", "Home", new { id = ViewBag.Id })" alt="Em" />
But I dont want that because I already have the image.
How can I render it to the View throw the ViewBag?
Thanks!
PD: Rendering image in a View is the same but was not concluded
One possibility is to use the data URI scheme. Bear in mind though that this will work only on browsers that support it. The idea is that you would embed the image data as base64 string into the src attribute of the img tag:
<img src="data:image/jpg;base64,#(Html.Raw(Convert.ToBase64String((byte[])ViewBag.Image)))" alt="" />
If on the other hand you want a solution that works in all browsers you will have to use a controller action to serve the image. So in the initial request fetch only the id, name and age properties of the employee and not the image. Then write a controller action that will take the employee id as parameter, query the database, fetch the corresponding image and return it as file result. Then inside the view point the src attribute of the img tag to this controller action.
Based on the answer of #darin , if any one wants to make it via calling a controller's action:
public FileContentResult GetFileByID(string ID)
{
try
{
// Get the object from the db
Ent ent = Biz.GetPatientsByID(ID);
// Convert the path to byte array (imagepath is something like: \\mysharedfolder\myimage.jpg
byte[] doc = EFile.ConvertToByteArray(ent.ImagePath);
string mimeType = File(doc, MimeMapping.GetMimeMapping(Path.GetFileName( ent.ImagePath))).ContentType;
Response.AppendHeader("Content-Disposition", "inline; filename=" + Path.GetFileName(ent.ImagePath));
return File(doc, mimeType);
}
catch (Exception ex)
{
throw ex;
}
}
In the front end:
<img id="ItemPreview" src="#Url.Action("GetFileByID","Patient", new {ID= Model.ID })" alt="" width="350" height="350" />
Where Patient is the controller name.
In my Facebook canvas application, I want to load an image from my ASP.NET MVC Controller.
So I do somethinhg like this, in my controller (simplified):
public ActionResult GetImage(int id)
{
// ....
return File(#"c:\temp\1.jpg", "image/jpeg");
}
And it's called from my aspx page like so:
<img src="/Home/GetImage?id=20" alt="Test"/>
But the image is not displayed, I get a "red x".
So I fire up Fiddler and see that the request does indeed return the image, but the data is prepadded with Facebook's frame html:
<html><head><script type="text/javascript">
top.location = "http://www.facebook.com/dialog/oauth/?state=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&client_id=xxxxxxxxxxxxxxx&redirect_uri=http://localhost:5000/facebookredirect.axd";
</script></head><body></body></html>?????JFIF??H?H????
?ICC_PROFILE???
????????mntrRGB XYZ ?????$?acsp???????????????????????????????????
Which of course is not vaild jpeg image data.
How can I avoid this pre padded data?
Never mind, I found out myself that the signed_request data was (yet again) missing.
I thought the only way to pass this was thru a HTTP header, but (like magic) I could pass it as a parameter as well causing the request to be validated.
<img src="/Home/GetImage?id=20&signed_request=<%=Request.Params["signed_request"] %>" />
public ActionResult GetImage(int id), string signed_request)
{
var auth = new CanvasAuthorizer();
if (auth.Authorize())
{
// Indeed, I'm now authorized
return File(#"c:\temp\1.jpg", "image/jpeg");
}
/// ...
}
/M