Changing HTML controls to be Compatible with ASP.NET code

Question

I have imported a page from a HTML template into an VB.NET asp.net web form. However, I've found out that the controls in the web form are different then those that can be dragged in the toolbox. What this means is that there is no VB.NET server-side code for the control.

This picture contains a default HTML control that i've imported into the project: https://prnt.sc/vun1t8 Clicking it gets the markup: https://prnt.sc/vun2ye

However, If I drag an asp.net control into the web form from the toolbox, I can view the code for it, not just the markup. https://prnt.sc/vun3fv, Then I can open it and view the server code for it. https://prnt.sc/vun3q8.

How can I change all elements on the HTML template I imported to an ASP.NET control which I can add scripting? It would be best not to delete and replace each control individually, as this would take alot of time for all the controls on the web form.

Answer 1

Ok, how this works is VERY cool.

Just keep in mind that you have asp.net controls that you can drag + drop onto your form.

And then from the toolbox, you have HTML controls.

So, lets drop in a asp.net button.
Now we could drop in a HTML button from the tool box also. But lets start from ground ZERO!

Lets add the markup for a "button". Note that what I show below WILL work for any HTML button you drop from toolbox or paste in as html.

And then create a HTML button from SCRATCH!

So, after above, we have this:

But, we all love that ability of asp.net buttons. You just double-click on the button, and like magic you are transported from Kansas to the code editor just like Alice from wonderland clicking her shoes!

Ok, so the IDE and editor WILL and CAN wire up event code for you.

So, for our button code, we do this:

Just start adding the tags to the button - give it a ID and runat="server" and THEN the magic act!

Type in onserverclick=

WHEN you hit = button, look VERY close! - you get this in intel-sense:

Note how it gives a option to create a server side click event!!! Click on it, and your markup will show this:

onserverclick="MyCoolHTMLButton_ServerClick"

At that point, you wired up a click event JUST like a asp.net button.
(note that you can't double click on the button to jump to the code behind - but, no big deal).

It don't look like much occurred, but flip over to code behind, and you have this magic gem stone:

Protected Sub MyCoolHTMLButton_ServerClick(sender As Object, e As EventArgs)  

End Sub  

Now you can write your code for that event. So, just remember, give the button a "id", runat="server", and then do the above intel-sense trick.
And there is no "text=" for the button - just type in the text between the open/close tags

So, you get this:

And Bob's your uncle!

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer 2

Hi @blinkor12 ,

Accroding to your description,I'm guessing that you want 'Changing HTML elements to Asp.Net controls'.

If my guess is right.They are difference with HTML elements and Asp.Net controls. You must change them one by one manually.

There are two conditions to change HTML elements to Asp.Net controls:

1. If the HTML elements are these elements,you could add runat=server: <Img>,<Link>,<Button>,<Form>,<Table>,<Label>,<Textarea>
2. If you need other controls,you could custome controls: <DropDownList>,<ListBox>,<CheckBox>,<GridView>,<textbox>

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Yijing Sun