asp.net-mvc如何可以得到我的 mvc 分部视图布局,而不是一个两列中显示使用剑道 mvc

发布时间: 2016/10/8 1:50:51
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

可以在 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 在视图中完成布局将不胜感激。

解决方法 1:

解决我的问题,使用 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>
                );
        }))
赞助商