web-dev-qa-db-ja.com

MVC 6で、チェックボックスリストをビューにコーディングし、チェックした値をコントローラーに渡す方法は？

申し訳ありませんが、ほとんどの検索で古いMVCコードが表示されます。どんな助けでもありがたいです。

タグヘルパーを使用するMVC6では、一連のチェックボックスをどのようにコーディングしますか？

  • ラベルにタグヘルパーを使用して、クリックするとチェックされた値が切り替わります
  • チェックした値をIsOptionSelectedプロパティに保存（バインドしますか？）
  • [送信]をクリックした後、これらのチェックされた値をコントローラーに戻します

？

ラベル付きのチェックボックスを正しく表示できましたが、チェックした値をモデルを介してコントローラーに戻す方法がわかりません。現在、IsOptionSelected値はfalseとして返されています。

また、ラベルのhtmlヘルパーを機能させることはできましたが、タグヘルパーを機能させることはできませんでした。私もこれらをすべて間違ってコーディングしている可能性があるので、ヒントが役立ちます！

これが私がこれまでに持っているものです：

表示：

Phone Options Checkboxes

エンティティ：

public class PhoneOption
{
    public bool IsOptionSelected { get; set; } = false;
    public int OptionId { get; set; }
    public string OptionName { get; set; }
}

モデル：

[Display(Name = "Phone Options")]
public IEnumerable<PhoneOption> PhoneOptions { get; set; }

. . . .
PhoneOptions = repository.GetPhoneOptions();

リポジトリ：

public IEnumerable<PhoneOption> GetPhoneOptions()
{
    IEnumerable<PhoneOption> options = new[]
    {
        new PhoneOption { OptionId = 1, OptionName = "Phone Case",       IsOptionSelected = false },  
        new PhoneOption { OptionId = 2, OptionName = "Screen Protector", IsOptionSelected = false },
        new PhoneOption { OptionId = 3, OptionName = "Car Charger",      IsOptionSelected = false },
        new PhoneOption { OptionId = 4, OptionName = "Extra Cable",      IsOptionSelected = false }
    };
    return options;
 }

表示：

<div class="form-group">
    <label class="control-label">Phone Options</label>
    <div>
        @foreach (var option in Model.PhoneOptions)
        {
            <div>
                @{ string cbId = "PhoneOption_" + @option.OptionId; }
                <input [email protected] type="checkbox" [email protected] id=@cbId name=@cbId />
                @Html.Label(@cbId.ToString(), @option.OptionName)
                @*This is causing invalid operation exception*@
                @*<label [email protected]()>@option.OptionName</label>*@ 
                <span asp-validation-for=@cbId class="text-danger" role="alert"></span>
            </div>
        }
    </div>    
</div>

前もって感謝します！

c#checkboxasp.net-core-mvctag-helpers
9
niki b

これがついに私がそれを機能させるためにしたことです。これが最善の方法かどうかはわかりません。タグヘルパーが機能しないため、HTMLヘルパーを使用する必要がありました。

モデル：

public List<PhoneOption> PhoneOptions { get; set; }
. . .
PhoneOptions = repository.GetPhoneOptions().ToList();

表示：

@if (@Model.PhoneOptions != null && @Model.PhoneOptions.Count() > 0)
{
    for (int i = 0; i < @Model.PhoneOptions.Count(); i++)
    {
        <div>
            <input asp-for="@Model.PhoneOptions[i].IsOptionSelected" type="checkbox" />
            <label asp-for="@Model.PhoneOptions[i].IsOptionSelected">@Model.PhoneOptions[i].OptionName</label>

            @*If these are not included, all OptionIds become 0 and all OptionName becomes null*@
            @Html.HiddenFor(x => @Model.PhoneOptions[i].OptionId)
            @Html.HiddenFor(y => @Model.PhoneOptions[i].OptionName)
        </div>
    }    
}

これが、同じチェックボックスリストの問題を抱えている他の誰かに役立つことを願っています。

PDATE：上記のヘルパーにタグを付けるようにhtmlヘルパーを更新しました。

9
niki b

これは、構文が各forにどのように含まれるべきかですasp-for引用符付きの文字列でラップする必要があります

 @foreach (var option in Model.PhoneOptions)
        {
            <div>
                @{ string cbId = "PhoneOption_" + @option.OptionId; }
                <input asp-for="@option.IsOptionSelected" type="checkbox" value="@option.IsOptionSelected" id="@cbId" name="@cbId" />
                @Html.Label(@cbId.ToString(), @option.OptionName)
                @*This is causing invalid operation exception*@
                @*<label asp-for="@cbId">@option.OptionName</label>*@ 
                <span asp-validation-for="@cbId" class="text-danger" role="alert"></span>
            </div>
        }
0
Amete Blessed