Changing HTML controls to be Compatible with ASP.NET code

blinkor12 101 Reputation points
2020-12-03T01:58:35.753+00:00

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.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,500 questions
VB
VB
An object-oriented programming language developed by Microsoft that is implemented on the .NET Framework. Previously known as Visual Basic .NET.
2,732 questions
0 comments No comments
{count} votes

Accepted answer
  1. Albert Kallal 5,251 Reputation points
    2020-12-08T07:04:08.087+00:00

    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:

    45977-html.png

    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:

    46117-hclick.png

    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:

    46066-hclick2.png

    And Bob's your uncle!

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

    2 people found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Yijing Sun-MSFT 7,086 Reputation points
    2020-12-04T06:06:43.623+00:00

    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

    2 people found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.