This is my Cshtml
<div class="field">
#Html.LabelFor(modelItem => modelItem.plateNumber)
#Html.DropDownListFor(m => m.plateNumber, new SelectList(ViewBag.PlateNoList, "Value", "Text"),
"", new { Class = "ui selection dropdown document-type" })
</div>
</div>
<div class="field">
#Html.LabelFor(modelItem => modelItem.FuelType)
#Html.DropDownListFor(m => m.FuelType, new SelectList(ViewBag.FuelType,"Value","Text"),
"", new { Class = "ui selection dropdown fuel-type",#id="FuelType"/*, #disabled = "true"*/ })
</div>
This is my JavaScript
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
$('.ui.dropdown').dropdown();
document.getElementById("FuelType").disabled = false;
});
When the plateNumber dropdown is selected, the bottom FuelType dropdown should be available, but it cannot be used even though the plateNumber dropdown is selected, any idea?
Try removing the disabled class from the dropdown as well. This is checked (and added) internally by SUI.
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
document.getElementById("FuelType").disabled = false;
$('.ui.dropdown').dropdown();
$('.ui.dropdown').removeClass('disabled');
});
Related
I am trying to hide or show a textbox, in a ASP MVC razor view, now i using javascript to handle when i click the radio button which can help me to do hide or show function.
however, i want to base on database record hide and show the textbox, so if i use below code , i need to click the radio for hide or show a textbox, anyone can give me advise how to hide or show textbox base on database record and no need to click radio button? thanks
<script type="text/javascript">
const { checked } = require("modernizr");
function text(x) {
if (x == 0 ) document.getElementById("name").style.display = "block",
document.getElementById("address").style.display = "none",
else document.getElementById("name").style.display = "none",
document.getElementById("address").style.display = "block",
return;
}
</script>
//radio name
#Html.LabelFor(Model => Model.Type, "A")
#Html.RadioButtonFor(Model => Model.Type, "A" , new { #onclick = "text(0)", #id = "but1" })
#Html.LabelFor(Model => Model.Type, "B")
#Html.RadioButtonFor(Model => Model.Type, "B" , new { #onclick = "text(1)", #id = "but2" })
//textbox(name)
<div class="form-group col-md-6" id="name">
#Html.LabelFor(model => model.name, new { #class = "control-label" })
#Html.TextBoxFor(model => model.name, new { #class = "form-control"e })
</div>
//textbox(address)
<div class="form-group col-md-6" id="address">
#Html.LabelFor(model => model.address, new { #class = "control-label" })
#Html.TextBoxFor(model => model.address, new { #class = "form-control" })
</div>
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
text(#Model.Value);
})();
</script>
This is a document ready function. Your text() method will be called when page is loaded.
Use #Model.Value your initial db value. That way it will work for the first time with the value which is in the db.
I have a dropdown, when i select an item its categoryId is assigned to textbox. Then i Have 2 checkboxes 'IsAnonymous' and 'ShowReport'. I want to implement that is the value in textbox is 1 then both checkbox will be visible and when value will be 2 then 'ShowReport' checkbox must be hidden.
javascript
var ReportDiv = $('#ReportDiv');
$('#cmbCategories').on('change', function () {
if ($(this).val() == '1') {
ReportDiv.hide();
}
else {
ReportDiv.show();
}
});
View
#Html.DropDownListFor(p => p.PollSurveyId, Model.PollSurveyDetails, "Select Poll/Survey", new { #class = "form-control", required = "required", #id= "DDPollName" })
#Html.TextAreaFor(p => p.CategoryID, new {id= "cmbCategories" })
<div class="form-group">
#Html.Label("Is Anonymous")
#Html.CheckBoxFor(p => p.IsAnonymous)
</div>
</div>
<div class="col-lg-3">
<div class="form-group" id="ReportDiv">
#Html.Label("Show Report")
#Html.CheckBoxFor(p => p.ShowReport, new { id= "CBReport" })
</div>
<!-- /.col-lg-6 (nested) -->
</div>
Added a picture to give idea of my page
I am using below code for dropdown
#if (ViewBag.EventContentTypeId == Convert.ToInt32(EventContentType.Events))
{
<div class="col-sm-3 form-group input" style="padding-left:0">
<div class="input-group">
#Html.DropDownList("EventCategoryDDL", #ViewBag.EventCategories as IEnumerable<SelectListItem>, "-- Select Category --", new { #class = "form-control" })
<span class="input-group-addon">
<i class="fa fa-file-text" aria-hidden="true"></i>
</span>
</div>
</div>
}
I want to change these to multi-select dropdown with checkbox.
And this is my controller code and this is in selectlist and I am unable to modify to multiselectlist is there a way to change to multiselectlist of selectlist.
ViewBag.EventCategories = ViewBag.EventContentTypeName == EventContentTypeString.Events.Value ? _commonService.GetEventCategoriesModel().Where(category =>category.OptionText != "Camp Kaufmann").Select(i => new SelectListItem()
{
Text = i.OptionText,
Value = i.OptionValue.ToString()
})
_commonService.GetEventCategoriesModel().Select(i => new SelectListItem()
{
Text = i.OptionText,
Value = i.OptionValue.ToString()
});
And how should I change to multiselectlist in my controller side and also how to bind dropdown with check boxes of multiselect.
You can use bootstrap-multiselect plugin check this link.
Action Methods
public ActionResult Index()
{
List <SelectListItem> vegList = new List<SelectListItem>
{
new SelectListItem {Text = "Cheese",Value="1" },
new SelectListItem {Text = "Mushrooms",Value="2" },
new SelectListItem {Text = "Tomatoes",Value="3" },
new SelectListItem {Text = "Onions",Value="4" }
};
ViewBag.Vegetables = vegList;
return View();
}
[HttpPost]
public ActionResult AddVegetables(string[] VegetablesDDL)
{
var selectedVegetablesIDs = VegetablesDDL.ToList();
foreach(var selected in selectedVegetablesIDs)
{
// use selected item
}
return View();
}
View:
#using (Html.BeginForm("AddVegetables", "Home", FormMethod.Post))
{
#Html.Label("Vegetables:")
<br />
<br />
#Html.DropDownList("VegetablesDDL", #ViewBag.Vegetables as IEnumerable<SelectListItem>, "-- Select Vegetables
--", new { #class = "form-control", multiple = "multiple" })
<br />
<input type="submit" value="Submit" />
}
Script:
<script type="text/javascript">
$(document).ready(function() {
$('#VegetablesDDL').multiselect();
});
</script>
Note:
Add bootstrap-multiselect.css in head section of your page and bootstrap-multiselect.js in bottom of your page.
Also its better to use ViewModels instead of ViewBag check this.
Reference:
1.
2.
I have this view:
<div class="editor-field">Best</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Best, new List<SelectListItem>
{
new SelectListItem { Value = "Best3", Text = "Best 3"},
new SelectListItem { Value = "Best5", Text = "Best 5"},
new SelectListItem { Value = "Best10", Text = "Best 10"},
new SelectListItem { Value = "XBest", Text = "X Best"}
},
new { #class = "myselect" })
#Html.ValidationMessageFor(model => model.Best)
</div>
<div class="editor-label">X</div>
<div class="editor-field">
#Html.EditorFor(model => model.X)
#Html.ValidationMessageFor(model => model.X)
</div>
And I have this jquery:
$('#Best').on('change', function () {
if ($(this).val() != "XBest") {
$('#X').hide(); //invisible
$('#X').attr('disabled', 'disabled'); // disable
} else {
$('#X').show(); //visible
$('#X').removeAttr('disabled'); // enable
}
});
And it works, but when i go to this view the EditorFor X is always visible, only changes when i start clicking on the values of the dropdownlist. My question is how can it stays hidden when accessing to the view and only shows on click.
You need to execute the change() event immediately after binding the event like following.
$('#Best').on('change', function () {
if ($(this).val() != "XBest") {
$('#X').hide(); //invisible
$('#X').attr('disabled', 'disabled'); // disable
} else {
$('#X').show(); //visible
$('#X').removeAttr('disabled'); // enable
}
}).change(); // auto execute
I am submitting the form which has the css dropdownlist for gender how to submit the gender selected value to controller i am getting tht value null
<div class="regi-field-set">
<div id="ddlgender" class='selectBox' tabindex="7">
<span class='selected' id="gender">gender</span>
<span class='selectArrow'>▼</span>
<div id="disableasterisk5" style="padding-bottom:8px"><span class="required">*</span></div>
<div class="selectOptions" id="genderSelectOptions">
<span class="selectOption" id="ddlgen">male</span>
<span class="selectOption" id="ddlgen1">female</span>
</div>
</div>
<div class="regi-field-set">
#Html.TextBoxFor(model => model.DOB, new { #class = "jq_watermark", placeholder = "date of birth", tabindex = "8",id = "DOB",title = "please enter date of birth" })
<div id="disableasterisk7"><span class="required">*</span></div>
<div class="clear"></div>
#Html.ValidationMessageFor(model => model.DOB)
</div>
how to pass both value to controller all other fields in the form are using html.helper fields only gender field is css implemented
Is there any way to pass the entire model and the gender selected value to controller
please help
If I understood your question, the answer of passing to the View both the "model" and a list of something else to use in a dropdown list can be done by the following code:
Controller
....
var model = service.GetMyThing(id);
var genderList= service.GetGenders().Select(p =>
new SelectListItem { Value = p.Id.ToString(), Text = p.Name }).ToList();
ViewBag.GenderList = genderList;
return View(model);
View
....
#Html.DropDownList("GenderId",(IEnumerable<SelectListItem>)ViewBag.GenderList)
....
<div class="regi-field-set">
#Html.TextBoxFor(model => model.DOB, new { #class = "jq_watermark", placeholder = "date of birth", tabindex = "8",id = "DOB",title = "please enter date of birth" })
<div id="disableasterisk7"><span class="required">*</span></div>
<div class="clear"></div>
#Html.ValidationMessageFor(model => model.DOB)
</div>
Note: this is NOT the only solution, custom HTMLHelpers can be used to draw the combo.
using ajax you can achieve this : don't use form & declare your attributes like this in tags:
#Model.idText
<input type="text" id="textValue"/>
<input type="submit" id="btnSubmit"/>
jquery:
$(function (e) {
// Insert
$("#btnSubmit").click(function () {
$.ajax({
url: "some url path",
type: 'POST',
data: { textField: $('#textValue').val(), idField: '#Model.idText' },
success: function (result) {
//some code if success
},
error: function () {
//some code if failed
}
});
return false;
});
});
Hopefully it will help you