Can some one leads me to a site to download ASP.NET websites templates where I can use all ASP.NET controls in it and deal with SQL server database

buy metronic! 35$
if you are serious building nice looking apps, use ready build template...
take anything from it, bind to sql...

Metronic - Bootstrap 4 HTML, React, Angular 11, VueJS & Laravel Admin Dashboard Theme

https://keenthemes.com/metronic/

Dear HainKurt... Happy to hear from you, It is my first time to use templates with asp.net.For example if I selected the shown template and even the shown page, will I have to replace the HTML of the displayed grid with a datalist? in this case I will have to configure the datalist the way I am doing now (i.e. from scratch).
Is there a template which is ASP.NET (not HTML) containing a sample of all kinds of controls (Listbox, Dropdown list, datagrid, datalist, textbox, label, buttons...etc) that I can just include some of them in my pages?.... Sorry HainKurt, my question my sound basic. Your help is appreciated.... as usual

i know they are not .net tools,
but these are mostly jQuery solutions, that can easily be integrated to any web server code
php or asp.net...
these are lightweight and a complete solution...
I used this template in my previous project, a huge project, and I found almost everything here in this template...
from grids, icons, colors, accordions, menu, popup, slider, calendar...
anything..

easy to integrate... 
I used just .net data repeater and the components/html code from these templates...
no need to use anything else...

Can you show me using vb.net a simple example of populating DataList with a given dataset DS and if I can use the ASP.NET event model to manage the events of dataBoundComplete, selectionChanged etc.

Importantly, do I need to know JQuery? Can I use my available code to manage data (CRUD) in sql server OR I need to redo it using JQuery from scratch.

Finally, I am trying to buy the template , I wonder does it include all the Themes (I am interested Demo3, however, I cannot select it) OR these themes are all just customizations?

demo3
https://preview.keenthemes.com/metronic/demo3/index.html

what datalist are you referring to? .Net?

better to learn jQuery if you want to work on UI
and want to use those jQuery plugins...

not that difficult, and there are plenty of examples and documentation is good for each add-on + jQuery itself...

if you but METRONIC, it comes with everything, pre made sites/demos...
even it has tool to customize and create a new template...

for some of the plugins, you have to buy the license for individual items, for example, it may use some graph/charts that require license seperately... Metronic uses free versions/limited versions...

remember, the product is 1.3 GB!


here is demo8 architecture / folder structure

things changed a bit...
to setup demo on your local server you need to follow these steps...

Quick Start

https://keenthemes.com/metronic/?page=docs

I purchased the template, and ran all installation steps, Now it is time to include it in an ASP.Net app using VS2010. I included the folders under demo3 in an ASP.NET new App and checked the design mode of the index.html... The form is completely distorted, however when we run the page in browser it looks fine... I was cautious to copy all the files from the theme in the proper folders in the solution.
Any advise HainKurt ?

looks like setup is a bit different now...
before, it was just copy paste...
need to check what gulp/npm/yarn thing is...

ok, after all these steps here
https://keenthemes.com/metronic/?page=docs

it builds the demo that you want to use
I used demo1

then, when you open index.html, it shows the demo site, HTML site, having all the required files...

now, you create asp pages based on this...
also, there is a builder here for demo3

https://preview.keenthemes.com/metronic/demo3/builder.html

you create a partial page and integrate to your site...

Dear HainKurt,
This is how index.html shows in design mode... however it runs OK in the browser


and the solution explorer shows you the files that I included from demo3

what should I include in the solution to be able to include only one simple page of the template. I appreciate your help HainKurt 

Regards
Fayez 

Dear HainKurt, 
I am making some progress after I enabled HTML5 in my VS2010 (That looks like a part of the problem) in addition to removing the plugins which I do not need (Like the graphs...etc) . Please allow me a day or two, I feel you are like a dedicated teacher (what a young dedicated teacher you are), and I would like to keep you on my hold till my issue is fully answered... as always, I appreciate your help. by now, Of course you deserve the points, and if you do not want to wait, I will mark the question as resolved
Regards,
Fayez

this is a whole template...
normally, you will have all files here
it includes fonts, images, css, icons, js libraries...

what you should do is,
get a page

split into

header
body
footer

then for each part, you create a user control
then you create a master page and use these 3 parts
then you create any page, use master page
and add your content...

once, you create your master pages, the rest is straight forward...
from demo, find any piece/part/page
check the html, and use that one in your page

and you should connect your db,
get data
create a repeater and construct the html as is...

I know it will take some time, but at the end,
you will have a site which is very easy to maintain and looks very professional...

Dear HainKurt
I started using the HTML code and insert in ASPX Page the code of Index.html in preparation of creating server code (in vb.net)
Unfortunately when I tried to show the page on browser I got compilation error. The issue is that there is no code in the form at all




The error is

This compiler is provided as part of the Microsoft (R) .NET Framework, but only supports language versions up to Visual Basic 2012, which is no longer the latest version. For compilers that support newer versions of the Visual Basic programming language, see http://go.microsoft.com/fwlink/?LinkID=533241

Select allOpen in new window

÷my development environment works fine except when I use any part of the template HTML

I guess you  need to select correct .Net version
make it 3.5 or 4

or make it .Net 2

or go and grab latest VS Community addition and work with .Net 4.0

Visual Studio 2019 Community Edition

https://visualstudio.microsoft.com/vs/community/

Hey Dear HsinKurt
You draw my attention to something that may fix this issue. I should create and use user control for Body and if that works (compilation wise) I will expand the usage of the controls (Although, I do not see a reason why the html code compiles successfully in controls and not in the page). I will try.
Thanks
Fayez

Wow... Wow... I changed the targeted .net framework from 4.0 to 3.5 as you indicated, and the compilation error is gone... I do not know how to express my gratefulness to you... genius!!!!!. I was thinking I need to use a higher (Not Lower) version... what was your reason to think this way.?...

Regards,

Now after I got the HTML to show in browser.. I tried to insert some ASP.NET controls to manage through the vb.net code. as shown in bold... however the ASP.NET checkbox did not apply the same css shape as the HTML checkbox.

Can you please give me an example of adding a server checkbox and preserve the css for it consistent with the HTML checkboxes. I will use it as a rule to all other control types

Following is the code snippet, followed by the displayed shape in browser.
I may be able to live with using the simple HTML controls using runat="server" but what about data binding in dropdown lists, and the other composite controls?

                    <div class="form-group">
    <label>Default Checkboxes</label>
    <div class="checkbox-list">

Select allOpen in new window

            <asp:CheckBox runat="server" Text="FAYEZ" ID="chkFayez" />

Select allOpen in new window

        <label class="checkbox">
            
            <input type="checkbox" name="Checkboxes1" runat="server" checked="checked"/>
            <span></span>
            Default
        </label>
        <label class="checkbox checkbox-disabled">
            <input type="checkbox" disabled="disabled" checked="checked" name="Checkboxes1"/>
            <span></span>
            Disabled
        </label>
        <label class="checkbox">
            <input type="checkbox" checked="checked" name="Checkboxes1"/>
            <span></span>
            Checked
        </label>
    </div>
</div>

Select allOpen in new window

Dear HainKurt
If there is no way to implement the template css classes to the server controls in the template. I have no problems using the Templates HTML controls in the webforms by adding runat="server" attributes to the controls... what do you think?

If you agree with this, then My question will be closed, and I wish if I could be able to offer any help to you, but you are really far ahead.. Thanks my friend

Regards,
Fayez

you can add runat=server
but you need to use same layout and css in the template...
check the demo and see how those elements are constructed...

it is a bit hard to grab but if you can manage,
the rest will be super easy and all pages will look beautiful...

for example, demo1


normally, you copy paste the checkbox group to your aspx page
then make those checkboxes as asp.net controls, and use runat=server

this way, you use .net controls and they look/behave exactly same as template...

in your case, you should do something like this:

<div class="form-group">
    <label>Default Checkboxes</label>
    <div class="checkbox-list">

<label class="checkbox">
<asp:CheckBox runat="server" ID="chkFayez1" />
<span></span>FAYEZ 1
</label>

<label class="checkbox">
<asp:CheckBox runat="server" ID="chkFayez2" />
<span></span>FAYEZ 2
</label>

    </div>
</div>

Select allOpen in new window

when I copied the contents of one of the template pages to an aspx page, The design mode shown in Visual studio is  very bad. However when I show in browser it is OK As in the shown screen shot. Do I need a special editor to work in design then copy the code to visual studio designer? and what would be that editor, and will it display the ASP: controls???.

In Design mode
In Browser

1996... I am assigned to create a web site for our company
I am given FrontPage... I hated it...
then I learned html/asp and never used such tool...

so, dont use any design editor
it messes up codes...
use text editor and use browser to see what it looks like
press F12, select items and see what is the HTML code...

HainKurt, 

Select allOpen in new window

You do not look that old for at least 24 years of experience... Lucky you

I need the development environment, as my system is a very rich database related system (hundreds of tables / views / stored procs / functions / and other SQL server objects). and in rich client I have tons of forms with different varieties that I need to migrate to web interface version. I need to use the event model intensively, I need to see how pages look like in design mode. 

I am trying since 2 hours to figure out how to change the icon or the image in any of the left menu buttons, but no success. I do not think I have to stick to the icons as they are in the template (that will sound like a joke), and that should be a basic task that should take few seconds... Please help,  my "Still young" friend. 

I checked for icons

https://preview.keenthemes.com/metronic/demo1/features/icons/svg.html

for example with php

<img src="<?php echo Page::getMediaPath();?>svg/icons/Clothes/Cap.svg" alt=""/>

Select allOpen in new window

and if you want svg, syntax is

<span class="svg-icon svg-icon-success">...</span>

Select allOpen in new window

but you can use custom icons
https://preview.keenthemes.com/metronic/demo1/features/icons/custom-icons.html

syntax is very simple

<i class="ki ki-solid-plus icon-xs"></i>

Select allOpen in new window

there are many ways to use icons...
svg is most difficult one

Wow,
I started to understand how it works
Here is an example followed by few questions Please answer
     

<button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <span class="svg-icon svg-icon-lg">
      <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Add-user.svg-->
      <svg xmlns="http://www.w3.org/2000/svg"             xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"             viewBox="0 0 24 24" version="1.1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <polygon points="0 0 24 0 24 24 0 24" />
            <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
            <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero" />
            </g>
      </svg>
      <!--end::Svg Icon-->
   </span>
</button>

Select allOpen in new window

Questions are:
1- Where I should write the Icon Name in the <svg> tag or the <span> tag
2- what are these numbers in the path tag

Thanks HainKurt
Regards

Fayez

if you ask me dont bother with svg
too much code...
use other methods, very simple...

<i class="ki ki-plus"></i>

Select allOpen in new window

<i class="flaticon2-bell-4"></i>

Select allOpen in new window

<i class="fa fa-map-marker-alt"></i>

Select allOpen in new window

<i class="fa fa-search"></i>

Select allOpen in new window

<i class="socicon-facebook mr-5"></i>

Select allOpen in new window

I guess they added svg method for better performance...

and if you insist on svg, on their demo page
you just select the icon, and they give you the code

<img src="assets/media/svg/icons/Clothes/Dress.svg"/>

Select allOpen in new window

or

<span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Clothes\Dress.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <polygon points="0 0 24 0 24 24 0 24"/>        <path d="M8.04050792,3 C8.31778201,4.50768629 9.98487319,5.66666667 12,5.66666667 C14.0151268,5.66666667 15.682218,4.50768629 15.9594921,3 L18.381966,3 C18.9342508,3 19.381966,3.44771525 19.381966,4 C19.381966,4.1552451 19.3458209,4.30835816 19.2763932,4.4472136 L16.2763932,10.4472136 C16.1070012,10.7859976 15.7607381,11 15.381966,11 L8.61803399,11 C8.23926193,11 7.89299881,10.7859976 7.7236068,10.4472136 L4.7236068,4.4472136 C4.47661755,3.9532351 4.6768419,3.35256206 5.17082039,3.10557281 C5.30967583,3.03614509 5.46278889,3 5.61803399,3 L8.04050792,3 Z" fill="#000000" opacity="0.3"/>        <path d="M9.35406592,12 L14.6459341,12 C15.4637433,12 16.1991608,12.4979019 16.5028875,13.2572186 L19.4514437,20.6286093 C19.6565571,21.1413928 19.4071412,21.7233633 18.8943577,21.9284767 C18.7762374,21.9757248 18.6501865,22 18.522967,22 L5.47703296,22 C4.92474821,22 4.47703296,21.5522847 4.47703296,21 C4.47703296,20.8727806 4.50130816,20.7467296 4.54855627,20.6286093 L7.49711254,13.2572186 C7.80083924,12.4979019 8.53625675,12 9.35406592,12 Z" fill="#000000"/>    </g> </svg><!--end::Svg Icon--></span>

Select allOpen in new window

I guess they added svg
because they are high quality and are not distorted when enlarged!
it is vectoral based...

SVG Icons

https://preview.keenthemes.com/metronic/demo2/features/icons/svg.html

Dear HainKurt,
I think I started to pick up the idea as you explained. I am trying to copy controls from the template and see how it behaves, and After I feel more confident, I will start the real work.
In my trial I tried to copy the following code which should create drop down button... It shows but the drop down list does not show any elements... I am sure I missing something that I dot see... Please help
... I am almost there !!! Please tell me what Am I missing. It is very important to have such a dropdown button in my system

<div class="dropdown dropdown-inline">
    <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" 
         data-toggle="dropdown" aria-expanded="false">
        <span class="svg-icon">...</span> Dropdown example
    </a>
    <div class="dropdown-menu dropdown-menu-md py-5" style="">
        <ul class="navi navi-hover navi-link-rounded-lg">
            <li class="navi-item">
                <a class="navi-link" href="#">
                    <span class="navi-icon">
                        <span class="svg-icon svg-icon-danger"
                        >...
                        </span>
                    </span>
                    <span class="navi-text">Messages</span>
                    <span class="label label-light-danger font-weight-bold 
                        label-inline"
                     >new
                     </span>
                </a>
            </li>
            <li class="navi-item">
                <a class="navi-link" href="#">
                    <span class="navi-icon">
                        <span class="svg-icon svg-icon-warning"
                        >...
                        </span>
                     </i>
                     </span>
                     <span class="navi-text">Settings</span>
                </a>
            </li>

        </ul>
    </div>
</div>

Select allOpen in new window

I appreciate it HainKurt
By the way, where are you living?

Regards,
Fayez

I know, it is a bit hard on start
but these guys are really made a nice job!
after you grab, your site will look beautiful...
and subsequent pages will be super easy...

now, your question 1

your HTML is malformed
Line 24, you need to remove that artifact...

second question, it shows on my profile...

Even After I removed this </i> tag No luck , same behavior

I think I found the reason... The button was in a <div> in an <li> which I believe has a height limit through a class smaller than the expanded drop down list height.... when I moved the code to an unrestricted area in the page it worked Fine... I am still experiencing

and I started to check the SVG collection and found I need much more icons than the available collection. So I Downloaded few new ones to the same folder as expected in the solution, and included them in the project. However, I cannot access them even using <img> tag directly (the new svg is checkmark.svg)

by replacing the <svg> tag with

<img src="assets/media/svg/icons/Text/checkmark.svg"/>

Select allOpen in new window

I then tried to copy to the same place a jpg file, and it worked OK !!! It looks like the template has a preset svg icons Set (May be because of Copyright... What do you think?

I have a question, How to read the CSS classes in VS do I have to go using any text editor and open the css referenced files and search in a basic way or there is a tool that allows me to read the css and manage its elements and classes?

I will keep on experimenting until I start to enjoy, Then I will start building the web app... Please help, my neighbor !!

here is some sites that offer free svg
https://1stwebdesigner.com/10-places-to-find-beautiful-free-svg-icon-sets/

https://simpleicons.org/
https://material.io/resources/icons/?style=baseline

now, svg issue

here is a demo
https://jsfiddle.net/HainKurt/0kfpwuoz/

<img src="https://simpleicons.org/icons/slack.svg">

Select allOpen in new window

I used
https://simpleicons.org/icons/slack.svg

I embedded this img to their demo
https://preview.keenthemes.com/metronic/demo1/features/icons/svg.html

so, no such issues...

they included 640 svg icons, and there are mıllıons on ınternet for free :)
they look cool and you can use any size without any distortion...
but they also included fontawesome 5, lineawesome, flaticons, customicons...
maybe 5K icons here!
still need more? come on... just use these, and dont bother with anything else :)

here are the icon sets they included in the latest theme...

https://preview.keenthemes.com/metronic/demo1/features/icons/svg.html
https://preview.keenthemes.com/metronic/demo1/features/icons/custom-icons.html
https://preview.keenthemes.com/metronic/demo1/features/icons/flaticon.html
https://preview.keenthemes.com/metronic/demo1/features/icons/fontawesome5.html
https://preview.keenthemes.com/metronic/demo1/features/icons/lineawesome.html
https://preview.keenthemes.com/metronic/demo1/features/icons/socicons.html

Dear HainKurt,
I think with your help I started to grab the whole concept, I appreciate your dedicated help my friend. I never tried to fill up my profile, however when I read yours, I think I will consider filling mine up, at least to know where I am located, and gain friends. Thank you Soooooo much

I purchased this theme 3 years ago, and they updated it maybe 50 times...

lots of things changed, but they are really good...
once you grab what they did, and how it works as a whole
you can do any database driven website very quickly, latest standards, lots of fancy/cool stuff, all in one package...

and, as I said, you barely need any .Net components...
you probably only need to connect to db, get data into a datareader, and use a asp.repeater to construct what they have in template...

result is a professional looking web sites...

Good reading guys. Thanks a lot!