Partial Views changes the references Url of CSS and JS

Question

I have a simple mvc web application  in which i have a menu like homeservicescontactus when i click the service menu the new service controller invokes and new view opened and this view have service details and also a read more button  when i click the read more button I want to show the more details like description of that service all these things are working properly  The issue is that when i click the Readmore linkbutton on service view It loses the Path of my JS and Css  so my _Layout.cshtml having the slider and it did not show the images of that slider just of the Details view of Read more I inspact the issue and check that it loses the path when i inspect the element this is correct path but when i hover on img it show the path like that http://localhost:60553/Service/Images/img/rsz_malibu-2.png Failed to load resource I mean it is looking my CSS JS and images in Service Folder instead of root folder how to fix that

Mark Tabor · Answer

this solve me src = ../../Images/img/ + fileName

Mark Tabor · Answer

Dear Midhun T P i have tried using ~/ as well as shown below public List GetData() { string[] filePaths = Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath(/Images/img/)); List files = new List (); var model = new System.Collections.Generic.List (); foreach (string filePath in filePaths) { string fileName = Path.GetFileName(filePath); model.Add(new slider { title = fileName.Split('.')[0].ToString() src = ~/Images/img/ + fileName }); } return model; } When i did that then my Image src become http://localhost:4545/SErvice/Details/Images/myimg.png I need to find the image from Root/Images/Img/myimage.png

Midhun T P · Answer

Hi Instead of ../ try using ~/

Mark Tabor · Answer

The below method for getting images public List GetData() { string[] filePaths = Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath(/Images/img/)); List files = new List (); var model = new System.Collections.Generic.List (); foreach (string filePath in filePaths) { string fileName = Path.GetFileName(filePath); model.Add(new slider { title = fileName.Split('.')[0].ToString() src = ../Images/img/ + fileName }); } return model; }

Mark Tabor · Answer

None of the links works for me basically I have a simple webapplication in _Layout.cshtml I have a slider it works fine on home {index} and service {index} view but when i click any of the service to get its details i am getting 404 error because instead of finding the imagesjs and css from the root/jsroot/imagesroot/css it is finding the images from root/Service/Images/JS/one.js and same for css and images it changes the url why it is so below is my linkbutton code @Html.ActionLink(ReadMore Details Service new { id = item.ID }null)

Midhun T P · Answer

Hi Please have a look at below threads- http://stackoverflow.com/questions/9779340/mvc-partial-views-loses-track-of-the-images-folder-when-using-jquery http://scottonwriting.net/sowblog/archive/2010/05/11/resolve-a-url-from-a-partial-view-asp-net-mvc.aspx

Delpin Susai Raj · Answer

http://stackoverflow.com/questions/912755/include-javascript-file-in-partial-views

Delpin Susai Raj · Answer

http://stackoverflow.com/questions/5110028/add-css-or-javascript-files-to-layout-head-from-views-or-partial-views