Question

我已经以这种方式创建了一个创建模板的视图-

https://i.stack.imgur.com/sMnjC.png

它会自动生成这样的页面-

https://i.stack.imgur.com/lGeeZ.png

如何增加输入文本和表格的宽度？

我生成的register.cshtml如下-

@model LoginPart.Models.Person

@{
ViewBag.Title = "Register";
}

<h2>Register</h2>


@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>User1</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.userName, new { htmlAttributes = new { @class = "form-control col-md-10" } })
            @Html.ValidationMessageFor(model => model.userName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.userEmail, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.userEmail, new { htmlAttributes = new { @class = "form-control col-md-10" } })
            @Html.ValidationMessageFor(model => model.userEmail, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.userPass, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.userPass, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.userPass, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.userPhone, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.userPhone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.userPhone, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}



<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

Answer 1

您可以为页面添加自定义css文件。在布局cshtml

<head>
  @RenderSection("customcss", required: false)
</head>

在您的cshtml页面中

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section customcss
{
  <link href="~/Content/YourPage.css"  rel="stylesheet" type="text/css" />
}

在YourPage.css中（我的示例）

input{ width: 300px;}
form{ width: 80%; }

在site.css中注释掉设置的最大宽度 / 输入，选择，文本区域{ 最大宽度：280像素； } /

如何自定义asp.net MVC的创建模板视图？

1 个答案: