Hi I want to do the following:
I have a Select Box when I click a page number in the process of changing product does well, what I want to do now is to click on a the Select Box icon automatically advance to the next value (page).
This is my Select Box, and work's fine:
<td colspan="3">page
<select id="numPage">
#if (ViewBag.pages == 0)
{
<option value="0" selected>0</option>
}
else
{
for (int i = 1; i <= ViewBag.pages; i++)
{
if (ViewBag.Nowpage == i)
{
<option id="Now" value="#(i)" selected>#(i)</option>
}
else
{
<option id="Next" value="#(i)">#(i)</option>
}
}
}
</select>
de #(ViewBag.pages)</td>
these are my buttons for first previous next or last pages:
<div>
<div id="startPage"><i class="fa fa-step-backward"></i></div>
<div id="previousPage"><i class="fa fa-backward"></i></div>
<div id="nextPage"><i class="fa fa-forward"></i></div>
<div id="lastPage"><i class="fa fa-step-forward"></i></div>
</div>
here I am on page 4 but I want to move to page 4 when clicking on the icon to advance:
when clicking the last page icon to advance to the last page in Select Box:
I'm programming with JQUERY and MVC 4 any suggestions?
Something like this works:
$("#nextPage").on("click", function(){
changeIndex(true);
});
$("#previousPage").on("click", function(){
changeIndex(false);
});
function changeIndex(val)
{
var i = $("#numPage").prop("selectedIndex");
$("#numPage").prop("selectedIndex", i + (val ? 1:-1));
$("#numPage").trigger("change");
}
$("#numPage").on("change", function(){
console.log("I got triggered");
});
jsFiddle: http://jsfiddle.net/4c7LV/
Make sure to check that the index is not outside the bounds on your select, by comparing it against how many items it has.
Related
I have a dropdown combobox and a submit button in my application.
What I want to achieve is: every time the submit button is pressed, I want the item that was selected in the dropdown menu to be displayed on the page.
Here is a screenshot with the combobox and the submit button
The combobox gets the data from a database here is the code for binding if you need it :
<select name="select_box" class="selectpicker" id="select_box" data-live-search-style="begins" data-live-search="true">
<option value="">Select Meal</option>
#foreach(var obj in Model)
{
<option value="">#obj.Name</option>
}
</select>
From what I've found after researching this problem , I found out that in Javascript there is a method : getElementById(id) which returns the element (in my case the combobox).
I wonder if there is something similar for C# or if there is an alternative?
Edit :
Here is an example of the thing that I'm trying to accomplish, with some differences : instead of a combobox the input is taken from a text field.
<!DOCTYPE html>
<html>
<head>
<script>
function testVariable() {
var strText = document.getElementById("textone").value;
var strText1 = document.getElementById("textTWO").value;
var result = strText + ' ' + strText1;
document.getElementById('spanResult').textContent = result;
}
</script>
</head>
<body>
<input type="text" id="textone" />
<input type="text" id="textTWO" />
<button onclick="testVariable()">Submit</button> <br />
<span id="spanResult">
</span>
</body>
</html>
No you can't do with C# in .NET Core MVC.
you can do it only with javascript.
but if you use .Net Core Blazor, you can do like this.
<p>
<label>
Select one or more cars:
<select #onchange="SelectedCarsChanged" multiple>
<option value="audi">Audi</option>
<option value="jeep">Jeep</option>
<option value="opel">Opel</option>
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</select>
</label>
</p>
<p>
Selected Cars: #string.Join(", ", SelectedCars)
</p>
#code {
public string[] SelectedCars { get; set; } = new string[] { };
void SelectedCarsChanged(ChangeEventArgs e)
{
if (e.Value is not null)
{
SelectedCars = (string[])e.Value;
}
}
}
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0#multiple-option-selection-with-select-elements
Long shot here, but I don't even know where to start. I maintain an MVC site. The form features several dozen drop menus. Rather than type them all out manually in the view, I'm generating them in loops.
Drop Menu options:
List<string> menuList = new List<string>() { "Correct", "Incorrect", "N/A" };
Drop Menu names (one of several lists on the page):
List<string> auditList1 = new List<string>() { "AE_FIRST","AE_SECOND","AE_THIRD", ... ,"AE_NTH"};
And here's the code to generate the drop menus:
#foreach (string audElement in auditList1)
{
string selected = "";
dropMenuCount = 0;
bool menuItemMatched = false;
<tr>
<td>#audElement: </td>
<td>
<select name="#audElement">
#foreach (string menuElement in menuList)
{
selected = "";
if (Model.AuditFound == true
&& auditElementCount < 45
&& menuElement == auditArray[auditElementCount].ToString()
&& menuItemMatched == false)
{
selected = "selected";
auditElementCount++;
menuItemMatched = true;
}
if (menuElement == null)
{
auditElementCount++;
}
if (dropMenuCount == 2 && menuItemMatched == false)
{
selected = "selected";
}
dropMenuCount++;
<option value=#menuElement #selected>#menuElement</option>
}
</select>
</td>
</tr>
}
So that's the setup. I did it this way because I'm working with an old, flat Oracle table that has 64 columns that I'm not allowed to change. Works as intended. They use the same form to enter a new audit or to review an existing audit, so that's the reason for the #selected logic.
The business unit is asking me to make a comments box mandatory if the user selects "Incorrect" for ANY of the drop menus.
<textarea name="AUDIT_COMMENTS" cols="66" rows="6">#audit_comments</textarea>
Best way to go about this?
Here is a demo,when one of the dropdownlists' values is incorrect,add required to textarea,otherwise,remove required.
View:
<form id="myform" method="post">
#foreach (string audElement in Model.auditList1)
{
<div>
<label>#audElement</label>
<select>
<option value="Correct">Correct</option>
<option value="Incorrect">Incorrect</option>
<option value="N/A"></option>
</select>
</div>
}
<textarea id="audit_comments" name="AUDIT_COMMENTS" cols="66" rows="6"></textarea>
<input type="submit" value="submit" />
</form>
<style>
.error {
color:red;
}
</style>
js:
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>
$(function () {
check();
})
$("#myform").validate();
$("select").change(function () {
check();
});
function check() {
var required = false;
$("select").each(function () {
if ($(this).val() == "Incorrect") {
required = true;
}
})
$('#audit_comments').attr('required', required);
}
</script>
result:
I couldn't find anything regarding my issue so I decided to post one myself.
I am using a navigation bar that has dropdown menu's. Whenever I open the dropdown and navigate to one of those pages, the navigation refreshes and closes the dropdown menu. The dropdown menu needs to stay open when I go over to one of the pages, I tried Model.Content.AncestorOrSelf().Descendants("document") to try and keep the navigation bar from refreshing but that doesn't seem to work (as people said).
Here's my menu structure:
Everything underneath "Hulp per browser" is in a dropdown and will disappear when I click on "Hulp per browser" again.
Here is my code:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="col-sm-3">
<div class="NavDigiCampuz">
<h3>Helpcentrum</h3>
<li class="NoBullet"><a class="NormalA" href="https://digicampuz.nl/">Terug naar digicampuz</a></li><br>
<ul class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.AncestorOrSelf(2).Descendants("document").ToList()){
foreach (var ItemChild in #item.Children("categorieMenu")){
if(ItemChild.Children.Any())
{
<li class="MenuItems"><p>#ItemChild.Name</p></li>
foreach (var Subitem in #ItemChild.Children){
if (Subitem.Children("hoofdstuk").Any())
{
<li class="item">
#if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<a class="NormalA aNav" href="#"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name <i id="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}else{
<a class="NormalA aNav" href="#">#Subitem.Name <i id ="Arrow" class="fa fa-arrow-right" style="font-size:10px;" aria-hidden="true"></i></a>
}
#foreach (var Finalitem in #Subitem.Children){
<ul class="submenu">
#if(Finalitem.GetPropertyValue("hoofdstukIcoon") != "") {
<br><li><a class="NormalA aNav" href="#Finalitem.Url"><i class="fa fa-#(Finalitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i>#Finalitem.Name </a></li>
}else{
<br><li><a class="NormalA aNav" href="#Finalitem.Url">#Finalitem.Name</a></li><br>
}
</ul>
}
</li>
}else
{
if(Subitem.GetPropertyValue("hoofdstukIcoon") != "") {
<li><a class="NormalA aNav" href="#Subitem.Url"><i class="fa fa-#(Subitem.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> #Subitem.Name</a></li>
}else{
<li><a class="NormalA aNav" href="#Subitem.Url">#Subitem.Name</a></li>
}
}
}
}
}
}
</ul>
</div>
</div>
<script>
$(".item").click(function(){
$(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
});
</script>
<style>
.submenu{
display: none;
list-style:none;
}
</style>
I do plan on removing the script and style from the page when everything works.
First thing you have several issues in the code:
Remove the Where to filter Children and keep it like var selection = Umbraco.TypedContent(documentRootNodeId).Children("Visible");
Cast your hoofdstukIcoon to string Subitem.GetPropertyValue<string>("hoofdstukIcoon")
The first <li class="noBullet"> should be in your nav-list, not outside.
You shouldn't put <br> between your list items, if you want margins use css.
Now we'll focus on your issue with the submenus. What you are doing with your javascript is just using the display property to hide or show your submenu but when the page is rendered, Razor has no idea if that should be hidden or not. To solve this you have to create a new class like .visible that can be used by Razor and Javascript.
Yous hould also move your <ul class="submenu"> out of your #foreach (var Finalitem in Subitem.Children) because what you are doing now is creating a new list with one item for each one.
You should also include a conditional before your submenu in case there a no children and we don't want submenu #if (Subitem.Children.Any()) {
The way of telling your submenu with Razor if it has to diplay or not is doing this:
var isVisible = Model.Content.IsDescendantOrSelf(Subitem) ? "visible" : "";
<ul class="submenu #isVisible">
So in that example your submenu will show if the current page is this Subitem or one of its children.
And your JS script would become this:
$(".item").click(function () {
$(this).children(".submenu").toggleClass('visible'); //it will display or hide your submenu when clicking the item.
});
And your CSS this:
<style>
.submenu {
display: none;
list-style: none;
}
.submenu.visible {
display: block;
}
</style>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
Year <span class="caret"></span>
</button>
<ul id='demolist' class="dropdown-menu" runat="server" role="menu">
</ul>
</div>
Hi All,
I am trying to populate the li items in a bootstrap dropdwnlist via code-behind. PFB the .cs code which is placed in page load.
HtmlGenericControl li;
for (int x = 3; x <= 10; x++)
{
li = new HtmlGenericControl("li");
li.Attributes.Add("class", ".dropdown p");
li.InnerText = "Item " + x;
li.Disabled = false;
demolist.Controls.Add(li);
}
PFB the js code which displays the selected value upon click.
<script type="text/javascript">
$(function(){
$(".dropdown-menu li ").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
</script>
Now, when i click on the dropdown it displays the list items,but there are 2 problems
When the mouse cursor is hovered over it
display a 'I' cursor (the one that appears when you are editing a doc or something) instead of finger pointer cursor(like how it displays for an asp:dropdown).
After clicking the list item the text of the dropdown do change, but the 'down arrow' disappears.
Could anyone please help me out on this ?
When you change the text of the button with jQuery .text(), you're overwriting the span class="caret" too.
Perhaps add another span into your button:
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
<span class="year">Year</span> <span class="caret"></span>
</button>
Then target that with your JS:
$(".dropdown-menu li").click(function(){
var li = $(this),
btn = $('.btn:first-child'); // Maybe need a better selector?
btn.find('span.year').text(li.text());
btn.val(li.text());
});
Also the cursor won't be a pointer as you're hovering over an li, not an a etc. But you could tweak your CSS to chose the cursor style:
.dropdown-menu li {
cursor: pointer;
}
I have a set of drop down lists plus 2 textboxes as my filter fields in an ASP.net (C#) data search page. I would like to find a way to validate the selected filters so that the user will have to provide minimum 2 search filters. Meaning user will have to select at least 1 drop down and provide text for one textbox or select 2 drop downs.
Which is the best way to achieve this?
Thanks
If you are using jQuery you could use it to do what you are referring to without needing to post to the server.
Here is a full test page I mocked up that will check the values. As long as two or more of the select elements with the SearchSelect class have a value other then null or "" the function will return true. If not it will color the boxes red that aren't selected. You could also display an error message letting them know they need to select another filter...or something to that extent.
<html>
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script>
function CheckFilters() {
var count = 0;
$('.SearchSelect').addClass('badSelect');
$('.SearchSelect').each(function() {
var sl = $(this);
if (sl.val() != null && sl.val() !== "") {
count++;
sl.removeClass('badSelect');
}
});
if (count >= 2) {
$('.SearchSelect').removeClass('badSelect');
return true;
} else {
return false;
}
}
$(document).ready(function(){
$('#SubmitButton').click(function(e) {
if(!CheckFilters()) e.preventDefault();
else alert("Success"); // in your case this line will probably be excluded and you will probably do nothing which will allow the POST/GET request to process
});
});
</script>
<style>
.badSelect{
border: 1px solid red;
}
</style>
</head>
<body>
<form>
<select class="SearchSelect" id="One">
<option value="">Select A Filter</option>
<option value="hasValue">Has a Value</option>
</select><br />
<select class="SearchSelect" id="Two">
<option value="">Select A Filter</option>
<option value="hasValue">Has a Value</option>
</select> <br />
<select class="SearchSelect" id="Three">
<option value="">Select A Filter</option>
<option value="hasValue">Has a Value</option>
</select> <br />
<button type="button" id="SubmitButton">Submit</button></form>
</body>
</html>