We Keep Coding

How do you hide a div element based on user input on a Razor Page?

I have a country field and a state field. I want to show the state field when the user chooses United States. Otherwise, I want it to be hidden.
This is my cshtml page of the form.
<div class="form-group col-sm-4 mt-4">
<label asp-for="Form.Country" class="control-label"></label>
<select asp-for="Form.Country" class="form-control">
<option disabled selected>Choose your Country</option>
<option>Canada</option>
<option>United States</option>
<option>Mexico</option>
</select>
<span asp-validation-for="Form.Country" class="text-danger"></span>
</div>
<div class="form-group col-sm-4 mt-4">
<label asp-for="Form.State" class="control-label"></label>
<select asp-for="Form.State" asp-items="Model.States" class="form-select">
<option disabled selected>Choose your State</option>
</select>
<span asp-validation-for="Form.State" class="text-danger"></span>
</div>
<div class="form-group col-sm-4 mt-4">
<label asp-for="Form.City" class="control-label"></label>
<input asp-for="Form.City" class="form-control" />
<span asp-validation-for="Form.City" class="text-danger"></span>
</div>
I tried searching for a solution, but most involve using JS which I don't know and don't want to use now.
I know razor is server side code, but maybe I can integrate a blazor component or use css to achieve this.

I'm very glad to see you can receive to use javascript to do it, Here is a simple demo with annotations, I hope it can solve your issue.
add a onchange() method on the first dropdown list:
<select asp-for="Form.Country" class="form-control" onchange="Select()">
add an Id for the second dropdown list:
<div class="form-group col-sm-4 mt-4" id="demo">
.........
</div>
Then write a javascript in your view:
#section scripts
{
<script>
function Select(){
//get the element by id
var select = document.getElementById("Form_Country");
//get the option's text
var index = select.selectedIndex;
var text = select.options[index].text;
//if option's text is not United States, hide the second dropdownlist.
if(text!="United States"){
//hiden the dropdownlist
document.getElementById("demo").style.display='none';
}else{
//show the dropdownlist
document.getElementById("demo").style.display='block';
}
}
</script>
}
Demo:

I think this is what you're looking for
#if (Form.Country == "UnitedStates")
{
MARKUP FOR STATE DROPDOWN
}

How to set focus on font awesome icon mapped to radio button

I am using Twitter Bootstrap in an ASP.NET MVC application. In one page I want to show a Grid or List view when a user click on the relevant icon. To do that, I'm using radio buttons and it does show based on user selection.
But the problem is that it always focuses on the Grid icon, even if it fires list mode.
Here's My Code:
<div class="row" >
<div class="col-xs-4 col-sm-4">
<form class="pull-left">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" title="Show as a Grid" >
<i class="fa fa-table"></i>
#Html.RadioButtonFor(model => Model.Context.ViewMode, "grid",
new { name = "viewmode", #class = "",
onchange = "setLocation('?viewmode=grid');" })
Grid
</label>
<label class="btn btn-primary" title="Show as a List" >
<i class="fa fa-list"></i>
#Html.RadioButtonFor(model => Model.PagingFilteringContext.ViewMode, "list",
new { name = "viewmode", #class = "",
onchange = "setLocation('?viewmode=list');" })
List
</label>
</div>
</form>
</div>
</div>
<div class="show-content">
#if (Model.Context.ViewMode == "grid")
{
<label>Grid content here...</label>
}
else
{
<label>List content here...</label>
}
</div>
// set visibility between icons
$(document).ready(function () {
$("#Context_ViewMode").on('click', function () {
ToggleRadioButtons("#Context_ViewMode", $(this));
});
});
function ToggleRadioButtons(groupName, current) {
var chk = $(groupName + " .fa-table");
$(chk).removeClass('fa-table').addClass('fa-list');
$(current).find(">:first-child").removeClass('fa-list');
$(current).find(">:first-child").addClass('fa-table');
}
But it didn't set focus on List icon when clicked. Any ideas?
Edit:
I managed to get event firing work, but it doesn’t stay as selected if ‘List’ selected, change back to ‘Grid’ highlighted(active) after loading correct ‘List’ result from the server.
Summary of changes:
Added new class ‘fawsm-radiobutton’ for both labels
Added new class ‘nonactive’ for label list
Changed the JavaScript to add remove 'active' and 'notactive'
Here’s My Code changes:
<label class="fawsm-radiobutton btn btn-primary active" title="Show as a Grid" >
<i class="fa fa-table"></i>
#Html.RadioButtonFor(model => Model.Context.ViewMode, "grid",
new { name = "viewmode", #class = "",
onchange = "setLocation('?viewmode=grid');" })
Grid
</label>
<label class="fawsm-radiobutton btn btn-primary notactive" title="Show as a List" >
<i class="fa fa-list"></i>
#Html.RadioButtonFor(model => Model.PagingFilteringContext.ViewMode, "list",
new { name = "viewmode", #class = "",
onchange = "setLocation('?viewmode=list');" })
List
</label>
$(document).ready(function () {
$("#Context_ViewMode>.fawsm-radiobutton").on('change', function () {
ToggleRadioButtons("#Context_ViewMode", $(this));
});
});
function ToggleRadioButtons(groupName, current) {
var chk = $(groupName + " .fawsm-radiobutton.active");
$(chk).removeClass('active’).addClass('notactive');
$(current).find(">:first-child").removeClass('notactive');
$(current).find(">:first-child").addClass('active');
}
When I use developer tool(F12) on the browser it shows the removal and addition of ‘active’ and ‘notactive’ classes to lable. But after loading List items from the server it revert back to original ‘Grid’ icon in active mode.
So I guess that when the browser renders
#if (Model.Context.ViewMode == "grid")
{}
else{}
section I need to notify client to do the above changes to the label classes. I do not know how to do it. Do I need to use something like AJAX?

You should use the .focus() method.

Disable Div Contents Based on checkbox value using jquery

hi am developing mvc project using c#
currently am working on employee system model
I have designed view below like this
#Html.CheckBoxFor("value", new {data_divToDisable="SSLCSection",#class="SelectSection" })
<div id="SSLCSection" class="DisableDiv">
<table>
//Conntent goes here
</table>
</div>
#Html.CheckBoxFor("value", new {data_divToDisable="PUCSection",#class="SelectSection" })
<div id="PUCSection" class="DisableDiv">
<table>
//Conntent goes here
</table>
</div>
#Html.CheckBoxFor("value", new {data_divToDisable="GraduationSection",#class="SelectSection" })
<div id="GraduationSection" class="DisableDiv">
<table>
//Conntent goes here
</table>
</div>
#Html.CheckBoxFor("value", new {data_divToDisable="PostGraduationSection",#class="SelectSection" })
<div id="PostGraduationSection" class="DisableDiv">
<table>
//Conntent goes here
</table>
</div>
here I need to disable sections when loading view based on checkbox value
like if checkbox is checked no need to disable that section otherwise it would be disable
I have written jquery like this
$(document).ready(function () {
$(".SelectSection").attr('checked', false,function(){
var id = $(this).find(".DisableDiv");
alert(id);
$(this).find(".DisableDiv").find('input, textarea, select,table').each(function () {
$(this).prop('disabled', true);
});
});
this is not doing anything for us
please help and your help would be greately appreciated
Please Note I have using data-Attribute to simplify the jquery and while each time loading the page it has to disable the sections based on checkbox value (hint:it has to disable if checkbox value is false )

You could try the follow, excuse the pseudo code.
HTML
<input class="SelectSection" type="checkbox" >hello1</input>
<div id="SSLCSection" class="DisableDiv" >
<input type="input">Test</input>
<textarea>Test1</textarea>
</div>
<br>
<input class="SelectSection" type="checkbox">hello2</input>
<div id="PUCSection" class="DisableDiv" >
<input type="input">Test2</input>
<textarea>Test12</textarea>
</div>
<br>
<input class="SelectSection" type="checkbox" checked>hello3</input>
<div id="PostGraduationSection" class="DisableDiv" >
<input type="input">Test3</input>
<textarea>Test3</textarea>
</div>
jQuery
$(document).ready(function () {
$(".SelectSection[type='checkbox']").each(function (i, o) {
if ($(o).is(":checked")) {
$(o).next('div').find('input,textarea').each(function (i, o) {
$(o).prop('disabled', true);
});
}
});
})
The above assumes that your next element after the relevant checkbox is the div in question which holds the elements that need to be disabled.

Passing value of an input control to controller

I have the following:
#Html.BeginForm("AddComment", "Shared", new { guid = Model.VideoGuid, content="", userid = authenticatedUserId.ToString()}){
<div class="input-group">
<input name="txtCommentContent" type="text" class="form-control"><span class="input-group-btn">
<button class="btn btn-default">
<img src="~/Content/images/Message-Add.png" /></button>
</span>
</div>
}
I need to pass the text input inside the input control to the control as part of the routeValues. The above content="" is going to do that.
How can this be done?

You should be using the HTML Helpers:
#Html.EditorFor(m => m.CommentContent);
This will model bind the value in CommentContent (Which should be a property in your model) and pass it back up to the server when the form is POSTED.
As an alternative solution, you can also serialize the form and pass it up via AJAX.
As #Ic has pointed out you could also use:
#Html.TextBoxFor(m => m.CommentContent, new { #class = "form-control" });
Which will change the input type to text and also add your CSS class form-control.

jQuery .show() method not working inside .click function

Below is code that is supposed to make a text box appear/disappear based on whether or not a box is checked (the text box is hidden when the page loads). All the alerts are firing properly, however I cannot get the check box to .show() function to work.
Here is the jQuery. This from inside the document.ready function. You can see from what I've commented out the other two methods I've tried (neither worked).
$('#OverrideRegionInd').click(function () {
alert($(this).is(':checked'));
if ($(this).is(':checked')) {
alert("inside if");
$('#Region').show();
//$('#Region').css("display", "inline");
// $('#Region').toggle();
$('#territoryName').html("");
$('#Region').val("");
} else {
alert("inside else");
$('#Region').hide();
//$('#Region').css("display", "none");
// $('#Region').toggle();
}
});
Here is the code from the view
<div class="M-editor-label">
#Html.LabelFor(model => model.Region)
</div>
<div class="M-editor-field" id="territoryName">
#Html.TextBoxFor(model => model.Region, new { style = "display: none;" })
#Html.ValidationMessageFor(model => model.Region)
</div>
Here is the HTML once the page is rendered for this particular set of <div>'s
<div class="M-editor-label">
<label for="Region">Territory</label>
</div>
<div class="M-editor-field" id="territoryName">
<input id="Region" name="Region" style="display: none;" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
</div>

That's because you're setting:
$('#territoryName').html("");
That's the parent of #Region, you're effectively removing the #Region element with that line. Take that out and it'll work fine.
DEMO