如何在生成的ASP.Net MVC表单视图中的预先存在的元素上实现列样式？ [英] How do I implement column style on pre-existing elements in a generated ASP.Net MVC form view?

问题描述

我正在寻找关于如何改进默认/生成ASP.Net MVC视图使用预先存在的元素的建议。

I'm looking for suggestions on how to improve default/generated ASP.Net MVC views using the pre-existing elements.

我有一个应用程序有很多的形式，我想改善他们的样子，而不必花费太多时间在每个窗体上，只是应用一个样式大括号。

I have an app that has lots of forms and I'd like to improve their look without spending too much time on each form, and just applying a style en-masse.

有一种方法可以添加列到以下样式？

Is there a way to add columns to the style below?

<style type="text/css"> 
form      
{
    background-color: #f3f3f3;     
    border: solid 1px #a1a1a1;     
    padding: 10px;     
    width: 300px; 
}  

.editor-label, .editor-field 
{     
    display: block;     
    width: 120px;     
    float: left;     
    margin-bottom: 10px; 
}  

.editor-label      
{
    text-align: right;     
    padding-right: 20px; 
}  

br      
{
    clear: left; 
}

</style>

推荐答案

您将需要更多的HTML元素以实现柱结构。您可能必须编辑T4模板，以便在创建视图时为您生成额外的标记。

You are going to need more HTML elements to work with in order to achieve a column structure. You may have to edit the T4 template so that it generates the additional markup for you when you create a view.

另一种可能性是通过jQuery逐步增强布局。此示例使用 DIV 包装每个标签和字段，以便您可以进行更多操作。

Another possibility is progressively enhancing the layout via jQuery. This example wraps each label and field with a DIV so that you have a little more to work with. You can easily extend this to apply a column system of your choosing.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.editor-label').each(function () {
            var $labelAndField = $(this).add($(this).next('.editor-field'));
            $labelAndField.wrapAll('<div class="field" />');
        });
    });
</script>

这篇关于如何在生成的ASP.Net MVC表单视图中的预先存在的元素上实现列样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！