ASP.NET 控件布局

Question

我对 ASP.NET 有点陌生。事实上，我是一个边缘化的VB/SQL程序员，终于与时俱进了。但是，新技术带来了新的令人头痛的问题。即：布局。

我似乎无法让一个奇怪的 ASP.NET 页面看起来不错。在设计模式下，我可以插入一些表格，调整理由，放置控件，它看起来很漂亮。直到我按下 F5 为止。然后，我的浏览器中出现了垃圾。我确实了解一些 HTML，但试图用几个（比如 15 个）控件制作一个看起来很漂亮的简单表单似乎是不可能的。

表格变大/缩小/扩大，它们在页面上移动我所有的东西，并且内墙在设计视图中肯定会调整得有趣。我以为我的控件不再居中，有些东西向右移动，有些东西向左移动。至少可以说令人沮丧！

那么请问如何在ASP.NET中设计一个漂亮的界面呢？

我需要第三方所见即所得工具的帮助吗？我需要脑移植吗？我是否需要在余生中忘记编程，而满足于在当地的快餐店煎汉堡？

任何帮助或提示或链接或任何东西将不胜感激！

谢谢， 贾森

Answer 1

VS设计师是让MS有话可说——实际上没什么用。您需要了解代码中发生的情况以及 html/css 的工作原理。

很好的起点是 css 属性：display。每个元素都设置了此属性（显式或隐式），并且它是该领域的主要参与者。如果你能理解这一点，那么下一个重要的事情就是宽度/高度、边距和填充。接下来是浮动以及它如何修改一切。如果您知道这些事情，那么您可以轻松创建 html/css 布局。

Answer 2

这听起来不像是一个答案，但只是我的 0.02 美元：给予 Asp.Net MVC尝试一下。它更容易使用，并且更对设计师更友好。我所说的“设计人员友好”是指使用像 DreamWeaver 这样的程序相当容易进行视图的实际设计，然后使用 Razor 或使用标准 Webforms 标记——同时保持代码完全独立。

供您考虑（两个示例均取自 Scott Guthrie 的博客，上面链接）...

Asp.Net Web Forms

<ul id="products">
    <% foreach(var p in products) { %>
        <li><%= p.Name %> (
lt;%= p.Price %>)</li>
    <% } %>
</ul>

Razor

<ul id="products">
    @foreach(var p in products) {
        <li>@p.Name ([email protected])</li>
    {
</ul>

正如您所看到的，在后一个示例中，在您之后添加模板（和/或设计师）使用单独的工具将设计组合在一起。

这实现了您“与时俱进”的目标，同时让您轻松进行设计。老实说，我在 MS 堆栈中使用过的唯一取得成功的所见即所得编辑器是 Expression Blend 和Visual Basic 和 WinForms 的设计者。

Answer 3

这很有趣，我想帮忙。 ASP.NET 内容最终会呈现为 html（我相信您可能很清楚），您可以右键单击页面并执行“查看源代码”来查看呈现的内容，例如，如果您有 ASP.NET gridview它将呈现为 html 表格，您可以搜索 asp.net gridview/html 表格的 id，然后使用该 id，或者如果您在控件上指定了 CssClass，则定义一组 css 来修饰或定位您的控件在你的asp.net 页面。

另外，如果您不喜欢“查看源代码”的想法，如果您使用的是 Internet Explorer 7+，则可以使用开发人员工具（在选项中）来了解哪个控件后面的 html 是什么。在 Firefox 中，您可以安装一个名为“Firebug”的插件，并使用它来了解哪个 ASP.NET 控件背后的 html 标记。

希望以上内容有所帮助。

Answer 4

真正设计网页的唯一方法是学习 HTML 和 CSS。时期。不要使用所见即所得的设计器（如 VS 的设计器或 Dreamweaver）。如果您是一名程序员，您应该进行编程，而不是所见即所得（至少对于 HTML 而言）。

使用主要浏览器（IE、FireFox、Chrome、Safari）检查您的布局并确保获得您想要的布局。我强烈推荐 Firebug（FireFox 的一个插件）——它非常有帮助，因为您可以修改样式和 HTML，直到得到正确的结果。

Answer 5

有时，当涉及到 HTML 和 CSS 时，翻转汉堡可能是首选职业选择。这太可怕了，对于你想要实现的目标来说过于复杂，并且占用了你 90% 的时间摆弄布局、对齐面板、图像和文本。而且它看起来仍然不如网页设计师网站那么好。
如果您确实想节省时间，请尝试使用 MS MVC。他们至少在某种程度上试图向开发人员隐藏设计内容，但如果您来自 Win 窗体或传统 ASP.NET 方向，那么 MVC 很难学习。

至于对所见即所得设计师的建议，我不同意其他贡献者的观点。 VS 设计器并不完美，但对于绝对的初学者来说，你必须从某个地方开始。至少您可以将控件拖放到表单上，然后再担心标记和所有繁琐的部分 - 一开始就不要使用 CSS - 您会对此感到沮丧和愤怒。它在正确的人手中是强大的，但对于我们其他开发人员而不是网页设计师来说，这是一个痛苦且耗时的过程。只要得到一些有用的东西，尽管它看起来很糟糕。一旦你设计好了一些东西，你就可以在建立信心的同时一点一点地应用CSS。当然，您可以事后将您的标记交给优秀的网页设计师，让他们处理任务，而您则担心代码隐藏、业务对象和数据访问。这是程序员的事情，而不是搞乱 HTML 和 CSS。 Silverlight 的消亡对所有人来说都是悲伤的一天，因为它曾承诺停止浪费在 CSS 上的所有时间。

Firebug 还可以，直到你在 IE 中查看你的网站，然后它就会再次崩溃。我倾向于使用 VS 设计器、IE Chrome 和 Firebug 的组合，因为它们都有问题。
最重要的问题是确保您将浏览器支持安装到 VISUAL STUDIO 中 - 特别是如果您希望您的网站在 IE10 以及更高版本的 Chrome 和 Firefox 浏览器中看起来像您想要的那样。那么你对你在 VS 中设计的东西至少会在以后的浏览器中占有一席之地抱有一些希望。