Inline styles and strings in MVC (Views)
I have a ViewModel named HomepageVM containing a list of strings (which hold a location to a specific file - e.g "imagesimg.png").
public class HomepageVM
{
public List<string> Images { get; set; }
}
I am trying to insert the value of those as a background-image property using inline-styles.
@foreach (var item in Model.Images)
{
<div style="background-image: url(@(item));"></div>
}
For some reason, the result I get inside the browser is "imagesimg.png" instead of "imagesimg.png" even though the value while debugging clearly contains these slashes.
c# asp.net-mvc razor
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
add a comment |
I have a ViewModel named HomepageVM containing a list of strings (which hold a location to a specific file - e.g "imagesimg.png").
public class HomepageVM
{
public List<string> Images { get; set; }
}
I am trying to insert the value of those as a background-image property using inline-styles.
@foreach (var item in Model.Images)
{
<div style="background-image: url(@(item));"></div>
}
For some reason, the result I get inside the browser is "imagesimg.png" instead of "imagesimg.png" even though the value while debugging clearly contains these slashes.
c# asp.net-mvc razor
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
What do you get if you put the value between the divs for testing?>@item</div>?
– Erik Philips
Dec 28 '18 at 20:02
1
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
1
Set value like this"/images/img.png"and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.
– Shyju
Dec 28 '18 at 20:16
add a comment |
I have a ViewModel named HomepageVM containing a list of strings (which hold a location to a specific file - e.g "imagesimg.png").
public class HomepageVM
{
public List<string> Images { get; set; }
}
I am trying to insert the value of those as a background-image property using inline-styles.
@foreach (var item in Model.Images)
{
<div style="background-image: url(@(item));"></div>
}
For some reason, the result I get inside the browser is "imagesimg.png" instead of "imagesimg.png" even though the value while debugging clearly contains these slashes.
c# asp.net-mvc razor
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
I have a ViewModel named HomepageVM containing a list of strings (which hold a location to a specific file - e.g "imagesimg.png").
public class HomepageVM
{
public List<string> Images { get; set; }
}
I am trying to insert the value of those as a background-image property using inline-styles.
@foreach (var item in Model.Images)
{
<div style="background-image: url(@(item));"></div>
}
For some reason, the result I get inside the browser is "imagesimg.png" instead of "imagesimg.png" even though the value while debugging clearly contains these slashes.
c# asp.net-mvc razor
c# asp.net-mvc razor
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
edited Dec 28 '18 at 20:02
Erik Philips
40.3k690123
40.3k690123
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
asked Dec 28 '18 at 19:57
SuperstarSuperstar
16818
16818
What do you get if you put the value between the divs for testing?>@item</div>?
– Erik Philips
Dec 28 '18 at 20:02
1
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
1
Set value like this"/images/img.png"and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.
– Shyju
Dec 28 '18 at 20:16
add a comment |
What do you get if you put the value between the divs for testing?>@item</div>?
– Erik Philips
Dec 28 '18 at 20:02
1
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
1
Set value like this"/images/img.png"and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.
– Shyju
Dec 28 '18 at 20:16
What do you get if you put the value between the divs for testing?
>@item</div> ?– Erik Philips
Dec 28 '18 at 20:02
What do you get if you put the value between the divs for testing?
>@item</div> ?– Erik Philips
Dec 28 '18 at 20:02
1
1
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
1
1
Set value like this
"/images/img.png" and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.– Shyju
Dec 28 '18 at 20:16
Set value like this
"/images/img.png" and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.– Shyju
Dec 28 '18 at 20:16
add a comment |
1 Answer
1
active
oldest
votes
As it turns out, the solution was quite simple. Using backslashes was creating the issue where MVC seems to remove them from the output when injected into the inline styles. Replacing them with slashes as mentioned by both mason and Shyju has fixed the issue.
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53963711%2finline-styles-and-strings-in-mvc-views%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As it turns out, the solution was quite simple. Using backslashes was creating the issue where MVC seems to remove them from the output when injected into the inline styles. Replacing them with slashes as mentioned by both mason and Shyju has fixed the issue.
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
add a comment |
As it turns out, the solution was quite simple. Using backslashes was creating the issue where MVC seems to remove them from the output when injected into the inline styles. Replacing them with slashes as mentioned by both mason and Shyju has fixed the issue.
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
add a comment |
As it turns out, the solution was quite simple. Using backslashes was creating the issue where MVC seems to remove them from the output when injected into the inline styles. Replacing them with slashes as mentioned by both mason and Shyju has fixed the issue.
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
As it turns out, the solution was quite simple. Using backslashes was creating the issue where MVC seems to remove them from the output when injected into the inline styles. Replacing them with slashes as mentioned by both mason and Shyju has fixed the issue.
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
answered Dec 28 '18 at 20:25
SuperstarSuperstar
16818
16818
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53963711%2finline-styles-and-strings-in-mvc-views%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you get if you put the value between the divs for testing?
>@item</div>?– Erik Philips
Dec 28 '18 at 20:02
1
Why are you using backslashes in the first place? The examples show forward slashes.
– mason
Dec 28 '18 at 20:04
When I print the value normally, I get the proper value (imagesimg.png).
– Superstar
Dec 28 '18 at 20:06
1
Set value like this
"/images/img.png"and see what happens. Also if you open up your network tab and see which request(URL) is ending up with a 404 response, that will help you fix the issue.– Shyju
Dec 28 '18 at 20:16