BForms exposes two ways of building input elements using Razor HTML extension methods: the first way of doing this is through the BsControlAttribute in combination with BsInputFor helper, the BsInputFor will render the specified input type based on the selected value of the BsControlType enum. Another way is to use a specialized helper like BsTextBoxFor, BsTextAreaFor and so on.

We recommend you use the generic BsInputFor helper, this declarative approach makes the Model the place where you can decide the behavior of your form. When you need to change the output of a certain model property all you need to do is change the BsControlType designated for that property - this way you don't have to modify the view at all.

In ASP.NET MVC the behavior of a certain property is determined by mixing attributes like Description, DataType and Required with specialized helpers like TextBoxFor. BFroms tries to simplify this process by only using attributes and a generic helper. In order to maintain compatibility with MVC, BForms will expose the same specialized helpers as MVC does, so if you don’t like the declarative approach you can still use BForms.

Input Extensions

public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, TProperty>> expression)
	
public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, TProperty>> expression, 
	object htmlAttributes)
	
public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper,
	Expression<Func<TModel, TProperty>> expression, 
	IDictionary<string, object> htmlAttributes)
		
public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper, 
	Expression<Func<TModel, TProperty>> expression, 
	string format)
	
public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper, 
	Expression<Func<TModel, TProperty>> expression, 
	string format, 
	object htmlAttributes)
		
public static MvcHtmlString BsInputFor<TModel, TProperty>(
	this HtmlHelper<TModel> htmlHelper, 
	Expression<Func<TModel, TProperty>> expression, 
	string format, 
	IDictionary<string, object> htmlAttributes)

Input helper

In order to render text inputs you will need to use the @Html.BsInputFor helper extension and decorate your model property with BsControlAttribute and DisplayAttribute. You can choose from standard HTML inputs like Text, Password, TextArea or HTML5-flavored inputs like Email, Url, Number, Color.

All the text inputs rendered by @Html.BsInputFor support placeholder and description tooltip. The placeholder text is extracted from the Prompt property of the Display attribute, while the description tooltip uses the Description property.

Besides text inputs, the BsInputFor helper can render the following types: Checkbox, Radio, Date, Time, Datetime and File.

Example

Model

public class RegisterModel
{
    [Required]
    [BsControl(BsControlType.Email)]
    [Display(Name = "Email", Prompt = "email@example.com", Description = "A verification...")]
    public string Email { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Email)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Envelope)
        @Html.BsInputFor(m => m.Email)
        @Html.BsValidationFor(m => m.Email)
    </div>
</div>

TextBox Input

In order to render a text input of type text you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.TextBox)].

Example

Model

public class RegisterModel
{
    [Required]
    [BsControl(BsControlType.TextBox)]
    [Display(Name = "Name", Prompt = "Surname and name")]
    public string Name { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Name)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.User)
        @Html.BsInputFor(m => m.Name)
        @Html.BsValidationFor(m => m.Name)
    </div>
</div>
Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the specialized helper BsTextBoxFor or BsTextBox.

Model

public class RegisterModel
{
    [Required]
    [Display(Name = "Name")]
    public string Name { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Name)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.User)
        @Html.BsTextBoxFor(m => m.Name, new { placeholder="Surname and name" })
        @Html.BsValidationFor(m => m.Name)
    </div>
</div>

Password Input

In order to render a text input of type password you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.Password)].

To achieve the same behavior without the BsControlAttribute, you can use the specialized helper BsPasswordFor or BsPassword.

Example

Model

public class RegisterModel
{
    [Required]
    [BsControl(BsControlType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Password)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Lock)
        @Html.BsInputFor(m => m.Password)
        @Html.BsValidationFor(m => m.Password)
    </div>
</div>

Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the textbox helper BsTextBoxFor alongside the [DataType] annotation with a value of DataType.Password.

Model

public class RegisterModel
{
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Password)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Lock)
        @Html.BsTextBoxFor(m => m.Password)
        @Html.BsValidationFor(m => m.Password)
    </div>
</div>

Email Input

In order to render a text input of type email you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.Email)]. Using BsControlType.Email will enforce email validation on both client and server side.

Example

Model

public class RegisterModel
{
    [Required]
    [BsControl(BsControlType.Email)]
    [Display(Name = "Email", Prompt = "Registration email address")]
    public string Email { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Email)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Envelope)
        @Html.BsInputFor(m => m.Email)
        @Html.BsValidationFor(m => m.Email)
    </div>
</div>

Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the textbox helper BsTextBoxFor alongside the [DataType] annotation with a value of DataType.Email.

Model

public class RegisterModel
{
    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email")]
    public string Email { get; set; }
    
    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Email)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Envelope)
        @Html.BsTextBoxFor(m => m.Email, new {placeholder = "Registration email address"})
        @Html.BsValidationFor(m => m.Email)
    </div>
</div>

Url Input

In order to render a text input of type url you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.Url)].

Example

Model

public class RegisterModel
{
    [Display(Name = "Personal website", Prompt = "http://www.mysite.com")]
    [BsControl(BsControlType.Url)]
    public string Website { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Website)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Link)
        @Html.BsInputFor(m => m.Website)
        @Html.BsValidationFor(m => m.Website)
    </div>
</div>
Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the textbox helper BsTextBoxFor alongside the [DataType] annotation with a value of DataType.Url.

Model

public class RegisterModel
{
    [Display(Name = "Personal website")]
    [DataType(DataType.Url)]
    public string Website { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Website)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Link)
        @Html.BsTextBoxFor(m => m.Website, new { placeolder = "http://www.mysite.com" })
        @Html.BsValidationFor(m => m.Website)
    </div>
</div>

Number Input

In order to render a text input of type number you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.Number)].

Example

Model

public class RegisterModel
{
    [Display(Name = "Annual income")]
    [BsControl(BsControlType.Number)]
    public decimal? AnnualIncome { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.AnnualIncome)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Link)
        @Html.BsInputFor(m => m.AnnualIncome)
        @Html.BsValidationFor(m => m.AnnualIncome)
    </div>
</div>

Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the textbox helper BsTextBoxFor alongside the [DataType] annotation with a value of DataType.PhoneNumber.

Model

public class RegisterModel
{
    [Display(Name = "Annual income")]
    [DataType(DataType.PhoneNumber)]
    public decimal? AnnualIncome { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.AnnualIncome)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Link)
        @Html.BsTextBoxFor(m => m.AnnualIncome)
        @Html.BsValidationFor(m => m.AnnualIncome)
    </div>
</div>

Number Picker Input

In order to render a text input of type number picker you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.Number)]. Also the model property must be of type BsRangeItem<int>.

Example

Model

public class RegisterModel
{
        [Display(Name = "Age")]
        [BsControl(BsControlType.Number)]
        public BsRangeItem<int> Age { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Age)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Time)
        @Html.BsInputFor(m => m.Age)
        @Html.BsValidationFor(m => m.Age)
    </div>
</div>

Example Initialization

Age = new BsRangeItem<int>
{
    ItemValue = 31,
    MinValue = 14,
    MaxValue = 99,
    TextValue = "14-99",
    Display = "Age"
}

Number Inline Input

In order to render a text input of type number inline you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.NumberInline)]. Also the model property must be of type BsRangeItem<int>.

Example

Minimum Value Reached

Maximum Value Reached

Model

public class RegisterModel
{
        [Display(Name = "Age")]
        [BsControl(BsControlType.NumberInline)]
        public BsRangeItem<int> Age { get; set; }

    ...
}

View

<div class="form-group">
    @Html.BsLabelFor(m => m.Age)
    <div class="input-group">
        @Html.BsGlyphiconAddon(Glyphicon.Time)
        @Html.BsInputFor(m => m.Age)
        @Html.BsValidationFor(m => m.Age)
    </div>
</div>

Example Initialization

Age = new BsRangeItem<int>
{
    ItemValue = 15,
    MinValue = 14,
    MaxValue = 100,
    TextValue = "14-100",
    Display = "Age"
}

CheckBox Input

In order to render an input of type checkbox you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.CheckBox)].

If you need to make the input checked state required, BForms comes with a BsMandatory attribute made just for that. This attribute allows you to localize the error message using the ErrorMessageResourceName property.

Example

Model

public class RegisterModel
{
    [BsMandatory]
    [BsControl(BsControlType.CheckBox)]
    [Display(Name = "I agree with Terms & Conditions")]
    public bool? ConsentAgreement { get; set; }

    ...
}

View

<div class="form-group checkbox">
    @Html.BsInputFor(m => m.ConsentAgreement)
    @Html.BsValidationFor(m => m.ConsentAgreement)
</div>

Specialized helper

To achieve the same behavior without the BsControlAttribute, you can use the specialized helpers: BsCheckBoxFor and BsCheckBox.

Model

public class RegisterModel
{
    [BsMandatory]
    [Display(Name = "I agree with Terms & Conditions")]
    public bool? ConsentAgreement { get; set; }

    ...
}

View

<div class="form-group checkbox">
    @Html.BsCheckBoxFor(m => m.ConsentAgreement)
    @Html.BsValidationFor(m => m.ConsentAgreement)
</div>

Radio button Input

In order to render an input of type radio you will need to use the @Html.BsInputFor helper extension and decorate your model property with [BsControl(BsControlType.RadioButton)].

To achieve the same behavior without the BsControlAttribute, you can use the specialized helpers: BsRadioButtonFor and BsRadioButton.

Model

public class RegisterModel
{

    [BsControl(BsControlType.RadioButton)]
    [Display(Name = "Radio label")]
    public bool? Radio { get; set; }

    ...
}

View

<div class="form-group radio">
    @Html.BsInputFor(m => m.Radio)
    @Html.BsValidationFor(m => m.Radio)
</div>

Date and DateTime Picker

In order to render a text input of type date or datetime you will need to use the @Html.BsInputFor helper extension and decorate your model property of type BsDateTime with [BsControl(BsControlType.DatePicker)] or BsControlType.DateTimePicker. Using BsControlType.DatePicker will enforce datetime validation on both client and server side using the specified culture.

Example

Year and Month browsing

Datetime Picker

Model

public class RegisterModel
{
    [Required]
    [Display(Name = "Birthday")]
    [BsControl(BsControlType.DatePicker)]
    public BsDateTime Birthday { get; set; }
    
    ...
}

View

  <div class="form-group">
    @Html.BsLabelFor(m => m.Birthday)
    <div class="input-group">
      @Html.BsInputFor(m => m.Birthday)
      @Html.BsValidationFor(m => m.Birthday)
    </div>
  </div>

Time Picker

In order to render a text input of type time you will need to use the @Html.BsInputFor helper extension and decorate your model property of type BsDateTime with [BsControl(BsControlType.TimePicker)]. Using BsControlType.TimePicker will enforce time validation on both client and server side.

Example

Model

public class RegisterModel
{
    [Display(Name = "Receive emails at specified time")]
    [BsControl(BsControlType.TimePicker)]
    public BsDateTime NotificationTime { get; set; }
    
    ...
}

View

  <div class="form-group">
    @Html.BsLabelFor(m => m.NotificationTime)
    <div class="input-group">
      @Html.BsGlyphiconAddon(Glyphicon.Time)
      @Html.BsInputFor(m => m.NotificationTime)
      @Html.BsValidationFor(m => m.NotificationTime)
    </div>
  </div>