ASP.NET设计视图-移动控件

Question

I've recently decided to create a web app to host some algorithms - I normally just create them without care for UI. However this time I need to dive deep into UI. I'm familiar with bootstrap, css, asp.net and have made a good start.

I'm finding it very difficult to deal with asp.net controls in the design view and having too much trouble trying to achieve simple tasks such as moving controls to different areas of the webpage. When I have two textboxes the design view forces one on top of the other leaving me so confused. Then when I try to move my bootstrap button it randomly creates paragraphs and refuses to move the button!

I'm looking for some genuine sincere advise on how I would deal with the design view on asp.net when moving controls and what the best techniques are. Also advice on how to make a modern UI, best techniques (perhaps bootstrap mentions) etc...

I am creating a fairly simple data display app in asp.net (visual studio 2015) - (most of the algorithm complexity is going to be behind the scenes and nothing to do with UI). Comprehensive and detailed advice would be really appreciated. Specifically modern good looking UI in relation to data grids, textboxes for user input (as parameters), dropdowns - you know the typical data app.

I'm sure this will be greatly helpful to many others as well!

Answer 1

Yeah, as I web designer who has had to work with asp.net in the past I completely feel your pain. It's not easy to get a modern look mostly because asp.net isn't a modern tool and kind of has a visual vocabulary all its own.

That said, I found I could get decent results by sticking as close to CSS based solutions as I possibly could. You can see some of those results in the following links:

http://www.design-experiments.com/ http://www.troyjnorris.com/shoppingcart/

I found that a minimalist approach tends to come with the best results.

A good process to follow: - Build what you want to build. - Add container divs to make selecting elements easier around your controls. This will greatly improve your ability to position elements the way you want. - Use your browser inspector to figure out the auto generated element names as they appear on the screen. Getting good selectors is half the battle in CSS. - Rip out the styling you don't like. Standard reset style sheets won't do here. You'll have to build your own to zero everything out on the elements you want to style so you're not fighting the out of the box look of the controls. Again you have to rely heavly on your inspector in a web browser to see what styles everything is inheriting. - Use google fonts to define visual style of the page. - Stick to mostly black or white backgrounds. - Bootstrap is helpful for a responsive grid, but won't do much good attempting to style most of the elements on a page as they're not meant for that. - As you might have noticed in the examples above the visual interest comes from elements that are unrelated to the asp.net structure and limitations. So have something like that, even a background image or some paralax so it feels like something is going on on the page.

Hope that helps.