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

home,services,contactus 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

<img src="../Images/img/Southport Beach Photo-2.png" title="Southport Beach Photo-2" alt="">

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  

Answer 1

this solve me

src = "../../Images/img/" + fileName

Answer 2

DearMidhun T Pi have triedusing ~/ as well as shown below

public List<slider> GetData()

{

string[] filePaths = Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath("/Images/img/"));

List<slider> files = new List<slider>();

var model = new System.Collections.Generic.List<slider>();

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

Answer 3

Hi,<br> Instead of ../ try using ~/

Answer 4

The below method for getting images

public List<slider> GetData()

{

string[] filePaths = Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath("/Images/img/"));

List<slider> files = new List<slider>();

var model = new System.Collections.Generic.List<slider>();

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;

}

Answer 5

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 images,js and css from the root/js,root/images,root/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)

Answer 6

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

Answer 7

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

Answer 8

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