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
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.
My problem is similar to the one in show divs based on drop down selection. I have a dropdown list in a div with four options. Depending on which is selected I want one of two other controls to show in the next div and in one case it will show an EditorFor and I want the value populated. Here's what I have...
<div class="form-group">
#Html.Label("OriginType", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.DropDownList("OriginType", ViewData["OriginType"] as SelectList, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="pnlOrigin">
#Html.LabelFor(model => model.Origin, htmlAttributes: new { #class = "control-label col-md-2" })
<div id="pnlOrigin1"class="col-md-4">
#Html.DropDownList("ddlORDER_10", (IEnumerable<SelectListItem>)ViewBag.Order, "Select an Order Number", new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Origin, "", new { #class = "text-danger" })
</div>
<div id="pnlOrigin2"class="col-md-4">
#Html.EditorFor(model => model.Origin, new { htmlAttributes = new { #class = "form-control", #id = "tbOrigin" } })
#Html.ValidationMessageFor(model => model.Origin, "", new { #class = "text-danger" })
</div>
</div>
So what I need is when a user selects from the OriginType dropdown (STK, PO, WO, OTHER) it will show or hide the dropdown list or EditorFor in the pnlOrigin div. If PO or WO is selected it will show the ddl. If OTHER or STK is selected it will show the EditorFor, and in the case of STK it will prepopulate the Editor with STK.
I've tried to modify the function in the referenced post but it's not hiding the controls initially and a selection from the OriginType dropdown list isn't having any affect?
Here's the jQuery I created. I'm not sure where I'm going wrong.
$(document).ready(function () {
function ShowOptions(originType) {
if (OriginType == "0"){
$("#pnlOrigin").hide();
$("#pnlOrigin1").hide();
$("#pnlOrigin2").hide();
// hide all before show
var showOriginPanel = false;
}
if (OriginType == 'STK') {
$("#pnlOrigin").show();
$("#tbOrigin").val('STK');
showOriginPanel = true;
}
if (OriginType == 'PO') {
$("#pnlOrigin1").show();
showOriginPanel = true;
}
if (OriginType == 'WO') {
$("#pnlOrigin1").show();
showOriginPanel = true;
}
if (OriginType == 'OTHER'){
$("#pnlOrigin2").show();
showOriginPanel = true;
}
if(showOriginPanel) {
$("#pnlOrigin").show();
}
}
ShowOptions($("#OriginType").val());
$("#OriginType").change(function () {
ShowOptions($(this).val());
});
});
Any help would be greatly appreciated!
I seem to have found the problem with my code although I'm not sure why it affected the function. I had the htmlAttribues declared for the two hidden controls as "new { htmlAttributes = new { #class = "form-control" } }". Once I changed them to "htmlAttributes: new { #class = "form-control" }" the function started working properly.
I also had to add some .hides in case the user changed their initial selection prior to posting.
I am making an MVC 5 web application and I am looking to pass a value from my ViewModel to a function in my JavaScript
The aim is hide a Label/Div when the user selects the option "No" and make it reappear when the user changes the option back to "Yes"
Here is what I have so far:
ViewModel:
public enum BasicAnswer
{
[Display(Name= "Yes")]
Yes,
[Display(Name= "No")]
No
}
public BasicAnswer userDiscomfortResponse { get; set; }
View:
<div id="UserDiscomfortAnswerLabel">
<label id="somelabel">Did you have any discomfort with an exercise?</label>
<div class="Answer1" onclick=feedback data-id='#Model.userDiscomfortResponse'>
#Html.EnumDropDownListFor(m => m.userDiscomfortResponse, new { #class = "form-control" })
</div>
</div>
<div class="Question2">
<label id="UserDiscomfortExerciseLabel">What exercise was the issue?</label>
<div class="Answer2">
#Html.DropDownListFor(m => m.discomfortExercise, Model.UsersSelectedExcerises, new { #class = "form-control" })
</div>
</div>
JavaScript:
function feedback() {
var feedback = $(this).attr('data-id');
if (feedback == "Yes") {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
}
else {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
}
}
The issue I am having is var feedback = $(this).attr('data-id') results as undefined and so the label hides on click but never shows again.
Is there something I've missed?
Thank you in advance.
Ok, try removing the onclick on the div and add:
$(document).ready(function()
{
function feedback() {
var feedback = $('#userDiscomfortResponse').val()
if (feedback == "Yes") {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
}
else {
document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
}
}
$("#userDiscomfortResponse").change(feedback);
feedback();
}