Forums (Obsolete)

Member

davidgoss - 7/7/2010 6:19:52 PM

html5 input types

I'm hoping to roll out some of the new html5 input types like "email" and "tel". More immediately, I want to rework the standard cmssearchbox webpart so it is using an input type of "search".

I've tried replacing the default:

<asp:TextBox ID="txtWord" runat="server" />

with this:

<input type="search" ID="txtWord" runat="server" />

but I get an error message:

[Error loading the WebPart 'cmssearchbox']
'search' is not a valid type for an input tag.

Of course, it now IS a valid input type although .NET doesn't know that yet.

Is there another way? I'm not sure whether you can define your own control type, although even if you can it might be beyond my ability as I am not an experienced programmer. Perhaps in the web part's code file we can disable whatever check is causing this error message? Or maybe we can override the input type just before it is output?

As a last resort I could change the attribute with JavaScript once the page loads, but obviously that's not such a desirable solution.


Member	davidgoss - 7/8/2010 5:23:52 AM RE:html5 input types I have also tried replacing the attribute at the end of the SetupControl() function like this: this.txtWord.Attributes.Remove("type"); this.txtWord.Attributes.Add("type", "search"); But it just seems to ignore that and render as type="text" anyway. Thanks

Kentico Developer

kentico_ondrejv - 7/8/2010 8:25:52 AM

RE:html5 input types

Hello,

I believe that using HTML 5 with ASP.NET will require creating custom webpart or customize current one, where you will render necessary HTML tags directly on the page - you won't use ASP.NET controls in this scenario. Of course, you will need to replicate/adjust the code-behind as well. Particular solution is up to you.

Best regards
Ondrej Vasil

Member

davidgoss - 7/18/2010 9:21:44 AM

RE:html5 input types

OK, I think I get what you mean. So instead of using an ASP control in the web part, I just do this:

<input type="search" id="txtSearch" placeholder="search whole site" />

So now all I need to do is modify the codefile to get the value from this input on postback but it is not a server control so what would the code be for getting the value (assume I use the id above)?

Thanks

Member

davidgoss - 7/19/2010 7:03:47 PM

RE:html5 input types

OK, I solved my own problem. What you do is use a plain HTML input element:

<input type="search" name="searchfield" placeholder="search whole site" />

And then use this in your codefile to pick up the value from the postback:

value = Request.Form["searchfield"];

Apparently it's a pattern from classic ASP that has remained in .NET, but whatever - it works. Note that it is targeting the field via the name attribute - using the id attribute will not work.

There are obviously a few drawbacks here. You can't set attributes for the element on page load because it's not a server control, so you'll have to hard code them into the .ascx file instead of from web part properties or a resource file. Also you'll have to do the same for the field's label, because if you tried to use a server control for that it wouldn't know what to label.

Longer term, it would be better to have a server control for each new input type, which would give you the best of both worlds (including the viewstate, which my method would bypass). In theory it can't be difficult because it can be based entirely on the asp:TextBox control but with the type attribute changed. Unfortunately I am not much of a programmer so I wouldn't even know where to start. Can anyone help with that?


Kentico Developer	kentico_ondrejv - 7/22/2010 5:17:09 AM RE:html5 input types Hello, That's great you've figured it out. Anyway, I'm sending request to our Product manager to include support for HTML5 within next versions (we'll see how it will evolve as a standard). Well, if fact, we’ll need to follow the ASP.NET steps, so it also depends on the ASP.NET framework itself. Best regards Ondrej Vasil

Member

ja928-yahoo - 7/29/2010 6:51:57 AM

RE:html5 input types

Hi David, as you said, there are several drawbacks to your method.

I thought it would be easier to overload the "type" attribute than it is. I found you need to go another step or two up the hierarchy and inherit from WebControl or Control. It was actually quite an involved project, so I packaged it up to save others time. Check it out at www.html5asp.com. I included the new link types, audio, video, and canvas, too. You can set properties in design-time and postback with these.

Best of luck with your project

Member

ja928-yahoo - 9/22/2010 8:17:01 PM

RE:html5 input types

I've decided to open source my project. The full source of my HTML5ASP controls are now on SSource code for controls. This one is the Just the binary. This includes canvas, inputs for tel, url, range, color, etc, email links, map links, and phone links. I'd love to hear back from anyone who uses them. I'm new to open source, so I'm just building up the site. Let me know if you want to suggest (or build) any features! For the moment, the documentation is still on www.html5asp.com, just ignore the part about the license file.


Member	davidgoss - 9/23/2010 8:13:27 AM RE:html5 input types Great to hear you've open sourced the project! One thing I noticed though is that it is written in VB. Kentico is built entirely on C#. Will the two work together? Maybe someone from Kentico can answer this?


Member	ja928-yahoo - 9/23/2010 8:56:29 AM RE:html5 input types The easiest bet is just downloading the compiled DLL. You should be able to register all the controls in your Visual studio toolbox and use in C#. Here are the instructions I haven't tried it out. Please let me know if you can.