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

【问题标题】：How to customize the create template view of asp.net MVC?如何自定义asp.net MVC的创建模板视图？
【发布时间】：2019-08-12 05:25:32
【问题描述】：

我已经创建了一个像这样创建模板的视图-

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")

【问题讨论】：

标签： asp.net-mvc razor model-view-controller asp.net-mvc-5

【解决方案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 中注释掉 set max-width /输入，选择，文本区域 { 最大宽度：280px； }/

【讨论】：

还是和以前一样！
你把css文件放在哪里了，应该放在Content文件夹吗？
我创建了另一个名为 css 的文件夹，并将 mystyle.css 文件放在那里
你能分享你的css文件吗
无论我为表单视图或输入元素设置的值都不会超过 280 像素！即使我放 500px 它也不会做出任何改变！但如果我输入的值小于 280，那么框会减小