我怎样才能让我的MVC局部视图布局使用剑道MVC

Question

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

我有局部视图在两列，而不是一个显示

@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"); }) 
      ) 
     } 

} 

当它显示它看起来像这样...

什么，我想是，它实际上是在两列看起来像这样

关于如何做到这一点...也许使用的div的意见来完成布局的很好的教程，将不胜感激任何意见。

Answer 1

解决使用剑道（）分配器（）控制我的问题。

@(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> 
       ); 
     })) 

Answer 2

你在使用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 3

您可以使用columnizer jquery plugin。当行数为动态时有帮助

将您的表单组元素封装在某个div中并将插件应用于其中。

例如：

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