guidelines to build a multicolumn menu - c#

I am working in a Visual Studio 2010 environment and I am looking for the most effective way to build a multicolumn list that will be displayed inside a jQuery Menu like:
I actually use a serverside DataList control that renders me a table with a RepeatColumns="3" attribute.
I would like to know the most efficient, frequently, most common technique to use for this purpose. I just look for guidelines :)
Thanks

You just need to render the content as show - it makes no difference whether it's inside a jQuery dropdown menu, or straight on a static page.
You can do this using a table or using CSS, depending on which you're more comfortable with. The DataList control renders - as you say - to a table, which presumably works fine. A lot of people will say that you should use straight CSS rather than a table, but for this example the content is fairly 'tabular' in nature so I don't see a problem with using a table.

Related

Transferring an existing C# and ASP.NET Web Form site to Bootstrap

So I have an existing page that's running ASP.NET and C# in order to display a front-end for some PowerShell commands. This was all developed in the community/free version of Visual Studio 2017.
Pseudo-code is below
User browses to page in browser
Browser presents lists of buttons and text fields
User inputs options into fields and clicks a button
C# runs in backend to run a PowerShell command doing various things, dumping into a JSON file the results
C# returns the results to the page by reading the JSON and turning it into a C# object, displaying as a C# Table
What I have already is that page (and sub pages for different features), displaying results to a simple table or div and displaying the buttons and text fields using the default C# table and some custom HTML to display the JSON properly.
What I want though, is to be able to port those features and functions to a Boostrap template, so I can take advantage of the handy dropdown menus, fancy buttons, etc. that are provided by Boostrap. Specifically I'm looking at using Flatkit.
All of the examples I've seen have either been for MVC stuff, starts entirely from scratch, or uses very simplistic Hello World examples, neither of which help when tackling this task as my code is web form based and more complex than an About page.
So my question(s) is/are
a) How can I create ASP.NET controls that will both play nicely with Bootstrap and feed data back into the C# file for processing? Something that can duplicate an <asp:Button> essentially, without refreshing the page entirely.
b) How can I then create another control or similar element on the front-end side to display that information? I'm using a simple <asp:Table> currently
I have the backend PowerShell and most of the logic written, I just need to know how I can make it interact nicely with Bootstrap essentially.
Web dev is not my usual forte , so a lot of the tutorials feel like reading Ancient Greek as they assume I know JQuery, Angular, DOM, etc. So if there's knowledge I'm lacking to make this work, links would be great.
Thanks!
End of day, Bootstrap or any CSS framework applies styles to HTML elements. ASP.Net Web Forms Controls render "vanilla" HTML - though some can be unwieldy (like <form> input name and id attributes - re: ASP.net uses the same value).
They can be styled as needed. Look into CssClass
Hth.

How to create a Dropdown button in asp.net c#?

Does anyone know the name of the property in which it look alike button
but once if we keep the mouse pointer
on it then it will show like dropdown
list options.
I want to use that in my asp.net
project.
There is no out of the box control as such. It is an effect achieved either using javascript or CSS
Take a look at this example
http://demos.9lessons.info/DropMenu/MyDemo.html
You should also search for jquery plugins for this. Though you will get readymade code for it but it will surely not be a server side control. You have choice of either creating a user control or just use it as it is.
unfortunately there is no such control out of the box in asp.net. you might want to look at third party controls or do some css magic.
Something like that maybe a standart one(1) .But I can recommend you to use telerik if you are using it already here is a example (2)
Example2
Example2

Creating Repeater Template at runtime and based upon user input

Is it possible to dynamically create an ItemTemplate for a repeater somehow?
I am trying to use a repeater since it allows the most control, but one of my requirements is making me reconsider.
I basically have a number of SQL queries that I do through a web service. Rather than having users type in the entire query I want them to be able to select "parts", "products", or "packages" via radio buttons, enter a search term in a text box, and some other info, and the page returns the results they want. I have this mostly done, the RadioButtons control logic, and I have the query set up to accept the input from the text box as a search term with wildcards. The only probelm is I am struggling with the repeater control. The problem is each one of the tables has a different number of columns and they have different names, so doing a
<td><%# DataBinder.Eval(Container,\"DataItem.Description\") %></td>
within the ItemTemplate is not possible(I don't know until bind time which one of the 3(possibly more in the future)templates to use)
I tried using a literal to pass in what I wanted based on logic in the codebehind, but I couldn't pass the inline functions, and I have been unable to put together how to do this based on an earlier question.
I have been reading the MSDN reference and it seems like if I learn the DataList control it will make things easier, but I'd rather not waste time on that if there's an easy way to do it with a repeater(which will also allow me more control)
Thank you
I may be off track here but I think an easy solution to the problem you're having would be to create multiple repeater controls with different items templates inside them and wrap them up in panels. That way depending on the user parameters you could simply databind your result to the proper repeater and set the other panels to invisible.
I was looking back through some old code for you to see how I've handled similar situations. Then I saw Jesse's answer right before I wrote my reply. Basically, I would tend to agree with Jesse there - that seems the most straightforward solution from what you've outlined.
So I don't know how much this helps, but one possibility would be to use MVC Templates. MVC is handy in that it can actually be used in a very limited sense (your entire app doesn't need to implement it, just the applicable page) and it's also pretty straightforward.
An introduction on how to do different templates within MVC: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html
It might be possible to modify the template so that it changes based on the object that it's bound to - like how a WPF DataTemplateSelector works.
I thought I remember seeing something in MVC3 or MVC4 that you could create a Template based on a datatype (like you can in Silverlight) and it would automatically pick that Template, but I'm having trouble finding that now.

Creating xaml 'template' for multiple pages

I'm developing a Silverlight application for the first time. I've gone through some tutorials, but I can't seem to find anything that helps me with this particular problem. I would like a set of buttons to be present on all of my pages (like a template). When a button is pressed, I would like the ContentGrid to slide out and a new ContentGrid slide in (with the relevant .xaml file being loaded).
Are there any tutorials showing the best way to do this? From samples I've seen, they only seem to transition between two pages, so copy-pasting the group of buttons on each xaml page isn't too much of a problem. However, with more pages, it would be inefficient to copy-paste the base layout each time.
Thanks for any suggestions
I used to create a master view and create each page content as a user control; that way, I can swap out/in the user control for the appropriate page, and I would have a consistent header that way... similar to a master page in ASP.NET. I'm sure there are other templates too; I'm not aware of everything available for Silverlight...
The one answer I cannot provide is the transition; the only thing I can offer is Telerik has a control for that purpose, the transition control: http://demos.telerik.com/silverlight/#Controls I understand if you can't drop a couple of hundred bucks to get it though :-)
HTH.
Have you tried the Silverlight Business Application Visual Studio Project template?

How to create a simple Custom Container control with 2 Divs inside?

Im looking to create a custom ASP.NET container control that will allow me to drag further controls into it within the VS designer.
The final HTML that im looking for is very simple..
<div id="panel1">
<div id="panel2">
</div>
<div id="panel2">
</div>
</div>
With additional controls being able to be dragged into panels 2 and 3.
Im sure its very simple but im struggling to find examples that will help.
Any pointers or ideas are appreciated!
Cheers
Stuart
I've done such things in the past, and yes, from my experience at that time there is not much documentation available. Even worse, at that time some of the documentation was incorrect or vague!
So, to save you all the headaches (ouch, it already starts to hurt when I just think of it :-P), here is some information you definitely need to know.
Basically all controls are for run-time use only. You can attach a ControlDesigner to a control with an attribute on the class definition, which the design time environment (VS.NET IDE) will load and use as a layer on top of your control.
Templates
Chris' suggestion to use Templates is in the right direction. Your control needs to store somewhere the 'content' of the div's, and Templates are the perfect solution. Make sure you get this part right at first. Note: template properties can behave weird if they have a set clause! Moreover, check the use of NotifyParentAttribute also.
When you've got the templates in place, and you can use declarative syntax in ASPX pages to add controls, and they render well, then you can start working on the designer.
For the designer you have 2 options; the easy and complex way.
Easy designer solution
Let's start with the easy way. The base ControlDesigner classes already provide a framework to show templates. You have probably already seen this in action, like in the GridView control and its template fields.
Check out the following MSDN article on creating a template control designer.
With this easy solution, you get an automatic implementation of the smart tag (the arrow to the right of a control during design-time), and can select a template to edit from a drop down list.
Complex designer solution
Now, if this is not really satisfying for you, and you would like to be able to edit controls just like a Panel control, then you have to dig deeper. So here is the complex solution using Control Designer Regions.
See the example in the example in the EditableDesignerRegion class.
What this example does, is overriding the CreateChildControls of the designer class. Remember I said the designer control is a layer on top of your run-time control? So this CreateChildControls method will run after your control's implementation. What you have to do, is mark a HTML element within your render output with a special designer region HTML attribute. In this way, the designer knows what part in your rendered control should be a region.
Now you have to instruct the IDE to assign a editor or viewer to your regions. You have to do this in the GetDesignTimeHtml(DesignerRegionCollection regions) method (notice the overloaded version of this method). As you can see, this method receives a collection of regions. You have to assign your editable of view regions to this collection. Important here - and this is the badly documented part - is that the order in this collection is very important. The value of the region attribute in your HTML, refers to the index in this collection.
So, now we have defined regions in our rendered output, assigned a editor or viewer to it. Next up is how to fill these regions and store the value from these regions back into our controls declaration.
These two actions are handled in GetEditableDesignerRegionContent and SetEditableDesignerRegionContent methods of the control designer. Here you see why it's important to name the regions that you've added to the collection in the GetDesignTimeHtml method. In these two methods you receive the region reference and by it's Name property you could determine which Template property of your control to read/write.
To read and write the template properties we use the magic of the ControlPersister and ControlParser. The persister creates an template instance from declarative ASP.NET (HTML) code. The parser does the job the other way around; creates plain HTML from a template instance.
In a nutshell
So it's up to you to decide whether the standard template editing framework is good enough for you. If you want to have fancy edit capabilities for both of your edit regions in your IDE, then you will have to implement the complex solution. Otherwise just stick with the simple implementation. The examples mentioned will help you a lot.
Here is a link to a MSDN article regarding what you are trying to do, unfortunently there is no VS designer support so it renders correctly from the server but not in the IDE.
How to: Create Templated ASP.NET User Controls
http://msdn.microsoft.com/en-us/library/36574bf6.aspx

Categories