如何为" asp-for"传递字符串值?在asp net 5

时间:2015-12-15 06:44:08

标签: c# asp.net asp.net-mvc razor tag-helpers

我想为具有许多要编辑的属性的实体编写Edit.cshtml文件,因此我必须多次编写以下代码:

<div class="form-group">
    <label asp-for="Email" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
</div>

实际上,有很多实体,所以我必须编写许多Edit.cshtml文件。我想做一些简化

我想在控制器中选择实体的一些属性,并使用循环来显示视图中的属性。例如: 在控制器文件中:

public IActionResult Edit(string id)
{
    var model = GetModel(id);
    var propertyNames= new List<string>()
    {
        "Name",
        "Email"
        // add some other property names of the entity 
    };
    ViewData["PropertyList"] = propertyNames;
    return View(model);
}

在视图文件中:

@{
    var propertyNames = (List<string>)ViewData["PropertyList"];
    foreach (string item in propertyNames)
    {
        <div class="form-group">
            <label asp-for="@(item)" class="col-md-2 control-label"></label>
            <div class="col-md-3">
                <input asp-for="@(item)" class="form-control" />
                <span asp-validation-for="@(item)" class="text-danger"></span>
            </div>          
        </div>
    }
}

但它无法正常工作,因为它会生成错误的代码。似乎我无法传递&#34; asp-for&#34;的字符串值。标签助手。

例如,如果我将top的代码更改为:

@{
    string e = "Email";
    <div class="form-group">
        <label asp-for="@e" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="@e" class="form-control" />
            <span asp-validation-for="@e" class="text-danger"></span>
        </div>
    </div>
}

上面的代码会生成:

<div class="form-group">
    <label class="col-md-2 control-label" for="e">e</label>
    <div class="col-md-10">
        <input class="form-control" type="text" id="e" name="e" value="Email" />
        <span class="text-danger field-validation-valid" data-valmsg-for="e" data-valmsg-replace="true"></span>
    </div>
</div>

预期的代码是:

<div class="form-group">
    <label class="col-md-2 control-label" for="Email">Email</label>
    <div class="col-md-10">
        <input class="form-control" type="email" data-val="true" data-val-email="Email &#x5B57;&#x6BB5;&#x4E0D;&#x662F;&#x6709;&#x6548;&#x7684;&#x7535;&#x5B50;&#x90AE;&#x4EF6;&#x5730;&#x5740;&#x3002;" data-val-required="Email &#x5B57;&#x6BB5;&#x662F;&#x5FC5;&#x9700;&#x7684;&#x3002;" id="Email" name="Email" value="" />
        <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
</div>

我该怎么办?

剃须刀有可能吗?

4 个答案:

答案 0 :(得分:6)

好的,我设法让这个工作。 免责声明:这是超级hacky,我不知道我是否以最好的方式完成了它。我所知道的是,它做了你想做的事,它可能会指出你正确的方向。

首先,我创建了一个模型:

using System.ComponentModel.DataAnnotations;

namespace WebApplication1.Models
{
    public class TestModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }
    }
}

然后,我制作了一个自定义标签助手。这是“神奇”发生的可怕部分。特别是Process方法的第一部分......

using Microsoft.AspNet.Mvc.Rendering;
using Microsoft.AspNet.Mvc.ViewFeatures;
using Microsoft.AspNet.Razor.TagHelpers;
using System.Linq;

namespace WebApplication1.TagHelpers
{
    [HtmlTargetElement("edit")]
    public class EditTagHelper : TagHelper
    {
        [HtmlAttributeName("asp-for")]
        public ModelExpression aspFor { get; set; }

        [ViewContext]
        [HtmlAttributeNotBound]
        public ViewContext ViewContext { get; set; }

        protected IHtmlGenerator _generator { get; set; }

        public EditTagHelper(IHtmlGenerator generator)
        {
            _generator = generator;
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var propName = aspFor.ModelExplorer.Model.ToString();
            var modelExProp = aspFor.ModelExplorer.Container.Properties.Single(x => x.Metadata.PropertyName.Equals(propName));
            var propValue = modelExProp.Model;
            var propEditFormatString = modelExProp.Metadata.EditFormatString;

            var label = _generator.GenerateLabel(ViewContext, aspFor.ModelExplorer,
                propName, propName, new { @class = "col-md-2 control-label", @type = "email" });

            var input = _generator.GenerateTextBox(ViewContext, aspFor.ModelExplorer,
                propName, propValue, propEditFormatString, new { @class = "form-control" });

            var validation = _generator.GenerateValidationMessage(ViewContext, aspFor.ModelExplorer, 
                propName, string.Empty, string.Empty, new { @class = "text-danger" });

            var inputParent = new TagBuilder("div");
            inputParent.AddCssClass("col-md-10");
            inputParent.InnerHtml.Append(input);
            inputParent.InnerHtml.Append(validation);

            var parent = new TagBuilder("div");
            parent.AddCssClass("form-group");
            parent.InnerHtml.Append(label);
            parent.InnerHtml.Append(inputParent);

            output.Content.SetContent(parent);
            base.Process(context, output);
        }
    }
}

NB :要使自定义TagHelper正常工作,您需要在_ViewImports.cshtml文件中添加一行,如下所示(用您的命名空间替换WebApplication1):

@addTagHelper "*, WebApplication1"

我将操作改为此操作,以便与您的操作相匹配(也许您可以使用反射来获取模型属性名称?):

public IActionResult Index()
{
    var propertyNames = new List<string>()
    {
        "Name",
        "Email"
    };
    ViewData["PropertyList"] = propertyNames;

    var m = new TestModel()
    {
        Name = "huoshan12345",
        Email = "test@test.net"
    };
    return View(m);
}

最后,在视图中,您可以执行以下操作:

<div class="row">
    @using (Html.BeginForm())
    {
        var propertyNames = (List<string>)ViewData["PropertyList"];
        foreach (string item in propertyNames)
        {
            <edit asp-for="@item"></edit>
        }
        <input type="submit" value="Submit" />
    }
</div>

答案 1 :(得分:1)

您也可以尝试以下方法:

 foreach (string item in propertyNames){
     @Html.TextBox(item, value: null, htmlAttributes: new { @class = "form-control" })      
}

答案 2 :(得分:0)

是的,可以用剃须刀写它。 认为这会对你有所帮助。如果你没有输入&#34;键入&#34;属性它将使用type='text'生成它。您也可以硬编码data-val属性,但不建议只更换&#39; - &#39;用&#39; _&#39;例如:@data_val_email

<div class="form-group">
  @Html.LabelFor(x=>x.Email)
  <div class="col-md-10">
     @Html.TextBoxFor(x => x.Email, new { @class = "form-control", @type = "email" })
      @Html.ValidateFor(x=>x.Email)
  </div>
</div>

答案 3 :(得分:0)

这是一种相关技术。我扩展了标签帮助程序,以将所需的HTML注入页面。这项工作有点像ASP.NET MVC EditorTemplate。

这是用于注入特殊局部视图的自定义标签帮助程序

public class MyFormGroupTagHelper : PartialTagHelper
{
    public MyFormGroupTagHelper(ICompositeViewEngine viewEngine, IViewBufferScope viewBufferScope) : base(viewEngine, viewBufferScope)
    { }

    public ModelExpression Property { get; set; }

    public string LabelText { get; set; } = null;

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        this.For = Property;
        this.Name = "_FormGroup";
        // Have to use Viewdata to pass information to the partial view, because the model is the single property of the entity that will be posted back to the controller
        this.ViewData["TH_LabelText"] = LabelText;
        this.ViewData["TH_DataTypeName"] = Property.Metadata.DataTypeName;
        await base.ProcessAsync(context, output);
    }
}

这是_FormGroup.cshtml的局部视图。这将为具有Bootstrap样式的表单上的单个字段生成标记。如果该字段是日期,它还将“ datepicker”类附加到输入标签。注意,如何用@Model填充as-for,以便可以将同一视图绑定到任何实体模型上的任何属性

@model object

@{
    string LabelText = (string)@ViewData["TH_LabelText"];
    string DataTypeName = (string) ViewData["TH_DataTypeName"];
    bool IsDate = (DataTypeName == "Date");
}

<div class="form-group row">
    @if (LabelText != null)
    {
    <label asp-for="@Model" class="control-label col-md-4">@LabelText</label>
    }
    <div class="col-md-8">
        <input asp-for="@Model" class="form-control @( IsDate ? "datepicker" : "")"  />
        <span asp-validation-for="@Model" class="text-danger"></span>
    </div>
</div>

现在,在模型为业务实体的“创建”或“编辑”视图中,您可以创建代码来编辑实体上的单个属性,如下所示。

<my-form-group label-text="Result date" property="ResultDate" view-data="ViewData" ></my-form-group>

在这种情况下,模型是一个类,其字段名为ResultDate的定义如下:

    [DataType(DataType.Date)]
    public DateTime? ResultDate { get; set; }

请注意,您必须设置view-data属性才能将ViewData对象传递到标签帮助器中。它使用ViewData将信息传递到局部视图。这不是理想的选择,但我想不出任何其他方式将信息传递到局部视图。我为键添加了“ TH_”前缀,以防止标签助手覆盖Viewdata中的其他任何值。