如何自定义asp.netMVC的create template view？

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%; }

注释掉 set max-width in site.css /输入， select, 文本区域{ 最大宽度：280px； }/

如何自定义asp.netMVC的create template view？

How to customize the create template view of asp.net MVC?

model-view-controller

asp.net-mvc

razor

asp.net-mvc-5