public static MvcHtmlString NgButton <TModel>(this HtmlHelper <TModel> htmleHelper, NgButton ngButton)
{
// --- Create the button
ngButton.CssClass(BsClass.Button);
ngButton.CssClass(BsClass.ButtonTheme.From(ngButton.Theme));
// --- Add an optional icon
if (!string.IsNullOrEmpty(ngButton.IconName))
{
var iconSpan = new BsHtmlElement(HtmlTag.Span);
iconSpan.CssClass(ngButton.IconName);
if (ngButton.IconAlignment == BsIconAlignment.Left)
{
ngButton.AddChild(iconSpan);
ngButton.AddChild(new HtmlText("\u00a0"));
ngButton.AddChild(new HtmlText(ngButton.Text));
}
else
{
ngButton.AddChild(new HtmlText(ngButton.Text));
ngButton.AddChild(new HtmlText("\u00a0"));
ngButton.AddChild(iconSpan);
}
}
else
{
ngButton.AddChild(new HtmlText(ngButton.Text));
}
return(ngButton.Markup);
}
/// <summary>
/// Renders a submit button
/// </summary>
/// <param name="value">Button text</param>
/// <param name="theme">Button theme</param>
/// <param name="outerHtmlAttributes">HTML attributes of the form group</param>
/// <param name="innerHtmlAttributes">HTML attributes of the inner div</param>
/// <param name="buttonHtmlAttributes">HTML attributes of the button</param>
public MvcHtmlString SubmitButton(string value, BsButtonTheme theme = BsButtonTheme.Default,
object outerHtmlAttributes = null,
object innerHtmlAttributes = null,
object buttonHtmlAttributes = null)
{
// --- The form group that encapsulates the button
var formGroup = new BsFormGroup {
Depth = Depth + 1
};
formGroup.SetHtmlAttributes(outerHtmlAttributes);
// --- The div with the buttons
var div = new BsHtmlElement(HtmlTag.Div);
div.SetHtmlAttributes(innerHtmlAttributes);
div.ApplyColumnWidths(null, _form.InputWidthXs, _form.InputWidthSm, _form.InputWidthMd, _form.InputWidthLg);
div.ApplyColumnOffsets(null, _form.LabelWidthXs, _form.LabelWidthSm, _form.LabelWidthMd, _form.LabelWidthLg);
formGroup.AddChild(div);
// --- The button in the div
var button = new BsSubmitButton(value, theme);
button.SetHtmlAttributes(buttonHtmlAttributes);
button.Attr(NgTag.NgDisabled, string.Format("{0}.$invalid", _form.FormName));
div.AddChild(button);
return(formGroup.Markup);
}
/// <summary>
/// Creates a text label according to the specified metadata.
/// </summary>
/// <param name="modelMetadata">Model metadata</param>
/// <returns>HTML element representing the label</returns>
public BsHtmlElement CreateTextLabel(ModelMetadata modelMetadata)
{
var label = new BsHtmlElement(HtmlTag.Label);
label
.Text(modelMetadata.DisplayName ?? modelMetadata.PropertyName)
.CssClass(BsClass.Control.Label)
.Attr(HtmlAttr.For, CamelCase(modelMetadata.PropertyName))
.CssClass(modelMetadata.IsRequired, HtmlAttr.Required);
label.ApplyColumnWidths(null,
_formBuilder.BsForm.LabelWidthXs,
_formBuilder.BsForm.LabelWidthSm,
_formBuilder.BsForm.LabelWidthMd,
_formBuilder.BsForm.LabelWidthLg);
return(label);
}
public HtmlElementBase <BsHtmlElement> CreateInput(InputTagType inputTagType, AutoFocus autoFocus,
ModelMetadata modelMetadata, string name)
{
name = CamelCase(name);
var input = new BsHtmlElement(HtmlTag.Input)
.CssClass(inputTagType != InputTagType.CheckBox, BsClass.Control.FormControl)
.Attr(HtmlAttr.Type, GetInputTypeString(modelMetadata, inputTagType))
.Attr(HtmlAttr.Id, name)
.Attr(HtmlAttr.Name, name)
.Attr(NgTag.NgModel, string.Format("model.{0}", name));
if (modelMetadata.Model != null)
{
var modelValue = modelMetadata.Model.ToString();
input
.Attr(HtmlAttr.Value, modelValue)
.Attr(NgTag.NgInit,
string.Format("model.{0}={1}", name, JsonConvert.SerializeObject(modelMetadata.Model)));
}
// --- Set the appropriate autofocus
if (autoFocus == AutoFocus.Set ||
(_formBuilder.HtmlHelper.ViewData.ModelState.IsValid && autoFocus == AutoFocus.OnFormValid) ||
(!_formBuilder.HtmlHelper.ViewData.ModelState.IsValid && autoFocus == AutoFocus.OnFormInvalid))
{
input.Attr(HtmlAttr.AutoFocus);
}
// --- Validation attributes for input
foreach (var attribute in modelMetadata.AdditionalValues.Values.OfType <ValidationAttributeMetadata>())
{
foreach (var directive in attribute.DirectiveSet)
{
input.Attr(directive.Key, directive.Value ?? "");
}
if (attribute.AdditionalAttributes == null)
{
continue;
}
foreach (var key in attribute.AdditionalAttributes.Keys)
{
input.Attr(key, attribute.AdditionalAttributes[key]);
}
}
return(input);
}
public static MvcHtmlString NgSearchButton <TModel>(this HtmlHelper <TModel> htmleHelper, string ngModel,
string id = "Search", string name = "Search", string placeHolder = "Search")
{
// --- Create the input tag
var inputGroup = new BsHtmlElement(HtmlTag.Div).CssClass(BsClass.Control.InputGroup);
var input = new BsHtmlElement(HtmlTag.Input);
input.CssClass(BsClass.Control.FormControl)
.Attr(HtmlAttr.Id, id)
.Attr(HtmlAttr.Name, name)
.Attr(HtmlAttr.Placeholder, placeHolder)
.Attr(NgTag.NgModel, ngModel);
inputGroup.AddChild(input);
var span = new BsHtmlElement(HtmlTag.Span).CssClass(BsClass.Control.InputGroupAddOn);
inputGroup.AddChild(span);
span.AddChild(new BsHtmlElement(HtmlTag.Span).CssClass(BsClass.GlyphFa.Search));
return(inputGroup.Markup);
}
/// <summary>
/// Renders a cancel button for a modal dialog
/// </summary>
/// <param name="ngClick">ng-click attribute value (cancel() by default)</param>
/// <param name="theme">Button theme</param>
/// <param name="buttonText">Button text (Resources.Gen_Cancel by default)</param>
public MvcHtmlString CancelButton(string ngClick = null, BsButtonTheme theme = BsButtonTheme.Default, string buttonText = null)
{
if (ngClick == null)
{
ngClick = "cancel()";
}
if (buttonText == null)
{
buttonText = Resources.Gen_Cancel;
}
var button = new BsHtmlElement(HtmlTag.Button);
button
.CssClass(BsClass.Button)
.CssClass(BsClass.ButtonTheme.From(theme))
.Attr(NgTag.NgClick, ngClick);
button.AddChild(new HtmlText(buttonText));
return(button.Markup);
}
/// <summary>
/// Renders a cancel button for a modal dialog
/// </summary>
/// <param name="ngClick">ng-click attribute value (cancel() by default)</param>
/// <param name="theme">Button theme</param>
/// <param name="buttonText">Button text (Resources.Gen_Cancel by default)</param>
public MvcHtmlString OkButton(string ngClick = null, BsButtonTheme theme = BsButtonTheme.Success, string buttonText = null)
{
if (ngClick == null)
{
ngClick = "ok()";
}
if (buttonText == null)
{
buttonText = Resources.Gen_Ok;
}
var button = new BsHtmlElement(HtmlTag.Button);
button
.CssClass(BsClass.Button)
.CssClass(BsClass.ButtonTheme.From(theme))
.Attr(NgTag.NgClick, ngClick)
.Attr(NgTag.NgDisabled, _form.FormName + ".$invalid || disableOk");
button.AddChild(new HtmlText(buttonText));
return(button.Markup);
}
/// <summary>
/// Builds a horizontal static text control
/// </summary>
/// <param name="modelMetadata">Model metadata</param>
public MvcHtmlString BuildHorizontalStatic(ModelMetadata modelMetadata)
{
// --- The form group that encapsulates the label and the control
var propName = CamelCase(modelMetadata.PropertyName);
var formGroup = new BsFormGroup {
Depth = _formBuilder.Depth + 1
};
var label = CreateTextLabel(modelMetadata);
var staticDiv = new BsHtmlElement(HtmlTag.Div);
staticDiv.ApplyColumnWidths(null,
_formBuilder.BsForm.InputWidthXs,
_formBuilder.BsForm.InputWidthSm,
_formBuilder.BsForm.InputWidthMd,
_formBuilder.BsForm.InputWidthLg);
var staticText = new BsHtmlElement(HtmlTag.P);
staticText.CssClass(BsClass.Control.Static);
staticText.AddChild(new HtmlText(modelMetadata.Model.ToString()));
staticDiv.AddChild(staticText);
var hidden = new BsHtmlElement(HtmlTag.Input)
.Attr(HtmlAttr.Type, "hidden")
.Attr(HtmlAttr.Id, propName)
.Attr(HtmlAttr.Name, propName)
.Attr(NgTag.NgModel, string.Format("model.{0}", propName));
if (modelMetadata.Model != null)
{
var modelValue = modelMetadata.Model.ToString();
hidden
.Attr(HtmlAttr.Value, modelValue)
.Attr(NgTag.NgInit,
string.Format("model.{0}={1}", propName, JsonConvert.SerializeObject(modelMetadata.Model)));
}
formGroup.AddChild(label).AddChild(staticDiv).AddChild(hidden);
return(formGroup.Markup);
}
/// <summary>
/// Builds a horizontal input control
/// </summary>
/// <param name="modelMetadata">Model metadata</param>
/// <param name="inputTagType">Type of the input tag</param>
/// <param name="autoFocus">Autofocus type</param>
/// <param name="validationOption">Validation type</param>
public MvcHtmlString BuildHorizontalInput(ModelMetadata modelMetadata, InputTagType inputTagType,
AutoFocus autoFocus, ValidationOption validationOption)
{
// --- The form group that encapsulates the label and the control
var propName = CamelCase(modelMetadata.PropertyName);
var formGroup = new BsFormGroup {
Depth = _formBuilder.Depth + 1
};
var condition = string.Format("{0}{1}",
"{0}.{1}.$invalid",
validationOption == ValidationOption.WhenDirty ? " && {0}.{1}.$dirty" : "");
formGroup.Attr(NgTag.NgClass, string.Format("{{'has-error': " + condition + ", 'has-feedback': " + condition + "}}",
_formBuilder.BsForm.FormName, propName));
if (inputTagType == InputTagType.Text)
{
var label = CreateTextLabel(modelMetadata);
var inputDiv = new BsHtmlElement(HtmlTag.Div);
inputDiv.ApplyColumnWidths(null,
_formBuilder.BsForm.InputWidthXs,
_formBuilder.BsForm.InputWidthSm,
_formBuilder.BsForm.InputWidthMd,
_formBuilder.BsForm.InputWidthLg);
var input = CreateInput(inputTagType, autoFocus, modelMetadata, propName);
// --- Assemble the elements
formGroup.AddChild(label).AddChild(inputDiv);
inputDiv.AddChild(input);
// --- Add optional help text
if (!string.IsNullOrEmpty(modelMetadata.Description))
{
var helpText = new BsHtmlElement(HtmlTag.Span);
helpText.CssClass(BsClass.Control.Help);
helpText.AddChild(new HtmlText(modelMetadata.Description));
inputDiv.AddChild(helpText);
}
// --- Create validation tags
AddValidationTags(inputDiv, modelMetadata, validationOption);
}
else if (inputTagType == InputTagType.CheckBox)
{
var sizingDiv = new BsHtmlElement(HtmlTag.Div);
sizingDiv.ApplyColumnWidths(null,
_formBuilder.BsForm.InputWidthXs,
_formBuilder.BsForm.InputWidthSm,
_formBuilder.BsForm.InputWidthMd,
_formBuilder.BsForm.InputWidthLg);
sizingDiv.ApplyColumnOffsets(null,
_formBuilder.BsForm.LabelWidthXs,
_formBuilder.BsForm.LabelWidthSm,
_formBuilder.BsForm.LabelWidthMd,
_formBuilder.BsForm.LabelWidthLg);
var checkBoxDiv = new BsHtmlElement(HtmlTag.Div).CssClass(BsClass.Control.CheckBox);
var label = new BsHtmlElement(HtmlTag.Label);
var input = CreateInput(inputTagType, autoFocus, modelMetadata, propName);
input.Attr(modelMetadata.Model != null && modelMetadata.Model.ToString().ToLower() == "true",
HtmlAttr.Checked, HtmlAttr.Checked);
var hiddenInput = new BsHtmlElement(HtmlTag.Input)
.Attr(HtmlAttr.Name, modelMetadata.PropertyName)
.Attr(HtmlAttr.Type, HtmlInputType.Hidden)
.Attr(HtmlAttr.Value, "false");
// --- Assemble the elements
formGroup.AddChild(sizingDiv);
sizingDiv.AddChild(checkBoxDiv);
checkBoxDiv.AddChild(label);
label
.AddChild(input)
.AddChild(new HtmlText(modelMetadata.DisplayName ?? modelMetadata.PropertyName))
.AddChild(hiddenInput);
}
return(formGroup.Markup);
}
