I wondered if it is possible to show picture in a view without calling an action. The picture is displayed by using the following Razor code:
<img class="photo" src="#Url.Action("GetImage", "Home", new { id = #Model.Id })" />
But retrieving picture from server requires an additional request.
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
Thanks,
Is it possible to "deploy" image in ViewBag and show it in view without calling server?
You could use the Data URI scheme. But be careful as it might not be supported by all browsers.
Example:
<img class="photo" src="data:image/png;base64,iVBORw0KG....." alt="" />
where src attribute of the image contains the Base64 encoded image that could come from ViewBag or a view model.
Related
I have MVC3 view page like below,
#using (Html.BeginForm(null, null, FormMethod.Post, new { #action = "https://www.paymentdummysite.com/abcd" }))
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div class="homePageSubSecContnt">
<p>You will be re directed to your banking site.</p>
#Html.Hidden("version",Model.cvsVersion)
#Html.Hidden("bill_method", Model.cvsBillMethod)
#Html.Hidden("shop", Model.ShopCode)
#Html.Hidden("shopmsg", Model.shopmsg)
#Html.Hidden("password", Model.password)
<input type="submit" id="Next" name="Next" value="Next" class="buttonStyle_2" />
</div>
the above code re-directs me to the banking site. Here i have provided absolute url and not calling any controller.I am using 2 html form in this view page, so that i can get model details from the 1st html form GET method of controller.
Now i have to encode the form data(hidden input) and re direct to external url. My encoding format is Shift-JIS which is japanese encoding format. I am not sure, how to do encoding in view page. Can anyone throw light on this?
In C# code i can do encoding as below,
byte[] postDataBytes = System.Text.Encoding.GetEncoding("Shift-JIS").GetBytes(postData);
how to do the same encoding in view page?
<meta charset="Shift-JIS"> Will this work?
I think i have to use charset="Shift-JIS", but how to use it in mvc forms.
After long time i have found answer myself:
Since my code has japanese text and i want encoding format as Shift_jis , even if i specify charset or encoidng format the code is not working perfectly.
The solution is:
Go to file menu in visual studio,
File->advanced save options->Unicode-codepage 1200(3rd option)->Click
Ok.
This will solve your problem.
I'm new to MVC 3 and still learning. I'm currently building a static 2 page website which has a different image on both pages but are located in the same place. I have been told that I can use the ViewBag to change this image depending on what page I am on, however I have not got a clue where to begin with applying this to my website.
Any help will be greatly appreciated. Thank You for your time.
On your controller's Action method,make ViewBag or ViewData like this
ViewBag.Imagename="nameofimage";
ViewData["img"]="nameofimage";
On your view, you can make img tag like this
<img src="#ViewBag.Imagename">
or if you have created ViewData
<img src="#ViewData["img"]">
For some reason, it did not work for me when I simply tried using
#ViewBag.BackgroundImage = "~/Content/images/image.jpg"
...
<img src="#ViewBag.BackgroundImage" />
But what did work for me was
#ViewBag.BackgroundImage = "image.jpg"
...
<img src = "~/Content/images/#(ViewBag.BackgroundImage)" />
personally i dont like specifying anything view related in controller, i am using naming convention between action method names and images:
<img src="~/Content/images/#(ViewContext.RouteData.Values["action"].ToString().ToLower())_img.jpg">
and picture name for index action method would be "index_img.jpg"
For those who want use full path in viewbag, use this
#ViewBag.BackgroundImage = "Content/images/image.jpg"
...
<img src="~/#ViewBag.BackgroundImage" />
The reason why hallordylo example not working with full path is missing "~/" in src="..." and this sign "~/" should not be inside ViewBag.
I'm using Alex Michael's fantastic javascript filtrr library
to allow me to manipulate images on an HTML page. The question I have is how do I do an ajax/jquery post of an image that has been filtered inline on the page? For instance:
<div>
<img id="myimage" />
</div>
<input type="button" onclick="filterImage();" />
Once the filtering has been done, how do I post the contents of the image with id "myimage" back to a server-side PHP script so the filtered image can be saved? The tutorials I've seen for doing ajax image POSTs have all used file uploaders, which isn't what I'm looking for. I want to post an image from the HTML DOM.
Thanks!
Since the library you are using uses the Canvas element, the solution here should apply:
Uploading 'canvas' image data to the server
How to set image path dynamically for following:
<img src="/Images/Model" + #item.ModelImagePath />
"/Images/Model" this path is fixed, rest of the path comes from [ModelImagePath] column of Model DBTable.
Please guide me how to set the path dynamically in View.
And is there any Html helper tag to display image available in MVC RZOR?
Note: i have similar type of problem as described in
How to use/pass hidden field value in ActionLink
<img src="#Url.Content(String.Format("~/Images/Model/{0}", item.ModelImagePath))"
If you have already saved the entire path into the table, follow it
<img src="#Url.Content(String.Format("{0}",item.ModelImagePath))"/>
or
<img src="#Url.Content(item.ModelImagePath)" style="width:100px;height:100px"/>
I have a strong typed partial view of a class that contains a list of image urls and the index of the current image. Now I need a "next" button that reloads my partial view with the updated index.
The point is that I don't want to save this list or index with javascript.
The partial view will render the image as follows:
<img id="imgMain" src="<%: Url.Content(Model.GetCurrentImageUri().RelativeUri.ToString()) %>" alt="" />
Thank you very much for your help!
The solution is to store the index of my array in a hidden field. Then I fetch the data with a ajax call and replace my partial view with the resulting data. That is all, very easy :)