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="[&quot;../images/1.jpg&quot;, &quot;../images/2.jpg&quot;,&quot;../images/3.jpg&quot;, &quot;../images/4.jpg&quot;]" 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="[\&quot;../images/1.jpg\&quot;, \&quot;../images/2.jpg\&quot;, \&quot;../images/3.jpg\&quot;, \&quot;../images/4.jpg\&quot;]" 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, &quot;../images/2.jpg&quot;, ../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 :)

Answer 1

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

Answer 2

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 :)