How to load images to page from image folder dynamically - asp.net

I'm using MVC4 c#. I'm trying to load images that I need to show on a page dynamically by reading the content of the image folder and doing a foreach loop. I'm not sure how to read the content of the folder which is called ImageFiles which is located in the project and not the c:\ of the server. This is what I used and it works on my local computer but when I use ../../filename/filename/ImageFiles as the path it does not work. Can anyone help?
string filePath = #"../../Content/EventFiles/ImageFiles";
DirectoryInfo directory = new DirectoryInfo(filePath);
#foreach (FileInfo file in directory.GetFiles())
{
<\a href="../../Content/EventFiles/ImageFiles/#file.Name">
<\img src="/Content/EventFiles/ImageFiles/#file.Name" />
<\/a>
}

You are not referencing the filePath correctly.
Try this one on your View..
#{DirectoryInfo dir = new DirectoryInfo(Server.MapPath(Url.Content("~/Content/EventFiles/ImageFiles")));}
#foreach (var file in dir.GetFiles())
{
<img src="#Url.Content("~/Content/EventFiles/ImageFiles/" + file.Name)" />
}

Answer is Server.MapPath(). For desktop applications DirectoryInfo() works but for a web application I had to use Server.MapPath().
Thanks

Related

DotNetNuke MVC including cshtml in div

First MVC attempt in DNN.
I have a fairly involved index.cshtml that I'd like to simplify by using jquery's
$('#mydiv').load() method.
Currently, in the index.cshtml, I'm having to do a bunch of divs like this (very simple) example:
<div id="dvBands">
#using (var ac = new ArtistListingController())
{
ac.Gets();
foreach (var a in ac.Recordset)
{
<div>#a.ArtistName</div><br/>
}
}
</div>
I tried putting the above code in its own _ArtistListing.cshtml and using
$('#dvBands').load("tabId/#Dnn.ModuleContext.TabId/moduleId/#Dnn.ModuleContext.ModuleId/controller/Item/action/_ArtistListing")
with this in my item controller:
public ActionResult _ArtistListing()
{
return View("_ArtistListing");
}
However, not only does it now display the data, it displays the entire page in the div, including the DNN menu and whatnot.
So, how do I separate out my different database calls and include them in the specified div?
In my index.cshtml ---
#{ Html.RenderPartial("_ArtistListing"); }
It looks for a .cshtml file first in the current path and if it can't find it there, in the Shared folders path.
That's it.

DropzoneJs in Asp.net core application not uploading files

I am trying to use DropzoneJS to upload multiple photos to a webapplication.
The Upload view contains following
<div class="jumbotron">
<form action="/Upload"
class="dropzone"
id="dropzoneJsForm"
style="background-color:#00BFFF"></form>
</div>
And the Upload controller contains this
[HttpPost]
public async Task<IActionResult> Upload(IFormFile file, IHostingEnvironment _environment)
{
var uploads = Path.Combine(_environment.WebRootPath, "uploads");
if (file.Length > 0)
{
using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return RedirectToAction("Index");
}
When I run the application in debug mode and add files I see the progressbar and the checkmark indicating success. But no files has been uploaded in the upload folder in wwwroot.
I have app.UseStaticFiles() in the Configure method.
Target framework: .Net Core 2.0
I am using Visual Studio 2017 Professional latest version
<webconfig>
<system.web>
<httpRuntime maxRequestLength="15360" requestLengthDiskThreshold="15360"/>
</system.web>
'consider using fileupload='multiple' attribute on control
I found the mistake. A stupid beginner mistake. When I changed the name of the controller method to Index it worked.

Iframe shows ActionMethod name while loading PDF file in ASP MVC

i am using iframe tag in order to call ActionMethod that returns FileResult to display PDF file. The issue is after it loads PDF document instead of showing pdf file name, it shows ActionMethod name on the top of the PDF file name in Chrome.
Razor Code:
<iframe src="#Url.Action("GetAgreementToReview", "Employee")" style="zoom: 0.60; -ms-zoom: 1; width: 100%;" width="99.6%" height="420" frameborder="0" id="agreementPdf"></iframe>
CS Code:
public ActionResult GetAgreementToReview()
{
Response.AddHeader("Content-Disposition", "inline; filename=Master-Agreement.pdf");
return File("~/Content/Master-Agreement.pdf", "application/pdf");
}
Image: As you can see in the screenshot, it shows 'GetAgreementToReview' i.e. ActionMethod name instead of 'Master-Agreement.pdf'.
Does anyone know how to fix this issue?
Thanks.
Sanjeev
I had a similar problem and found a solution after exploring almost everything the web has to offer.
You must use a custom route for your action and you must send the filename from UI into the URL itself. (Other parameters won't be affected)
//add a route property
[Route("ControllerName/GetAgreementToReview/{fileName?}")]
public ActionResult GetAgreementToReview(string fileName, int exampleParameter)
{
byte[] fileData = null; //whatever data you have or a file loaded from disk
int a = exampleParameter; // should not be affected
string resultFileName = string.format("{0}.pdf", fileName); // you can modify this to your desire
Response.AppendHeader("Content-Disposition", "inline; filename=" + resultFileName);
return File(fileData, "application/pdf"); //or use another mime type
}
And on client-side, you can use whatever system to reach the URL.
It's a bit hacky, but it works.
If you have an Iframe on HTML to display the PDF (the issue I had), it could look like this:
<iframe src='/ControllerName/GetAgreementToReview/my file?exampleParameter=5' />
And this way you have a dynamic way of manipulate the filename shown by the IFRAME that only uses the last part of an URL for its name shown on the web page (quite annoying). The downloaded filename will have its name given from server-side Content-disposition.
Hope it helps !
please try this code :
return File("~/Content/Master-Agreement.pdf", "application/pdf", "filename.pdf");
Other Helper Link : Stream file using ASP.NET MVC FileContentResult in a browser with a name?

tree navigation to show folder structure

Project: ASP.NET 3.5 with C#
I have this much :-
A table which used to store the "Folders". Each folder may contain sub folders and files. So if I click a folder, I have to list the content of the folder.
So I want to tell the user where he is now some thing like the following
Parent Folder --> Child Folder1 --> Child Folder1_1
Which ASP.NET control should I use here? How can I accomplish this task?
I think SiteMapPath is the best option. What you think ?
I hope the folder structure might be a dynamic one, so using SiteMap control is some what difficult. I will recommend you to manually do this my maintaining a ViewState/SessionState stored variable.
Update the Variable/Property when you are changing the Folder.
public System.Collections.Generic.List<string> FolderPath
{
get
{
if (ViewState["__FolderPath"] == null)
ViewState["__FolderPath"] = new System.Collections.Generic.List<string>();
(System.Collections.Generic.List<string>)ViewState["__FolderPath"];
}
set
{
ViewState["__FolderPath"] = value;
}
}
public string CurrentPath
{
get
{
//retrun the current path from the List FolderPath. ;
}
}
You can achive this with the TreeView control
You could also look at the oBout TreeView which is an excellent upgrade from the Microsoft Treeview control:
http://www.obout.com/t2/index.aspx

Images won't dynamically refresh

I am writing a Flex application to receive xml from an httpservice. That works because I can populate a datagrid with the information. The xml sends image pathnames. A combobox sends a new HttpService call onChange. This repopulates the datagrid and puts new images in the folder that flex is accessing.
I want to dynamically change the image without changing the pathname of the image.
<mx:Canvas id="borderCanvas"><mx:Canvas id="dropCanvas">
<mx:Tile id="adTile"><mx:Image></mx:Image>
</mx:Tile></mx:Canvas></mx:Canvas>
This is my component.
I assign my Image sources using this code:
var i:Number = 0;
while ( i <= dg_conads.rowCount){
var img:Image = new Image();
img.source = null;
img.source = imageSource+i+".jpg";
adTile.addChild(img);
i++; }
My biggest problem is that the images are not refreshing. I get the same image even though I've prevented caching from the HTML wrapper and the ASP.Net website. The image automatically loads in the folder and refreshes in the folder but I can't get the image to refresh in the application.
I've tried removeAllChildren(); delete(adTile.getChildAt(0)); and neither worked.
I would try using:
img.load(imageSource + i + ".jpg");
If that doesn't work, try appending a random number on the end ie:
img.source = imageSource + i + ".jpg?" + Math.random();
Have you tried to add id="img" into the mx:Image tag directly and remove adTile.addChild(img);
in the script?

Resources