Answered by:
Having trouble setting Array in .cshtml (data-zs-src)

Question
-
User-1155264524 posted
Hello,
I just recently started using ASP.NET so please be patient with me.
I am trying to implement a template from w3layouts.com into my ASP.NET application. I have almost successfully done it except for a div, which includes a 'data-zs-src'. The code from the template is (I guess this is my goal for the end result):<div id="demo-1" data-zs-src='["../images/1.jpg", "../images/2.jpg","../images/3.jpg", "../images/4.jpg"]' data-zs-overlay="dots">
However, when I'm trying to do the same in my .cshtml, this is the result in the browser:
<div id="demo-1" data-zs-src="["../images/1.jpg", "../images/2.jpg","../images/3.jpg", "../images/4.jpg"]" data-zs-overlay="dots">
I tried escaping the the double quotes with a backslash, so it would look like this in my .cshtml:
<div id="demo-1" data-zs-src='[\"../images/1.jpg\", \"../images/2.jpg\", \"../images/3.jpg\", \"../images/4.jpg\"]' data-zs-overlay="dots">
The only thing that changes in my browser are the extra backslashes:
<div id="demo-1" data-zs-src="[\"../images/1.jpg\", \"../images/2.jpg\", \"../images/3.jpg\", \"../images/4.jpg\"]" data-zs-overlay="dots">
I also tried different escaping methods like:@{ string slideImage1 = "../images/1.jpg"; string slideImage2 = "\"../images/2.jpg\""; string slideImage3 = @"../images/3.jpg"; string slideImage4 = "../images/4.jpg"; } <div id="demo-1" data-zs-src='[@slideImage1, @slideImage2, @slideImage3, @Html.Raw(slideImage4)]' data-zs-overlay="dots">
However, all this gives me just more weird stuff in my browser, see:
<div id="demo-1" data-zs-src="[../images/1.jpg, "../images/2.jpg", ../images/3.jpg, ../images/4.jpg]" data-zs-overlay="dots">
I have also found this thread, which is very similar to my problem: https://forums.asp.net/t/2102299.aspx?add+attribute+to+div
However, the <div> in my .cshtml-File does not even have a "runat" attribute, so I guess this solution also won't work for me.
Any help would be appreciated :)Wednesday, April 7, 2021 5:21 AM
Answers
-
User-1155264524 posted
Thank you for your answer Sean,
I have made some progress with my problem. After I published my project and ran it with the help of the IIS-Manager, the 'data-zs-src' seems to work just fine (I copied the exact HTML from the template). Now, when running it from Visual Studio it works for some reason. I know, it makes no sense. I guess publishing my project changed some property in VS or something. I cannot replicate my issue either after trying to fix it for over 6 hours yesterday. Publishing my project somehow fixed it ¯\_(ツ)_/¯
Could you please share more detailed information to help reproduce the issue?
I was following step by step the tutorial on https://www.youtube.com/watch?v=-k9ds5oKuqE&list=LL
After I extracted everything from the template and implemented it in my project, I faced this issue. But I guess it is irrelevant now.
Apart from that, how do you check this encoded content? In my test, I can see that the rendered html is correct but escape chars appear when I checked in edit mode.
I was checking the source code in my browser. The string after 'data-zs-src' was wrong. Now after publishing my project in VS, the string is correct for some reason.
Thanks for your help :)- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, April 8, 2021 6:34 PM
All replies
-
User-1330468790 posted
Hi Seraph_Miku,
I have also found this thread, which is very similar to my problem: https://forums.asp.net/t/2102299.aspx?add+attribute+to+div
However, the <div> in my .cshtml-File does not even have a "runat" attribute, so I guess this solution also won't work for me.Yes, it will not work for your issue as it is used for web forms application. => .aspx file.
I am trying to implement a template from w3layouts.com into my ASP.NET application. I have almost successfully done it except for a div, which includes a 'data-zs-src'. The code from the template is (I guess this is my goal for the end result):Sorry that I cannot reproduce this issue from my side. Could you please share more detailed information to help reproduce the issue?
As you mentioned, you were trying to implement a template from w3layouts.com which is a pure html codes. There might be some unexpected impact during this implementation.
Apart from that, how do you check this encoded content? In my test, I can see that the rendered html is correct but escape chars appear when I checked in edit mode.
@{ string slideImage1 = "\"https://unsplash.it/1600/1607?image=170\""; } <div class="container"> <div id="demo-1" style="height:600px" data-zs-src='["https://unsplash.it/1600/1607?image=180",@slideImage1]' data-zs-overlay="person" data-zs-autoplay="true"> </div> </div>
Result: works
Best regards,
Sean
Thursday, April 8, 2021 9:51 AM -
User-1155264524 posted
Thank you for your answer Sean,
I have made some progress with my problem. After I published my project and ran it with the help of the IIS-Manager, the 'data-zs-src' seems to work just fine (I copied the exact HTML from the template). Now, when running it from Visual Studio it works for some reason. I know, it makes no sense. I guess publishing my project changed some property in VS or something. I cannot replicate my issue either after trying to fix it for over 6 hours yesterday. Publishing my project somehow fixed it ¯\_(ツ)_/¯
Could you please share more detailed information to help reproduce the issue?
I was following step by step the tutorial on https://www.youtube.com/watch?v=-k9ds5oKuqE&list=LL
After I extracted everything from the template and implemented it in my project, I faced this issue. But I guess it is irrelevant now.
Apart from that, how do you check this encoded content? In my test, I can see that the rendered html is correct but escape chars appear when I checked in edit mode.
I was checking the source code in my browser. The string after 'data-zs-src' was wrong. Now after publishing my project in VS, the string is correct for some reason.
Thanks for your help :)- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, April 8, 2021 6:34 PM