Add Dynamic Variable in URL Content in JQuery

Question

I am trying to add attach my variable on my script section, since my filename is in GUID format. The filename is in hidden field:

 string strDirectory = Server.MapPath(Url.Content("~/Content/AnnouncementImages/"));
 string[] strFiles = Directory.GetFiles(strDirectory);
 string strFileName = string.Empty;
      foreach (var strFile in strFiles)
       {
          strFileName = Path.GetFileName(strFile);
       }
 <img id="myImg" src="@Url.Content("~/Content/AnnouncementImages/" + strFileName)" width="300" height="200" />    
 <input type="hidden" id="hiddenStringFileName" value="@strFileName"/>

In script section, I am trying to get this hidden field value:

function fncAnnouncementLoad() 
{
   var filename = document.getElementById('hiddenStringFileName');

   //This is not working so far since it says cannot resolve symbol filename on below code:
   modalImg.src = '@Url.Content("~/Content/AnnouncementImages/" + filename);
}

@Url.Content() is razor code and is evaluated on the server before its sent to the view. filename is a javascript variable which does not even exist at that point. — user3559349
– user3559349, Commented Nov 28, 2016 at 2:30
@StephenMuecke Thanks for that, that make sense. Do you have idea on how can I pass My whole URL Content plus the file name on my javascript section? — Willy David Jr
– Willy David Jr, Commented Nov 28, 2016 at 2:31
@WillyDavidJr It will work. You are probably debugging this on the server side and therefore you seem to think that. Debug this on the client side and it will work. However, filename will just contain the dom element and not what you think. — CodingYoshi
– CodingYoshi, Commented Nov 28, 2016 at 2:33
Not really clear what you trying to do and why you need a hidden input (or what modalImg is), but @Url.Content("~/Content/AnnouncementImages") + '/' + filename — user3559349
– user3559349, Commented Nov 28, 2016 at 2:35
Note - would also need to be var filename = document.getElementById('hiddenStringFileName').value; — user3559349
– user3559349, Commented Nov 28, 2016 at 2:54

CodingYoshi · Accepted Answer · 2016-11-28 02:52:01Z

1

I am not sure what you are trying to do but if you want razor code plus javascript, you can put it in your view. Obviously this will no longer be unobtrusive javascript. But to do what you want, this will work. I added a button when you click it, it calls the function to show the concatenated URL.

@{
    ViewBag.Title = "Test";
    var strFileName = Guid.NewGuid();
}
<input type="hidden" id="hiddenStringFileName" value="@strFileName" />
<button onclick="fncAnnouncementLoad()">Show</button>
<script>
function fncAnnouncementLoad()
{
   var filename = document.getElementById('hiddenStringFileName').value;

   //This is not working so far since it says cannot resolve symbol filename on below code:
   var src = '@Url.Content("~/Content/AnnouncementImages/")' + filename;
    alert(src);
}
</script>

answered Nov 28, 2016 at 2:52

CodingYoshi

27.3k7 gold badges68 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Willy David Jr Over a year ago

It works perfectly fine now. Thank you for the help!

Collectives™ on Stack Overflow

Add Dynamic Variable in URL Content in JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related