locked
HREF property getting lowercased RRS feed

  • Question

  • User1738843376 posted

    Hi,

    I have a repeater, where I build a list of links where each should open a Fancybox modal to show the corresponding Youtube video.

    <ItemTemplate>
        <figure class="video">
          <a href='https://www.youtube.com/watch?v=<%# DataBinder.Eval(Container.DataItem, "YoutubeVideoId")%>' data-fancybox="videos" data-fancybox-type="iframe" data-caption='<%#DataBinder.Eval(Container.DataItem, "Title") %>'>
                <img alt="<%#DataBinder.Eval(Container.DataItem, "Title") %>" title="<%#DataBinder.Eval(Container.DataItem, "Title") %>" src='http://img.youtube.com/vi/<%#DataBinder.Eval(Container.DataItem, "YoutubeVideoId") %>/mqdefault.jpg' />
            </a>
        </figure>
    </ItemTemplate>

    This works perfectly if the Youtube video ID does not contain uppercased characters, but once it does, the ID always gets converted to lowercase when being interpreted by the browsers (Chrome, IE, Edge, Firefox, all have the same behaviour).

    This causes the video from not loading, since Youtube requires the ID to be case sensitive, and lowercasing it changes that.

    I believe this not to be a repeater issue, since I use the same value from the data container to build the thumbnail image URL, and there it reads perfectly with the original casing.

    How can I stop the HREF property from forcing this lowercasing?

    Thanks in advance

    Thursday, January 21, 2021 12:11 PM

All replies

  • User475983607 posted

    I created a basic test and cannot reproduce this issue with Web Forms.   Maybe fancy box is causing the issue or maybe the data was serialized at some point.  You'll need to troubleshoot.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HrefTest.aspx.cs" Inherits="WebFormsDb.Databound.HrefTest" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <a href="/Databound/HrefTest?v=<%# Eval("Id") %>"><%# Eval("Id") %></a>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsDb.Databound
    {
        public class HrefTestModel
        {
            public string Id { get; set; }
        }
        public partial class HrefTest : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if(!Page.IsPostBack)
                {
                    Repeater1.DataSource = PopulatetestData();
                    Repeater1.DataBind();
                }
            }
    
            public List<HrefTestModel> PopulatetestData()
            {
                return new List<HrefTestModel>()
                {
                    new HrefTestModel()
                    {
                         Id = "ThisIsATest"
                    },
                    new HrefTestModel()
                    {
                         Id = "onetwothree"
                    }
                };
            }
        }
    }

    Thursday, January 21, 2021 1:09 PM
  • User753101303 posted

    Hi,

    I would start by using "View source..." in the browser to see if the rendered markup is  already in lowercase.. Repeat until to find where it goes from mixed case to lower case.

    This is bascically rhe "guess a number" game. ie you narrow down where it happens by dividing intervals else you have to check each and every step.

    It would seem weird that Fancybox would force href to lowercase. Maybe you are doing that when reading or writing data to the db?

    Thursday, January 21, 2021 1:11 PM
  • User1738843376 posted

    Hi guys,

    This is not a Fancybox issue, since even if i just build an anchor tag (no Fancybox binding) and assign it a mix cased value for the HREF property, it always returns lowercased.

    Also not a serialization issue (at least from my code), since if i bind the exact same value to any other property, or directly to the HTML, it reads correctly with the mixed casing.

    This must be either a framework, or an IIS issue, since it also happens across all 4 major browsers.

    Any idea how to overcome this?

    Thursday, January 21, 2021 1:18 PM
  • User753101303 posted

    0belix

    This must be either a framework, or an IIS issue, since it also happens across all 4 major browsers.


    I never saw or heard about that and I assume all other strings are preserved? I doubt this is an out of the box behavior. What if using the same value for href and as the title. Does it happen for one but not both ????

    0belix

    Any idea how to overcome this?


    Before fixing this you need to find the root cause. Assuming you saw that href is already a lowercase value in the markup, my next check would be to see which value I have in my dtabase and which value is returned by my query.

    If correct when reading from the db and wrong in the markup, I suspect it would it could be a Filter or an IIS module that is processing the markup which is generated by your app and that is sent to tthe browser?? Really weird.

    Edit: I have done a quick test with a repeater and casing is preserved for me:. Which DataSource are you using for your repeater ?

      <figure class="video">
            <a href='https://www.youtube.com/watch?v=MyId1' data-fancybox="videos" data-fancybox-type="iframe" data-caption='MyTitle1'>
                <img alt="MyTitle1" title="MyTitle1" src='http://img.youtube.com/vi/MyId1/mqdefault.jpg' />
            </a>
        </figure>
    
        <figure class="video">
            <a href='https://www.youtube.com/watch?v=MyId2' data-fancybox="videos" data-fancybox-type="iframe" data-caption='MyTitle2'>
                <img alt="MyTitle2" title="MyTitle2" src='http://img.youtube.com/vi/MyId2/mqdefault.jpg' />
            </a>
        </figure>
    

    Thursday, January 21, 2021 2:30 PM
  • User1738843376 posted

    Before fixing this you need to find the root cause. Assuming you saw that href is already a lowercase value in the markup, my next check would be to see which value I have in my dtabase and which value is returned by my query.

    If correct when reading from the db and wrong in the markup, I suspect it would it could be a Filter or an IIS module that is processing the markup which is generated by your app and that is sent to tthe browser?? Really weird.

    Hi Patrice, 

    Thanks for the input.

    The value is stored in an SQLServer database, its correctly stored, is being served to the repeater as a List(Of Video) [where Video is a BO], and on the same markup, i can see the Title with a correct value, and the HRef with a lowercased value... and they both are being bound from the same object property.

    It definitely seems like a filtering issue of some sort, done by the IIS... could it be the rewriting module that is forcing the URLs to be lowercased, even i did not set any rule on this project, nor on an IIS level (have done it for other projects that are hosted on the same IIS, but at a project level only and not globally).

    Since I'm able to bind the value correctly on other properties of the same HTML anchor element, i even though about doing a location.href on the onclick property, calling the same URL. There the value is correctly mix cased, but Fancybox does not recognize it, so it ends up opening the Youtube page replacing the current one, which is not acceptable.

    I can't find any documentation pointing to this regarding the IIS nor the Rewrite module, only articles pointing to the exact opposite: lowercasing all URLs.

    I'm now thinking about a solution where I'll attempt to bind the URL to Fancybox via JQuery, but I'm not sure it will work.

    Any further thoughts regarding the issue itself, or different workarounds?

    Thursday, January 21, 2021 3:14 PM
  • User753101303 posted

    Still unsure about the exact situation and ""There the value is correctly mix cased, but Fancybox does not recognize it" adds to the confusion.

    If you are 100% sure that the correct value is rendered by the repeater but that the value is found in lowercase when looking at the markup (not assuming it is lowercase because it iss shown that way by Fancybox nbut really looking at the actual HTML markuo) I see for now:
    - it could be done at the IIS level using
    https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-outbound-rules-for-url-rewrite-module#create-an-outbound-rewrite-rule
    - or could it be some JavaScript code that runs when the page loads and rthat is converting all href attributes to lowercase ???

    If unsure rather than checking randomly if it happens here or there, I would still take the time to find the exact steos between which this value is converted to lowercase. In my experence, it is often quicker to spend a bit more time in understanding exactly a problem and where it happens rather than trying to check each and every place where it could happen.

    Thursday, January 21, 2021 4:56 PM
  • User1738843376 posted

    Hi Patrice,

    I was able to overcome this by transforming the repeater into a div filled by JQuery via AJAX. It will imply reworking a lot of code, but it definitely solves  the issue.

    Still regarding the strange behaviour, i found one more odd thing about all this: If i choose to view the page source on the browser, the values come with the expected mixed casing, but if instead i choose Inspect Element, the values are lowercased inside the href property (not on the rest).

    This makes me suspect of the browsers javascript interpreters, since apparently the markup arrives correctly at the browser, and only when interpreting it does it get lowercased.

    Friday, January 22, 2021 1:18 PM
  • User753101303 posted

    This is what I would expect when having a script changing all href values to lowercase (so the HTML markup is correct but the element property is all lowercase).

    I gave a quick look at the Fancybox documentation and found a live demo at https://codepen.io/fancyapps/pen/GXVLyr?editors=1010 which does work fine with Chrome. while the video is using upper case letters as well. IMHO you have a sccript that is messing with those href.

    Friday, January 22, 2021 6:07 PM