I'm having a hard time understanding this code that I was given to work on as I am a newbie at Javascript/HTML/C# Razor
Currently I have the following
<li class="control-group">
<label for="autoReload" class="control-label">Auto Reload</label>
<div class="controls">
<div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
<button type="button" data-value="no" class="btn active">No</button>
<button type="button" data-value="yes" class="btn">Yes</button>
</div>
<input type="hidden" class="radioHidden" value="'$'+#(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
</div>
</li>
What I'm looking to do is when I click the button No, change the value in that text box to False, or if I click true then I want that value to be changed to true
I have found the following Javascript,
<script>
$(document).ready(function(){
$("#autoReload").on('change',function(){
if ($(this).val() == 'yes') {
$(".saveCardSwitch button[data-value='true']").trigger('click');
$(".saveCardSwitch button").each(function(){
$(this).addClass('disabled').prop('disabled',true);
});
}
if ($(this).val() == 'no') {
$(".saveCardSwitch button").each(function(){
$(this).removeClass('disabled').prop('disabled',false);
});
}
});
});
</script>
Now I've tried switching the actual data-values on my buttons to true/false, but when I do that the hidden message that I have open doesnt show anymore so I'm kind of stuck at this point. I'd also like to clarify, when I call #(Model.IsReload ? "True" : "False" that passes the value back to my controller in the post method right?
As you are using Jquery, You can do it the following way:
$('.btn').click(function(){
$('.radioHidden').val($(this).attr('data-value') === 'yes');
});
Fiddle
From what I understand all you need is a function to set a value on a specific element. You can do that with the following code
<li class="control-group">
<label for="autoReload" class="control-label">Auto Reload</label>
<div class="controls">
<div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
<button type="button" data-value="no" onclick="setValue(false, 'autoReload');" class="btn active">No</button>
<button type="button" data-value="yes" onclick="setValue(true, 'autoReload');" class="btn">Yes</button>
</div>
<input type="hidden" class="radioHidden" value="" id="autoReload" name="IsAutoReload">
</div>
and your function setValue can be something like:
var setValue = function(value, id)
{
var domEl = document.getElementById(id);
domEl.value = value;
}
You don't appear to have any events bound to the buttons that you want to use to toggle that is the first thing you need, an onclick event you can do this
<button type="button" data-value="no" onclick="updateHidden(this.dataset.value)" class="btn active">No</button>
<button type="button" data-value="yes" onclick="updateHidden(this.dataset.value)" class="btn">Yes</button>
then the code to update the hidden input is
function updateHidden(value){
value = value==="yes"?"TRUE":"FALSE";
document.getElementById("autoReload").value = value;
}
Related
I'm writing an application using Blazor server side and .Net 5. I want when I write text in the search box it will show results in new divs. However, the search results are not displayed. When I debug the code from service works fine.
#page "/"
#using MovieSearch.Service
#using MovieSearch.Data
#using MovieSearch.Helpness
#inject IOMDbService service
<div class="movie-search">
<div class="search-container">
<form action="/">
<input type="text" placeholder="Find a movie" #bind-value="#searchTerm" />
<button type="submit" #onclick="FindMovies"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="movies">
#if(moviesResult != null)
{
if(!moviesResult.Success)
{
foreach(var error in moviesResult.Errors)
{
<p>#error.Message</p>
}
}
else
{
foreach(var movie in moviesResult.Value)
{
<div class="movie">
<p>#movie.Title</p>
<img src="#movie.Poster" />
</div>
}
}
}
</div>
#code
{
private string searchTerm;
private Result<IEnumerable<Movie>> moviesResult;
async Task FindMovies()
{
moviesResult = await service.FindMovies(searchTerm);
}
}
What can I do to view the results?
Try changing this part of your code from
<form action="/">
<input type="text" placeholder="Find a movie" #bind-value="#searchTerm" />
<button type="submit" #onclick="FindMovies"><i class="fa fa-search"></i></button>
</form>
to just this
<input type="text" placeholder="Find a movie" #bind-value="#searchTerm" />
<button #onclick="FindMovies"><i class="fa fa-search"></i></button>
So in other words, remove the form tags, as well as removing the type on the button. I believe that blazor is now actually trying to post the form to whatever action you specified in the form as opposed to the onclick handler you assigned to your button.
I have a search form on view that displays check boxes as a list which may be selected multi, on each item check, value comes in between button tags.
In Controller Action IFormCollection provides various key value but not that button which tags contain results, it always returns null
<button type="button" data-toggle="dropdown" name="State" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn">---</button>
<div class="dropdown-menu js-dropdown-menu js-select-checkboxes">
<ul>
<li>
<input id="checkbox_type_1" type="checkbox" name="checkbox_type_1" class="in-checkbox">
<label for="checkbox_type_1" data-toggle="tooltip" data-placement="left" title="Tooltip on top" class="in-label">Punjab</label>
</li>
<li>
<input id="checkbox_type_2" type="checkbox" name="checkbox_type_2" class="in-checkbox">
<label for="checkbox_type_2" data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="in-label">Sindh</label>
</li>
<li>
<input id="checkbox_type_3" type="checkbox" name="checkbox_type_3" class="in-checkbox">
<label for="checkbox_type_3" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Balochistan</label>
</li>
<li>
<input id="checkbox_type_4" type="checkbox" name="checkbox_type_4" class="in-checkbox">
<label for="checkbox_type_4" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Khaybar Pakhtonkhwa</label>
</li>
<li>
<input id="checkbox_type_5" type="checkbox" name="checkbox_type_5" class="in-checkbox">
<label for="checkbox_type_5" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Azad Kashmir</label>
</li>
<li>
<input id="checkbox_type_6" type="checkbox" name="checkbox_type_6" class="in-checkbox">
<label for="checkbox_type_6" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Gilgit Baltistan</label>
</li>
</ul>
<!-- end of block .dropdown-menu-->
</div>
In Page Source:
<button type="button" data-toggle="dropdown" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn" aria-expanded="true">Punjab, Sindh, Balochistan</button>
In Controller Action Result:
public IActionResult SearchPerson(IFormCollection formCollection)
{
string txtState = formCollection["State"]; << Null}
I Expect the output as string i.e. in between tags
Solution Found with a little Trick i.e.
Step 1. Created a hidden type input
<input type="hidden" id="State" name="State" placeholder="" class="form-control">
Step 2. Create a javascript/jquery function to set hidden input value equals button tags inner html
function onsubmitclick() {
var x = document.getElementById('btnState').innerHTML;
alert(x);
$('#State').val(x);
};
Step 3. Call function at submit button i.e. will fire before moving to controller action.
<button type="submit" onclick="onsubmitclick()" asp-controller="Home" asp-action="SearchPerson" class="form__submit" >Search</button>
Step 4. Accessed hidden input value at controller from IFormCollection.
public IActionResult SearchPerson(IFormCollection formCollection){string txtState = formCollection["State"];}
Done!
You could not get the text value of <button> in IFormCollection.
For a workaround, you could add a hidden input in the form and pass the selected values to it when you click.Then you could get the value of the input in IFormCollection when you submit.
<input type="hidden" id="States" name="States" />
<button type="button" data-toggle="dropdown" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn" aria-expanded="true">---</button>
JS code:
#section Scripts{
<script>
$(document).ready(function () {
$(".dropdown-menu input[type=checkbox]").each(function () {
$(this).change(function () {
var line = "";
$(".dropdown-menu input[type=checkbox]").each(function () {
if ($(this).is(":checked")) {
line += $("+ label", this).text() + ",";
}
});
$("#States").val(line);
$("button.dropdown-toggle").text(line);
});
});
});
</script>
Controller:
[HttpPost]
public IActionResult SearchPerson(IFormCollection formCollection)
{
string txtState = formCollection["States"];
My goal is to search employee in active directory and allow me to choose a search option in drop down.
For example: If I choose the EmployeeNumber the form with execute and search for EmployeeNumber that match in input box value. -"SamAccountName is default search"
Note:
When I click the EmployeeNumber it should submit the form.
The SamAccountName button is working.
Problem: How to use different submit or search option?
#using (Html.BeginForm("SystemPrepared", "Home", FormMethod.Get))
{
#Html.TextBox("spq", null, new { #class = "form-control", #placeholder = "Search..."})
<div class="input-group-btn">
<button class="btn btn-default" type="submit">SamAccountName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>SamAccountName</li>
<li>EmployeeNumber</li>
<li>GivenName</li>
<li>Surname</li>
<li>EmailAddress</li>
<li>Enable</li>
<li>GUID</li>
<li>SID</li>
</ul>
</div>
}
What I've tried:
<li>EmployeeNumber</li>
And get the value using request query string but the problem is the form din't submit and spq is empty or null.
Update:
Requested by Stephen
public ActionResult SystemPrepared(string spq)
{
coockieActiveDirectory2 = db.ActiveDirectory2.Where(user =>
user.SamAccountName.Contains(spq));
return View(coockieActiveDirectory2);
}
Currently this is just what I have in controller
The Bootstrap control you're using isn't really designed for this task. What you'd really need is something like:
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><button type="submit" name="searchType" value="SamAccountName">SamAccountName</button></li>
<li><button type="submit" name="searchType" value="EmployeeNumber">EmployeeNumber</button></li>
<li><button type="submit" name="searchType" value="GivenName">GivenName</button></li>
...
</ul>
In other words, when you clicked one of the items, it would submit the form and post along with it some value for searchType which you could then use to do the proper type of search based on which the user clicked. However, the Bootstrap styles don't handle that scenario. That doesn't mean that you couldn't add your own styles to make it look like a regular button dropdown though.
Alternatively, if you want to stick with the default Bootstrap styles/control and don't mind using JavaScript you could do something like:
<input type="hidden" name="searchType" id="SearchType" />
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>SamAccountName</li>
<li>EmployeeNumber</li>
<li>GivenName</li>
...
</ul>
And then add some script like the following:
$('.search-submit').on('click', function (e) {
e.preventDefault();
var searchType = $(this).data('search-type');
$('#SearchType').val(searchType);
$('#YourForm').submit();
});
In other words, you bind an event handler to your button dropdown links that sets a hidden field to the right value and then posts the form.
I have created a search function on my website that allows the user to select what table they wnat to search for. The select list is within a dropdown rendered within a dropdown menu using bootstrap. The issue I'm facing is that when the form is run the value of the selected item from the dropdown menu that is passed into the controller is "" instead of the value that was selected in the dropdown menu.
Any help would be grateful.
** search function**
<div class="col-lg-6">
#{using (Html.BeginForm("Results", "Searchv2", FormMethod.Get))
{
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
#foreach (var searchType in new[] { "User", "Restaurant", "Cuisine" })
{
<li>#searchType</li>
}
</ul>
<input type="hidden" name="SearchBy" />
</div>
<input type="text" class="form-control" placeholder="Search" name="SearchString" id="SearchString">
</div>
}}
</div>
jquery that finds the value
<script>
$(".dropdown-menu").click(function () {
$("input[name='SearchBy']").val($(this).html());
});
</script>
you have to write click event on anchor tag, as you have anchor tag inside <li> like this:
<ul class="dropdown-menu">
<li>
<a>SearchText</a>
</li>
</ul>
$(".dropdown-menu li a").click(function () {
$("input[name='SearchBy']").val($(this).html());
});
I believe you want to set the SearchBy value by getting the value of the selected item:
<script>
$(".dropdown-menu").click(function () {
$("input[name='SearchBy']").val($(this).val());
});
</script>
if you want to get the value of text in between the <a></a> tags, try use .text() instead of html()
First you are selecting the ul not the a inside its li and second you should use jquery text function:
<script>
$('.dropdown-menu li a').click(function (e) {
e.preventDefault();
$('input[name="SearchBy"]').val($(this).text());
});
</script>
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