Question

所以，我正在一个可视化数据的网站上工作。我试图用部分视图创建它。当我单击选项卡以显示饼图时，饼图显示在页面底部。我希望能够出现＆＃34; navResult＆＃34;。。当我在段落元素中键入blah blah时，它会保留在＆＃34; navResult＆＃34; DIV。我不确定它的剑道会覆盖样式表还是什么。编辑：此外，当单击PartialView链接并且H2或其他标题元素位于该partialview中时，导航栏和标题之间会产生间隙。 ex =

<!DOCTYPE html>
<html> 
    <head>
        <title>@ViewBag.Title - My Telerik MVC Application</title>
        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")

        <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
        <link rel="stylesheet" type="text/css" href="~/Content/MainPage.css" />
</head>
    <body>
        <div class="page-header3">
            <img src="~/Images/MMMlogo.png" height="25" width="25" />
            <div class="header-content">
                <p>
                    THIS IS BARELY ANY INFORMATION IN THE HEADER
                </p>
            </div>
        </div>
        <div class="Main-Content4">
            <div>
                <button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".nav">
                    <snap class="icon-bar"></snap>
                    <snap class="icon-bar"></snap>
                    <snap class="icon-bar"></snap>
                </button>
            </div>
            <div class="nav3">
                <ul>
                    <li>
                        @Ajax.ActionLink("Robot", "Robot", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })
                    </li>
                    <li>
                        @Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })
                    </li>
                    <li>
                        @Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })
                    </li>
                </ul>
            </div>
            <div id="navResult">
                this will represent info from the nav bar

            </div>
        </div>
            @RenderBody()
</body>
</html>

模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace RobotUI.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Robot()
        {
            return PartialView();
        }
        public ActionResult Client()
        {
            return PartialView();
        }
        public ActionResult Data()
        {
            return PartialView();
        }
    }
}

我试图点击的视图是Robot ...

@{
    ViewBag.Title = "Robot";
}
    @(Html.Kendo().Chart()
        .Name("chart")
                .Title(title => title
                    .Text("Share of Internet Population Growth, 2007 - 2012")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chart => chart
            .Background("transparent")
         )
        .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new {category="Asia",value=53.8,color="#9de219"},
                new {category="Europe",value=16.1,color="#90cc38"},
                new {category="LatinAmerica",value=11.3,color="#068c35"},
                new {category="Africa",value=9.6,color="#006634"},
                new {category="MiddleEast",value=5.2,color="#004d38"},
                new {category="NorthAmerica",value=3.6,color="#033939"}
            })
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )

这是css文件

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    overflow:auto;
    background-color:#f1f1f1;
}
li{
    text-align: center;
}

li:last-child{
    border-bottom: none;
}

li a{
display:block;
color:#000;
padding: 8px 16px;
text-decoration: none;
}

li a:hover{
    background-color: #555;
    color:white;
}
body, html {
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}

div.page-header {
    margin: 0;
    width: 100%;
    top: 0px;
    height: 10%;
    box-sizing: border-box;
    background-color: #ffe3e2;
}

div.header-content {
}

div.Main-Content {
    width: 100%;
    height: 100%;
}

div.nav {
    height: 100%;
    width: 20%;
    float: left;
}
.KendoView
{
    vertical-align:top;
}

div.navResult {
    height: 100%;
    width: 80%;
    float: right;
    background-color: #705756;
}

Answer 1

要修复这些类型的样式问题，我建议您将控件放在容器标记（例如span或div）中，并应用所需的样式。

以下是一个例子：

@{
    ViewBag.Title = "Robot";
}
<div style="vertical-align: top;">
    @(Html.Kendo().Chart()
        .Name("chart")
                .Title(title => title
                    .Text("Share of Internet Population Growth, 2007 - 2012")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chart => chart
            .Background("transparent")
         )
        .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/Content/shared/world-map.png") })
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new {category="Asia",value=53.8,color="#9de219"},
                new {category="Europe",value=16.1,color="#90cc38"},
                new {category="LatinAmerica",value=11.3,color="#068c35"},
                new {category="Africa",value=9.6,color="#006634"},
                new {category="MiddleEast",value=5.2,color="#004d38"},
                new {category="NorthAmerica",value=3.6,color="#033939"}
            })
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>

基本上，我将您的小部件放在div标记内，并在其上应用float样式。您可以使用其他样式属性，例如边距。更好的解决方案是在样式表中定义一个类，并使用div标记中的class属性。

Kendo Widget没有留在partialview

1 个答案: