.net mvc htmlヘルパーでcss3を使用

Question

私が "正しく"検索したかどうかわからない前に、私は何を説明し、何も書いていないのに何も書いていないのですが、htmlヘルパーを使う必要があるからです。
私がしようとしているのは、ccs3カスタムチェックボックスを作成することです。私は複数のデザインが見つかりました。私はちょうどそれらに従いましたが、私はHtml.CheckBoxFor(..., htmlAttributes: new { id = "A Number"})を使用しています。 "A Number"はループを投げた単なる数字です。私は手作業ではしません。

私はHTMLヘルパーcheckboxforを使用して、私はそれを使用する場合は、この方法は、それは文句を言わない私がなぜわからないか、私はそれについてだけで混乱しています作業する場合、これは私がカスタムチェックボックスを処理する方法（1）

<p> 
      <input type="checkbox" value="..." id="@count" />     
       <label for="@count"><span class="ui"></span>Name</label> 
      </p> 

です。 （2）今

<p> 
      @Html.CheckBoxFor(m => m..., htmlAttributes: new { id = count }) 

      <label for="@count"><span class="ui"></span>...</label> 
     </p> 

私は（2）最初の時間は、それが動作しませんでしたし、私はそれが私からだと思ったが、私が試したとき、（1）それは不思議は私が提出したときにそれはdoesnのことを期待して働いてみましたチェックボックスの値を返します。私が検索したときに私はこれを見つけたAddind css classes to razor elementsからの応答darin-dimitrovは面白かったですが、私は私の見解ではLayout = "..."でそれを単に呼び出すカスタムテンプレートを使用します。答えのこの部分は私のためにflouです私はどのように私はこれを宣言するか、私はどのように呼び出すか、それが一意であるか、またはすべてを変更するかわかりません。
@Html.TextBox( "", ViewData.TemplateInfo.FormattedModelValue, ViewData )
CSS3のコード

/* 
    Custom Checkboxes 
*/ 

[type="checkbox"]:not(:checked), 
    input[type="checkbox"]:checked { 
     position: absolute; 
     left: -9999px; 
    } 

[type="checkbox"]:not(:checked) + label, 
    [type="checkbox"]:checked + label { 
     position: relative; 
     padding-left: 75px; 
     cursor: pointer; 
    } 

    [type="checkbox"]:not(:checked) + label:before, 
    [type="checkbox"]:checked + label:before, 
    [type="checkbox"]:not(:checked) + label:after, 
    [type="checkbox"]:checked + label:after { 
     content: ''; 
     position: absolute; 
    } 
    [type="checkbox"]:not(:checked) + label:before, 
    [type="checkbox"]:checked + label:before { 
     left:0; top: -3px; 
     width: 65px; height: 30px; 
     background: #DDDDDD; 
     border-radius: 15px; 
     -webkit-transition: background-color .2s; 
     -moz-transition: background-color .2s; 
     -ms-transition: background-color .2s; 
     transition: background-color .2s; 
    } 
    [type="checkbox"]:not(:checked) + label:after, 
    [type="checkbox"]:checked + label:after { 
     width: 20px; height: 20px; 
     -webkit-transition: all .2s; 
     -moz-transition: all .2s; 
     -ms-transition: all .2s; 
     transition: all .2s; 
     border-radius: 50%; 
     background: #7F8C9A; 
     top: 2px; left: 5px; 
    } 

    /* on checked */ 
    [type="checkbox"]:checked + label:before { 
     background:#34495E; 
    } 
    [type="checkbox"]:checked + label:after { 
     background: #39D2B4; 
     top: 2px; left: 40px; 
    } 

    [type="checkbox"]:checked + label .ui, 
    [type="checkbox"]:not(:checked) + label .ui:before, 
    [type="checkbox"]:checked + label .ui:after { 
     position: absolute; 
     left: 6px; 
     width: 65px; 
     border-radius: 15px; 
     font-size: 16px; 
     font-weight: bold; 
     line-height: 22px; 
     -webkit-transition: all .2s; 
     -moz-transition: all .2s; 
     -ms-transition: all .2s; 
     transition: all .2s; 
    } 
    [type="checkbox"]:not(:checked) + label .ui:before { 
     content: "non"; 
     left: 32px 
    } 
    [type="checkbox"]:checked + label .ui:after { 
     content: "oui"; 
     color: #39D2B4; 
    } 
[type="checkbox"]:focus + label:before { 
    border: 1px dashed #777; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-top: -1px; 

UPDATE
ビュー

@model WebAppWithEF.Models.MainModel 
@using WebAppWithEF.Models; 

@{ 
    ViewBag.Title = "Page Title"; 
    Layout = "~/Views/Shared/_TemplateRest.cshtml"; 
} 

@using (Html.BeginForm(null, "Export", new { entity_name = Model.which_entity_to_show }, FormMethod.Post, null)) 
{ 
    <div> 
     <span class="text-uppercase">Nom Définition </span> 
     @Html.EditorFor(m => m.exportDefinition.name, new { htmlAttributes = new { maxlength = "50" } }) <br /> 
     @if (Model.is_any_checked == false) 
     { 
      @Html.Label("Error MSG", htmlAttributes: new { @class = "text-danger" }) <br/> 
     } 
     <br /> 
     @for (int count = 0; count < Model.selectedFields.Count(); count++) 
     { 
      <p> 
       @Html.CustomCheckBoxFor(m => m.selectedFields[count].propertyStatus) 
       @Html.CustomLabelFor(m => m.selectedFields[count].propertyStatus, Model.selectedFields[count].propertyName, "<span class=\"ui\"></span>", new { @class = "class" }) 
      </p> 
       @Html.HiddenFor(m => m.selectedFields[count].propertyStatus) 
       @Html.HiddenFor(m => m.selectedFields[count].propertyName) 
     } 

     @Html.HiddenFor(m => m.exportDefinition.pkey) 
     @Html.HiddenFor(m => m.exportDefinition.entityID) 

     <div class="col-md-offset-0 col-md-10"> 
      <div class="contact-button"> 
       <button name="SaveDefinition" onclick="submit()">Enregistrer/Modifier</button> 
      </div> 
     </div> 

     <div class="col-md-offset-0 col-md-10"> 
      <div class="contact-button"> 
       <button name="SpecificExport" onclick="submit()">Exporter</button> 
      </div> 
     </div> 

     @if (!Model.is_new) 
     { 
      <div class="col-md-offset-0 col-md-10"> 
       <div class="contact-button"> 
        <button name="DeleteDefinition" onclick="submit()">Supprimer</button> 
       </div> 
      </div> 
     } 

     <div class="col-md-offset-0 col-md-10"> 
      <div class="contact-button"> 
       <button onclick="@Url.Action("Index", "Home" , new { entity_name = ViewBag.entity_name })">Retour</button> 
      </div> 
     </div> 
    </div> 
} 

Answer 1

私は、更新後にモデルとビューを一致させるために、ここでいくつかのコードで別の答えを投稿します。

更新後、いくつか質問があります。 次のように私は自分のコードを変更しました：

ビューにモデルを渡す

public ActionResult Team() 
{ 
    var model = new TeamChoice(); 
    model.exportDefinition = new exportDefinition() 
    { 
     entityID = "8831A386-18D6-4EAE-919E-9C1D316CC2DD", 
     name = "EntryName", 
     pkey = "PKeyu" 
    }; 

    model.is_any_checked = true; 
    model.which_entity_to_show = "MineEntry"; 
    model.is_new = false; 
    model.selectedFields = new List<Field>(); 
    for (int i = 1; i <= 15; i++) 
    { 
     model.selectedFields.Add(new Field() 
     { 
      propertyName = "Property" + i, 
      propertyStatus = i % 2 == 0 ? false : true 
     }); 
    } 

    return this.View(model); 
} 

[HttpPost] 
public ActionResult Team(TeamChoice model) 
{ 
    // this.Request.Form: 
    // exportDefinition.name=EntryName&selectedFields[0].propertyStatus=true& 
    // selectedFields[0].propertyStatus=False&selectedFields[0].propertyName=Property1& 
    // selectedFields[1].propertyStatus=true&selectedFields[1].propertyStatus=False& 
    // selectedFields[1].propertyName=Property2&selectedFields[2].propertyStatus=true& 
    // selectedFields[2].propertyStatus=False&selectedFields[2].propertyName=Property3& 
    // selectedFields[3].propertyStatus=False&selectedFields[3].propertyName=Property4& and so on.... 
    // First tree fields in the collection will have status "true" 
    var propertyStatus1 = model.selectedFields[0].propertyStatus; 
    var propertyStatus2 = model.selectedFields[1].propertyStatus; 
    var propertyStatus3 = model.selectedFields[2].propertyStatus; 

    return this.RedirectToAction("Team"); 
} 

あなたは任意のフィールドのpropertyStatusに「true」に設定しますか？次に、最初のツリーチェックボックスを「Oui」にチェックしてフォームを送信すると、次のようなフォームデータがあることを確認できますか？

selectedFields[0].propertyStatus=true& selectedFields[1].propertyStatus=true& selectedFields[2].propertyStatus=true& selectedFields[3].propertyStatus=false ....

UPDATEは以下のコードにあなたのチェックボックス拡張を更新し。 TrueをpropertyStatusに渡すと、HTMLのチェックボックスがチェックされます。

public static MvcHtmlString CustomCheckBoxFor<TModel>(
     this HtmlHelper<TModel> htmlHelper, 
     Expression<Func<TModel, bool>> expression, 
     object htmlAttributes = null) 
{ 
    var expressionText = ExpressionHelper.GetExpressionText(expression); 
    var htmlAtributesDictionary = new RouteValueDictionary(htmlAttributes); 

    TagBuilder input = new TagBuilder("input"); 
    input.Attributes.Add("type", "checkbox"); 
    input.Attributes.Add("name", expressionText); 
    input.Attributes.Add("id", expressionText); 
    input.Attributes.Add("value", "True"); 
    input.Attributes.Add("data-val", "True"); 

    ModelMetadata modelMetadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); 
    bool value; 
    if (modelMetadata.Model != null && bool.TryParse(modelMetadata.Model.ToString(), out value)) 
    { 
     if (value) 
     { 
      input.Attributes.Add("checked", "checked"); 
     } 
    } 


    MvcHtmlString result = MvcHtmlString.Create(input.ToString()); 
    return result; 
} 

と交換してください、あなたのビューで@Html.HiddenFor(m => m.selectedFields[count].propertyStatus)

Answer 2

問題の一つは、その@Html.CheckBoxFor(....た見解で、必要であれば、私は説明を提供することができます隠れた入力を生成しますあなたのCSSルールを混乱させる。次にhtmlAttributesにidを追加しないでください。また、ラベル内にspanというタグが必要です。

追加情報：Hidden input checkbox for、 Include inner element with HTML helper

解決策：

UPDATE：チェックボックス拡張

チェックボックス拡張機能の実装もう隠さ不要入力タイプ2つの@Html.LabelFor()の拡張機能や@Html.CheckBoxForを作ります

public static class CheckboxExtensitons 
{ 
    public static MvcHtmlString CustomCheckBoxFor<TModel, TValue>(
     this HtmlHelper<TModel> htmlHelper, 
     Expression<Func<TModel, TValue>> expression, 
     object htmlAttributes = null) 
    { 
     var expressionText = ExpressionHelper.GetExpressionText(expression); 
     var htmlAtributesDictionary = new RouteValueDictionary(htmlAttributes); 
     // TagBuilder hidden = new TagBuilder("input"); 
     // hidden.Attributes.Add("type", "hidden"); 
     // hidden.Attributes.Add("name", expressionText); 
     // hidden.Attributes.Add("value", "false"); 

     TagBuilder input = new TagBuilder("input"); 
     input.Attributes.Add("type", "checkbox"); 
     input.Attributes.Add("name", expressionText); 
     input.Attributes.Add("id", expressionText); 
     input.Attributes.Add("value", "true"); // update 
     input.MergeAttributes(htmlAtributesDictionary); 

     MvcHtmlString result = MvcHtmlString.Create(input.ToString()); 
     return result; 
    } 
} 

ラベル拡張機能の実装

public static class LabelExtensions 
{ 
    public static MvcHtmlString CustomLabelFor<TModel, TPropery>(
     this HtmlHelper<TModel> htmlHelper, 
     Expression<Func<TModel, TPropery>> expression, 
     string labelValue, 
     string innerHtml, 
     object htmlAttributes = null) 
    { 
     TagBuilder tag = new TagBuilder("label"); 
     var htmlAtributesDictionary = new RouteValueDictionary(htmlAttributes); 
     //Add the specified Html attributes 
     tag.MergeAttributes(htmlAtributesDictionary); 

     var expressionText = ExpressionHelper.GetExpressionText(expression); 
     tag.Attributes.Add("for", expressionText); 
     tag.InnerHtml = innerHtml + labelValue; 
     return MvcHtmlString.Create(tag.ToString()); 
    } 
} 

私はこのモデル、ビューとコントローラのアクションでテストの追加：

モデル：

public class TeamChoice 
{ 
    public bool TeamCap { get; set; } 

    public bool TeamIronMan { get; set; } 
} 

の

アクション：

public ActionResult Team() 
{ 
    var model = new TeamChoice(); 
    return this.View(model); 
} 

[HttpPost] 
public ActionResult Team(TeamChoice model) 
{ 
    return this.RedirectToAction("Team"); 
} 

ビュー：

@model TeamChoice 
@using Namespace.OfExtensions; // Important! 
@using (Html.BeginForm("Team","Home", FormMethod.Post, null)) 
{ 
    <p> 
     @Html.CustomCheckBoxFor(a => a.TeamCap) 
     @Html.CustomLabelFor(m => m.TeamCap, "Team Cap", "<span class=\"ui\"></span>", new { @class = "class" }) 
    </p> 
    <p> 
     @Html.CustomCheckBoxFor(m => m.TeamIronMan) 
     @Html.CustomLabelFor(m => m.TeamIronMan, "Team Iron Man", "<span class=\"ui\"></span>", new { @class = "class" }) 
    </p> 
<input type="submit" /> 
}