locked
Having trouble setting Array in .cshtml (data-zs-src) RRS feed

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

    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