asp net 5で「asp-for」の文字列値を渡すにはどうすればよいですか
編集する多くのプロパティを持つエンティティの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>
}
}
ただし、間違ったコードが生成されるため、機能しません。「asp-for」タグヘルパーに文字列値を渡すことができないようです。
たとえば、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 字段不是有效的电子邮件地址。" data-val-required="Email 字段是必需的。" id="Email" name="Email" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
どうすればよいですか？
かみそりでそれは可能ですか？
わかった、なんとかこれを機能させることができた。 免責事項：非常にハッキーで、最善の方法で行ったかどうかはわかりません。私が知っているすべてはそれがあなたが望むことをし、それがあなたを正しい方向に向けるかもしれないということです。
最初に、私はモデルを作成しました：
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 = "[email protected]"
};
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>
これが関連するテクニックです。タグヘルパーを拡張して、必要な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」クラスが入力タグにアタッチされます。asp-forが@Modelが入力されているため、この同じビューを任意のエンティティモデルの任意のプロパティにバインドできます
@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; }
ViewDataオブジェクトをタグヘルパーに渡すには、view-data属性を設定する必要があることに注意してください。 ViewDataを使用して部分ビューに情報を渡します。これは理想的ではありませんが、部分ビューに情報を渡す他の方法は考えられませんでした。タグヘルパーがViewdataの他の値を上書きしないように、キーの前に「TH_」を付けました。
はい、かみそりで書くことは可能です。これはあなたを助けると思います。 「type」属性を指定しない場合は、type='text'で生成されます。 data-val属性をハードコーディングすることもできますが、「-」を「_」に置き換えるだけではお勧めできません。例：@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>