我怎樣才能讓我的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 });