按钮组变成剃须刀语法

Question

我想知道我是否可以在我的 asp.net mvc 应用程序中将我的 div 按钮组 (btn-group) 转换为 razor 语法？我想要剃刀语法，所以我可以在进入页面时预选和预激活按钮标签。如果不需要剃须刀，那么有人可以告诉我如何在从我的视图模型数据输入的页面上激活和选择按钮吗？似乎没有剃须刀我必须将我的视图模型数据传递给 javascript 才能执行，但这似乎不对。这是我的 html

<div class="form-group">
                @Html.LabelFor(model => model.Listing.SpaceType, htmlAttributes: new { @class = "control-label" })
                
                <div class="btn-group form-control" data-toggle="buttons" id="SpaceType">
                    <label id="SpaceTypeLabel0" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="0"> House
                    </label>
                    <label id="SpaceTypeLabel1" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
                    </label>
                    <label id="SpaceTypeLabel2" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
                    </label>
                    <label id="SpaceTypeLabel3" class="btn btn-primary">
                        <input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
                    </label>
                </div>
            </div>

这是我的模型

public class Space
{
    public int SpaceId { get; set; }

    public virtual SpaceOverview Overview { get; set; }

    public virtual SpaceDetails Details { get; set; }

    public virtual SpaceListing Listing { get; set; }

    public virtual SpaceAddress Address { get; set; }

    [Required]
    public DateTime DateCreated { get; set; }
}

空间列表是

public class SpaceListing
{
    [Key, ForeignKey("SpaceOf")]
    public int SpaceListingId { get; set; }

    public SpaceType SpaceType { get; set; }

    public SpaceLocation SpaceLocation { get; set; }

    public SpaceAccommodation Accommodation { get; set; }

    public Space SpaceOf { get; set; } // one-to-one
}

空间类型是

public enum SpaceType
{
    Home,
    Apartment,
    Studio,
    Park,
    Beach,
    Field,
    Backyoard,
    FrontYard,
    Other
}

Answer 1

目前您正在创建一组带有 name="typeoptions" 的单选按钮，它们与模型没有任何关系，您甚至没有给单选按钮一个值属性，所以无论如何都不会 post 返回。

语法应该是

@Html.RadioButtonFor(m => m.Listing.SpaceType, "House", new { id = "House" })
@Html.Label("House")
@Html.RadioButtonFor(m => m.Listing.SpaceType, "Apartment", new { id = "Apartment" })
@Html.Label("Apartment")
...

为了使这更容易，您可以创建一个扩展方法

public static class RadioButtonHelper
{
  public static MvcHtmlString EnumRadioButtonListFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression)
  {
    ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
    string name = ExpressionHelper.GetExpressionText(expression);
    Type type = Nullable.GetUnderlyingType(metaData.ModelType);
    if (type == null || !type.IsEnum)
    {
      throw new ArgumentException(string.Format("The property {0} is not an enum", name));
    }
    StringBuilder html = new StringBuilder();
    foreach (Enum item in Enum.GetValues(type))
    {
      string id = string.Format("{0}_{1}", metaData.PropertyName, item);
      StringBuilder innerHtml = new StringBuilder();
      innerHtml.Append(helper.RadioButtonFor(expression, item, new { id = id }));
      innerHtml.Append(helper.Label(id, item.ToDescription()));
      TagBuilder div = new TagBuilder("div");
      div.AddCssClass("radiobutton");
      div.InnerHtml = innerHtml.ToString();
      html.Append(div.ToString());
    }
    TagBuilder container = new TagBuilder("div");
    container.AddCssClass("radiobutton-container");
    container.InnerHtml = html.ToString();
    return MvcHtmlString.Create(container.ToString());
  }
}

注意，这里使用了下面的扩展方法

public static string ToDescription(this Enum value)
{
  FieldInfo field = value.GetType().GetField(value.ToString());
  DescriptionAttribute[] attributes = (DescriptionAttribute[])field.GetCustomAttributes(typeof(DescriptionAttribute), false);
  if (attributes.Length > 0)
  {
    return attributes[0].Description;
  }
  return value.ToString();
}

它允许您使用 'friendly' 名称修饰枚举值

public enum SpaceType
{
  Home,
  [Description("2 bed apartment")]
  Apartment,
  ....
}

并在视图中

@Html.EnumRadioButtonListFor(m => m.Listing.SpaceType)

按钮组变成剃须刀语法

button group into razor syntax

html

asp.net-mvc

razor