Question

可以在mvc视图中使用一些帮助理解div和布局

我有部分观点

@model Hybridinator.WebUI.Models.DatabaseModel
<br />

    if (Model != null)
    {
        if (Model.database_name != null && Model.database_name != "")
        {
            <div class="form-group">
                <div id="databaselabel">@Html.LabelFor(m => m.database_name, "Database")</div>
                <div id="databaseedit">@Html.DisplayFor(m => m.database_name)</div>
            </div>
            <div class="form-group">
                <div id="databaseserverlabel">@Html.LabelFor(m => m.database_server, "Database Server")</div>
                <div id="databaseserveredit">@Html.DisplayFor(m => m.database_server)</div>
            </div>
            <div class="form-group">
                <div id="databaseusernamelabel">@Html.LabelFor(m => m.database_username, "Database Username")</div>
                <div id="databaseusernameedit">@Html.DisplayFor(m => m.database_username)</div>
            </div>
            <div class="form-group">
                <div id="databasepasswordlabel">@Html.LabelFor(m => m.database_password, "Database Password")</div>
                <div id="databasepasswordedit">@Html.DisplayFor(m => m.database_password)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaselabel">@Html.LabelFor(m => m.hist_database_name, "History Database")</div>
                <div id="histdatabaseedit">@Html.DisplayFor(m => m.hist_database_name)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseserverlabel">@Html.LabelFor(m => m.hist_database_server, "History Database Server")</div>
                <div id="histdatabaseserveredit">@Html.DisplayFor(m => m.hist_database_server)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseusernamelabel">@Html.LabelFor(m => m.hist_database_username, "History Database Username")</div>
                <div id="histdatabaseusernameedit">@Html.DisplayFor(m => m.hist_database_username)</div>
            </div>
            <div class="form-group">
                <div id="histdatabasepasswordlabel">@Html.LabelFor(m => m.hist_database_password, "History Database Password")</div>
                <div id="histdatabasepasswordedit">@Html.DisplayFor(m => m.hist_database_password)</div>
            </div>
            <div class="form-group">
                <div id="sqltypelabel">@Html.LabelFor(m => m.sql_type_pk, "Sql Type")</div>
                <div id="sqltypeddl">@Html.DisplayFor(m => m.sql_type)</div>
            </div>
            <br />
            @(Html.Kendo().Button()
                    .Name("buttonEditDatabase")
                    .Content("Edit")
                    .Events(events => { events.Click("editDatabase"); })
            )
        }

}

显示它时看起来像......

enter image description here

我想要的是它实际上是两列并且看起来像这样

enter image description here

有关如何执行此操作的任何建议......或者可能是在视图中使用div来完成布局的好教程，我们将不胜感激。

Answer 1

你使用bootstrap吗？那么unswer就是使用特殊类'col-md-6'的div包装器。有关更多信息，请参阅getbootstrap.com。

<div class="col-md-6">
  <div class="form-group">
    <div id="databaselabel">@Html.LabelFor(m => m.database_name, "Database")</div>
    <div id="databaseedit">@Html.DisplayFor(m => m.database_name, new { @class = "form-control" })</div>
  </div>
  ....
</div>
<div class="col-md-6">
  <div class="form-group">
    <div id="histdatabaselabel">@Html.LabelFor(m => m.hist_database_name, "History Database")</div>
    <div id="histdatabaseedit">@Html.DisplayFor(m => m.hist_database_name, new { @class ="form-control" })</div>
  </div>
  ...
</div>

Answer 2

您可以使用columnizer jquery plugin。行数量是动态的

将表单组元素包装在某个div中并将插件应用到它。

例如：

$('.wrapper').columnize({ columns: 2 });

Answer 3

使用Kendo（）。Splitter（）控件解决了我的问题。

@(Html.Kendo().Splitter().Name("VerticalDatabaseInfoSplit").HtmlAttributes(new { style = "height: 400px;" }).Panes(pane =>
        {
            pane.Add()
                .HtmlAttributes(new { id = "left-pane" })
                .Scrollable(false)
                .Collapsible(false)
                .Resizable(false)
                .Scrollable(false)
                .Size("350px")
                .Content(
                @<div style="margin:3%">
                    <div class="form-group">
                        <div id="databasedisplaylabel">@Html.LabelFor(m => m.database_name, "Database", new { style = "width: 200px"})</div>
                        <div id="databasedisplay">@Html.DisplayFor(m => m.database_name, new { style = "width: 250px" })</div>
                    </div>
                    <div class="form-group">
                        <div id="databaseserverdisplaylabel">@Html.LabelFor(m => m.database_server, "Database Server", new { style = "width: 200px" })</div>
                        <div id="databaseserverdisplay">@Html.DisplayFor(m => m.database_server, new { style = "width: 250px" })</div>
                    </div>
                    <div class="form-group">
                        <div id="databaseusernamedisplaylabel">@Html.LabelFor(m => m.database_username, "Database Username", new { style = "width: 200px" })</div>
                        <div id="databaseusernamedisplay">@Html.DisplayFor(m => m.database_username, new { style = "width: 250px" })</div>
                    </div>
                    <div class="form-group">
                        <div id="databasepassworddisplaylabel">@Html.LabelFor(m => m.database_password, "Database Password", new { style = "width: 200px" })</div>
                        <div id="databasepassworddisplay">@Html.DisplayFor(m => m.database_password, new { style = "width: 250px" })</div>
                    </div>
                    <div class="form-group">
                        <div id="sqltypedisplaylabel">@Html.LabelFor(m => m.sql_type_pk, "Sql Type", new { style = "width: 200px" })</div>
                        <div id="sqltypeddl">@Html.DisplayFor(m => m.sql_type, new { style = "width: 200px" })</div>
                    </div>
                </div>
                );
            pane.Add()
           .HtmlAttributes(new { id = "right-pane" })
           .Scrollable(false)
           .Collapsible(false)
           .Resizable(false)
           .Size("350px")
           .Scrollable(false)
           .Content(
        @<div style="margin: 1%">
            <div class="form-group">
                <div id="histdatabaselabel">@Html.LabelFor(m => m.hist_database_name, "History Database", new { style = "width: 300px" })</div>
                <div id="histdatabaseedit">@Html.DisplayFor(m => m.hist_database_name, new { style = "width: 300px" })</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseserverlabel">@Html.LabelFor(m => m.hist_database_server, "History Database Server", new { style = "width: 300px" })</div>
                <div id="histdatabaseserveredit">@Html.DisplayFor(m => m.hist_database_server, new { style = "width: 300px" })</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseusernamelabel">@Html.LabelFor(m => m.hist_database_username, "History Database Username", new { style = "width: 300px" })</div>
                <div id="histdatabaseusernameedit">@Html.DisplayFor(m => m.hist_database_username, new { style = "width: 300px" })</div>
            </div>
            <div class="form-group">
                <div id="histdatabasepasswordlabel">@Html.LabelFor(m => m.hist_database_password, "History Database Password", new { style = "width: 300px" })</div>
                <div id="histdatabasepasswordedit">@Html.DisplayFor(m => m.hist_database_password, new { style = "width: 300px" })</div>
            </div>
            <div class="form-group">
                    <br /><br />
                    @(Html.Kendo().Button()
                        .Name("buttonEditDatabase")
                        .Content("Edit")
                        .Events(events => { events.Click("editDatabase"); })
                    )
                </div>
            </div>
                );
        }))

如何让我的mvc局部视图布局显示在两列而不是一列使用kendo mvc

3 个答案: