mvc option with html content
how to write/render
<select>
<option><span style="">Hi</span></option>
<option><span style="">Hi1</span></option>
<option><span style="">Hi2</span></option>
</select>
using #html.DropDownList()
--------Update-------------
i want to use html formatted text in option
when i passed it from modal, it was showing in dropdown list
<span style="">Hi</span>
<span style="">Hi1</span>
<span style="">Hi2</span>
here the span style="" is html it is not string, and the list is coming from controller
Use SelectItem in the code, insert options in that list, provide another property for selected item on Post using passing it to the view and use #Html.DropDownListFor(x => x.SelectItem) a simple example can be
#Html.DropDownListFor(model => model.Package.State, new SelectList(
new List<Object>{
new { value = 0 , text = "Red" },
new { value = 1 , text = "Blue" },
new { value = 2 , text = "Green"}
},
"value",
"text",
2))
Related
I have below code and I want to change label text base on selected role.
For example, If I select Admin then in label Text I need "Admin Name" etc.
I use below code but I is not working.
<div class="editor-field">
#Html.DropDownListFor(model => model.RoleID, new SelectList(ViewBag.RoleLsit, "Id", "RoleName"), "Select Category", new { onchange = "SelectedIndexChanged()" })
</div>
<div>
#Html.LabelFor(model => model.RoleName)
#Html.EditorFor(model => model.RoleName)
#Html.ValidationMessageFor(model => model.RoleName)
</div>
<script type="text/javascript">
function SelectedIndexChanged() {
var sub = document.getElementsByName("RoleName");
sub.value = "Selected Role Name";
}
Thanks
You could find your elements using #Html.IdFor, if your js is in your view.
function SelectedIndexChanged() {
//find the label
var label = document.querySelector('label[for="#Html.IdFor(m => m.RoleName)"]');
//get the dropDown selected option text
var dropDown = document.getElementById("#Html.IdFor(m => m.RoleId)");
var selectedText = dropDown.options[dropDown.selectedIndex].text;
//set the label text
label.innerHTML=selectedText
}
By the way, taking a look a jQuery might be an "interesting" option.
You could simply remove the new { onchange = "SelectedIndexChanged()" , then
$('##Html.IdFor(m => m.RoleId)').change(function() {
$('label[for="#Html.IdFor(m => m.RoleName)"]').text($(this).children('option:selected').text());
});
function SelectedIndexChanged() {
document.getElementsById("RoleName").InnerHtml="Role name goes here";
}
you should use get element by id instead of name because when this html helper renders the strongly typed binded attributes becomes the id of that control . so in your case role name will be the ID
I have to pass the dropdown selected value in knockout function. I have crated the razor syntax for that:
<div class="row">
#Html.LabelFor(m => m.FilterByType, htmlAttributes: new { #class = "label" })
#Html.DropDownListFor(m => m.FilterByType, new SelectList(Model.aspNetUser, "FilterByType", "FilterByName"), new { #class = "selectBox", #id = "aspnetUsersType", #data_bind = "event: {change: getData(0,'','',size,index,'')}" })
<input type="hidden" id="filterByType" name="filterByType" value="">
</div>
Following is my knockout function:
self.getData = function (filterbytype, fromdaterange, todaterange, pageSize, page, searchText) {"some task"}
How do I pass the selected value in the getData? Right now I am passing 0 as a filterbytype.
The objects can be passed from server to client using JSON, and binded to a property of type observableArray. Then bind this property to a html element using foreach binding. You can see an example here:
http://knockoutjs.com/documentation/foreach-binding.html
Suppose are using this following code in ur HTML
<select data-bind="options: operations, value: self.selectedOperation">
Make sure that You must be using these variables as ko.observable() type
so ur JS code will look like this
var self = this;
self.selectedOperation = ko.observable("Option1"); // with self u can use more variables and here selectedOperation will be containing the choosen value you want and you can pass it wherever u want
var operations = ko.observableArray(["Option1", "Option2", "option3", "Opt4"]); // dropdown List
Now its up to you how you are going to use that variable..
I am using MVC strongly typed view to generate two radio buttons
<div>
#Html.LabelFor(model => model.Eligible)
#Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind = "checked: completeVM.Eligible " })
#Html.Label("yes", "YES")
#Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible " })
#Html.Label("no", "No")
</div>
If I don't use data_bind, when the page loads, the 'No' radio button will be set by default. But after I add data_bind, neither radio button is checked. I noticed in my view model, the Eligible was displayed as :"Eligible": false; if I check 'No' button, it will display as "Eligible":"false". How can I fix this so that when the page loads, the 'No' button will be checked by default. Thanks
This is a common problem. Radio button values are always a string. Yet you want boolean behavior. The easiest fix is to use an extra computed observable to do the translation for you:
Assuming 'this' points to your viewmodel:
this.EligibleRadioHelper = ko.computed({
read: function () {
return this.Eligible().toString();
},
write: function (value) {
this.Eligible(value === 'true');
},
owner: this
});
Bind against this new helper:
data-bind="checked: completeVM.EligibleRadioHelper"
When you want the boolean value (for logic or for persisting) use your original observable.
You also can try using the checkedValue binding available in knockout 3 without the need to write a computed function for your view model.
Your code will become something like this:
<div>
#Html.LabelFor(model => model.Eligible)
#Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind = "checked: completeVM.Eligible, checkedValue: true" })
#Html.Label("yes", "YES")
#Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible, checkedValue: false " })
#Html.Label("no", "No")
In my View I have this dropdownlist that returns data from database:
#Html.DropDownList("somevalue", (SelectList) ViewBag.DropList, "--Select Customer--", Model.Search.SomeValue)
But after I click search button:
<input class="first-search_btn" type="submit" value="Search"/>
Operation is executed, but value from dropdown list returns to first empty value "Select Customer". How can I keep selected value from dropdownlist after I click "Search".
Try to use use DropDownListFor like I did:
#Html.DropDownListFor(m => m.SubscriptionTypeId, new SelectList(ViewBag.SubscriptionTypes, "Key", "Value", Model.SubscriptionTypeId), new{ #class = "w100" })
where Model.SubscriptionTypeId is default selected value
and
ViewBag.SubscriptionTypes = Enum.GetValues(typeof(SubscriptionTypeDefinition)).Cast<SubscriptionTypeDefinition>().ToDictionary(item => (int)item, item => item.ToLocalizedString());
Hi I'm building application to display reports, I have a set of setting which I would like the user to select, and while he selecting a preview updates. It is strongly typed view:
#model MRS.UI.Models.SettingsModel
#using (Html.BeginForm("Settings", "Report", FormMethod.Post))
{
<div class="white-box edit-box">
#Html.DropDownListFor(m => m.range, new SelectList(new List<Object>{new { value = 0, text = "12 hours"},
new { value = 1, text = "24 hours"},
new { value = 2, text = "4 days"},
new { value = 3, text = "8 days"},
new { value = 4, text = "16 days"},
new { value = 5, text = "month"},
new { value = 6, text = "quarter"},
new { value = 7, text = "year"}
},
"value",
"text",
Model.range
), new { #class = "select_change" }
)
#Html.TextBoxFor(m => m.title)
#Html.RadioButtonFor(m => m.layout, 1) <p>Layout 1</p><br />
#Html.RadioButtonFor(m => m.layout, 2) <p>Layout 2</p><br />
#Html.RadioButtonFor(m => m.layout, 3) <p>Layout 3</p><br />
#Html.RadioButtonFor(m => m.layout, 4) <p>Layout 4</p><br />
<input class="blueButton" type="submit" value="Complete Report"/>
</div>
}
<script>
$('.select_change').change(function () { alert(#Model.range); })
</script>
After I press "Complete Report" data is saving and then I can use it on different view, but how can I use it on the same view, while is selected. I tried to use JavaScript to display value of range in a form of alert message, but it displays not updated value.
How can I use selected value in #Html.DropDownListFor ?
Many thanks for your help
you can't use the value coming from your Model, which is not updated on client side (and the change event happens on client)
You have to do
$(.select_change).change(function() {
alert($(this).val());//selected value
alert($(this).find('option:selected').text());//selected option text
});