I use this sccript:
<select class = "form-control select2" placeholder data = "1" style = "width: 100%;">
I have a problem displaying a placeholder number.
Can someone help me. thanks
You need to add an default option
<select class = "form-control select2" style = "width: 100%;">
<option value="1">1</option>
</select>
thanks for responding,
Full script that I use is this:
(Displaying numbers 1-31)
<Select class = "form-control select2" placeholder data = "1" style = "width: 100%;">
<Option selected = "selected"> </ option>
<? Php for ($ i = 1; $ i <= 31; $ i ++) {?>
<Option> <? Php echo $ i?> </ Option>
<? Php}?>
</ Select>
when placeholder filled with string (eg: data-placeholder = "August"), was displayed. but not numeric (eg: a data-placeholder = "1")
Pic 1
Pic 2
Related
I need some help with my select tag helper.
I have an asp.net MVC View with a select 2 control as follows:
<div class="col-md-3">
<div class="form-group">
<label asp-for="NumberingType.Type" class="control-label" data-toggle="popover" data-placement="right" data-trigger="click" title="Field Help" data-content="Select the Numbering Scheme type that you want to create">Number Scheme Type *</label>
<select asp-for="NumberingType.TenantNumberingTypeId" asp-items="Model.NumberingType.NumberingTypeList" class="form-control select2">
<option></option>
</select>
<span asp-validation-for="NumberingType.TenantNumberingTypeId" class="text-danger"></span>
</div>
</div>
I am initialising the select2 as follows:
<script type="text/javascript">
$(document).ready(function () {
$(".select2").select2({
placeholder: "Select",
theme: 'bootstrap',
allowClear: true
});
});
</script>
I am loading the correct scripts:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
In my controller, I am populating the select 2 as follows:
public async Task<IActionResult> EditNumberScheme(int numberId)
{
var vm = new NumberingViewModel();
try
{
vm = await GetNumberingViewModel(numberId);
vm = UpdatedBaseViewModel<NumberingViewModel>(vm);
}
catch (Exception e)
{
await ErrorHandler.HandleException(e);
vm.MessageType = BaseViewModel.UserMessageType.Error;
}
return View(vm);
}
and
private async Task<NumberingViewModel> GetNumberingViewModel(int numberId)
{
var number = await DataGet.GetTenantNumberScheme(numberId);
NumberingViewModel model = new NumberingViewModel
{
Numbering = number
};
model.NumberingType = new TenantNumberingTypeModel();
model.NumberingType.NumberingTypeList = DataGet.GetTenantNumberingTypes().Result
.Select(x => new SelectListItem { Value = x.TenantNumberingTypeId.ToString(), Text = x.Type, Selected = (x.TenantNumberingTypeId == number.TenantNumberingTypeId) })
.ToList();
model.Owner = await DataGet.GetTenantOwner(UserInfo.Instance.Tenant.TenantId);
return model;
}
The select2 values are successfully loaded from the database and the selected value shows in the controller.
When placing a breakpoint at the select in the View, it is clear that the selected value is set as true in the NumberingTypeList.
Model.NumberingType.NumberTypeList = Count = 4
[1] = {Microsoft.AspNetCore.Mvc.Rendering.SelectListItem}
Disabled = false
Group = null
Selected = true
Text = "Credit Note"
Value = "2"
However the selected value is not rendered in the view.
<select class="form-control select2 select2-hidden-accessible" data-val="true" data-val-required="The TenantNumberingTypeId field is required." id="NumberingType_TenantNumberingTypeId" name="NumberingType.TenantNumberingTypeId" tabindex="-1" aria-hidden="true">
<option></option>
<option value="1">Invoice</option>
<option value="2">Credit Note</option>
<option value="3">Order</option>
<option value="4">Deposit</option>
</select>
Any help will be appreciated
Thanks
I managed to get this working by following this tutorial https://www.learnrazorpages.com/razor-pages/tag-helpers/select-tag-helper
It seems that the error is caused by the binding of the asp-for attribute. When I explicitly set the selected item in the controller as so:
model.NumberType = new TenantNumberingTypeModel();
model.NumberType.NumberSchemeList = DataGet.GetTenantNumberingTypes().Result
.Select(x => new SelectListItem { Value = x.TenantNumberingTypeId.ToString(), Text = x.Type })
.ToList();
model.NumberingType.TenantNumberingTypeId = number.TenantNumberingTypeId;
number being the object retrieved from the database
then it works correctly and the asp-items automatically selects the value that is represented by the asp-for attribute.
<select class="form-control select2 select2-hidden-accessible" data-val="true" data-val-required="Please select a type" id="NumberType_NumberTypeId" name="NumberType.NumberTypeId" tabindex="-1" aria-hidden="true">
<option></option>
<option value="1">Invoice</option>
<option selected="selected" value="2">Credit Note</option>
<option value="3">Order</option>
<option value="4">Deposit</option>
</select>
Hope this helps someone
That is the example of the visibility, you must use "select2.full.min.js".
Is there any way to force MVC to not escape the & on an ASCII value?
#Html.DropDownListFor(m => Model.IngredientList.ElementAt(i).AmountId, Model.Amounts, htmlAttributes: new { #class = "form-control" })
In the database Amounts are
Id Value
6 ½
9 ¾
MVC generates the following select list.
<option value="6">½</option>
<option value="9">¾</option>
I want the following.
<option value="6">½</option>
<option value="9">¾</option>
So that the user sees ½ and ¾ in the dropdown.
Update:
the following code works, but you lose the binding to the data model.
<select>
#for (int i = 0; i < Model.Amounts.Count; i++)
{
<option value="#Model.Amounts.ElementAt(i).Value">#Html.Raw(Model.Amounts.ElementAt(i).Text)</option>
}
</select>
You could try some jQuery:
$( document ).ready(function() {
$('select option').each(function(){
$repl = $(this).text().replace('amp;','');
$(this).text($repl);
});
});
If you take a look at this bootstrap documentation for formhelpers, I can use
<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" placeholder="Cell or Home Phone" required>
to format a textbox when a user enters a phone number. I want to use an #Html.TextBoxFor or an #Html.EditorFor to do the same thing. How do I accomplish this in mvc? Here is what I have tried:
<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" value="#Model.PhoneNumber" placeholder="Cell or Home Phone" required>
and
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control bfh-phone", #placeholder = "Cell or Home Phone", #data-format="+1 (ddd) ddd-dddd" } })
both of which gives a object reference razor syntax error. How is this done?
When using the overload of EditorFor() that accepts object to add html attributes, you need to use an _ (underscore) character which will be translated to a - (hyphen) by the razor engine. Use data_format = "..", not data-format = ".."
#Html.EditorFor(m => m.PhoneNumber, new { htmlAttributes =
new { #class = "..", placeholder = "..", data_format="+1 (ddd) ddd-dddd" } })
Note also you do not need the leading # character for placeholder or data_format (its only required for reserved words).
Currently I have a editor template page which has the code:
#model Comics.Models.LocalComicCategoriesModel
#Html.LabelFor(x => x.Title, Model.Title)
#Html.CheckBoxFor(x => x.isChecked)
#Html.HiddenFor(x => x.Id)
Which I call from different pages with:
#Html.EditorFor(x => x.Categories)
When the template gets outputted, i just get a clunky html with no design to it like:
What I want is something like:
I can achieve this by doing:
#model IEnumerable<Comics.Models.LocalComicCategoriesModel>
<div id="checkbox-list">
#for (int iterator = 0; iterator < Model.Count(); iterator++)
{
if ((iterator % 6) == 0 || iterator == 0)
{
#Html.Raw("<div class='checkboxes_cont' style='float: left;'>");
}
string catTitle = Model.ElementAt(iterator).Title;
bool catChecked = Model.ElementAt(iterator).isChecked;
string catId = Model.ElementAt(iterator).Id.ToString();
<div class="itemtest" style="width: 100px;">
<input id="Categories_#iterator.ToString()__isChecked" name="Categories[#iterator.ToString()].isChecked" type="checkbox" value="#catChecked.ToString()" data-title="#catTitle" #if (catChecked) { Write("checked=checked"); }>
<label for="Categories_#iterator.ToString()__Title">#catTitle</label>
<input name="Categories[#iterator.ToString()].isChecked" type="hidden" value="false">
<input data-val="true" data-val-number="The field Id must be a number." id="Categories_#iterator.ToString()__Id" name="Categories[#iterator.ToString()].Id" type="hidden" value="#catId">
</div>
if ((iterator % 6) == 5 || iterator == Model.Count() - 1)
{
#Html.Raw("</div>")
}
}
</div>
However when I send data back to the controller, the value for the new checkbox dosent get sent back. I was wondering if it were possible to do it through the editor template.
The problem is that you're trying to solve the display with HTML, which is emphatically not the purpose of HTML; that's the domain of CSS. Apply style to the checkboxes in your stylesheet and let your HTML just be.
Dart CheckboxInputElement adds specified text between opening and ending input tags and the browser ignores this text. For example, the following dart code:
FormElement form = new FormElement();
CheckboxInputElement option = new CheckboxInputElement();
option.name = "text1";
option.value = "text1";
option.text = "text1";
form.children.add(option);
window.children.add(form);
creates the following html code:
<form>
<input type="checkbox" name="text1" value"text1">text1</input>
</form>
I end up with checkboxes without descriptors.
You have to add a Label with the descriptor text and link it to the Checkbox:
FormElement form = new FormElement();
CheckboxInputElement option = new CheckboxInputElement();
option.name = "text1";
option.value = "text1";
option.id = "text1";
form.children.add(option);
LabelElement label = new LabelElement();
label.htmlFor = 'text1';
label.text = "This is a checkbox label";
form.children.add(label);
window.children.add(form);
The for property will look for the input with the id specified and connect them (so that clicking on the label text will toggle the checkbox) .
You will end up with the following HTML:
<form>
<input type="checkbox" name="text1" value="text1" id="text1">
<label for="text1">This is a checkbox label</label>
</form>