I need to change the items from a list, the list is a component that shows numbers, but its numbers depend from other component named component2, and if component2 change her value component1 should reset and change to the new numbers. component2 is an other list.
this is component1 :
<div>
<div class="d-flex listbox-box" #onclick="DropDown" style="height:#(height)px !important; width:#(width)px !important;padding:0px;">
#if (ItemIsSelected)
{
<IterationItem height="#height" width="#width" _Iteration="Iteration[SelectedIndex]" />
}else{
<div class="align-self-center" style="width:100%;">
<div class="float-end">
<div class=" icon-container" style="transform: rotate(#(rotation)deg) !important;">
<i class="bi bi-chevron-compact-down icon-listbox"/>
</div>
</div>
</div>
}
</div>
#if (ShowDropDown && Iteration != null)
{
<div class="example dropdown-listbox" style="width:#(width)px !important;height:#(height * 3)px !important">
#for (int i = 0; i < Iteration.Length-1; i++)
{
var index = i;
<div id="#i" value="#SelectedIndex" #onclick='eventargs => HandleValueChange(eventargs,index)'>
<IterationItem height="#height" width="#width" _Iteration="Iteration[i]" />
</div>
<hr class="listbox-item-separator"/>
}
</div>
}
</div>
#code {
int rotation = 0;
[Parameter] public int SelectedIndex { get; set; } = -1;
[Parameter] public bool ShowDropDown { get; set; } = false;
[Parameter] public bool ItemIsSelected { get; set; } = false;
[Parameter] public Iteration[] Iteration { get; set; }
public int height { get; set; } = 40;
public int width { get; set; } = 120;
private void DropDown()
{
ShowDropDown = ShowDropDown ? false : true;
if (ShowDropDown)
{
rotation = 180;
}
else
{
rotation = 0;
}
}
protected void HandleValueChange(MouseEventArgs evt, int index)
{
SelectedIndex = index;
DropDown();
ItemIsSelected = true;
}
}
and this is the event that make swap the numbers:
void ClickHandler(int num)
{
_modelValue = num;
_selectedModel =
XqueryFunctions.CreatrModelById(_modelValue,"");
}
and this is how im trying to change it right now :
<ListBoxIteration Iteration="#_selectedModel.Iterations" />
#code {
private string ProyectName { get; set; } = "Fred";
int _modelValue;
Model _selectedModel = new ();
void ClickHandler(int num)
{
_modelValue = num;
_selectedModel =
XqueryFunctions.CreatrModelById(_modelValue,"");
}
}
This code works, i had other problem. I should remove this post ?
Related
#foreach (var item in RootOfJson.results)
{
<div class="card" #onmouseout="#OnMouseOut" #onmouseover="#OnMouseOver">
<img class="#Imgdisplay" src=#item.image_url alt="...">
</div>
}
#code {
bool _IsHovering = false;
[Parameter]
public string Imgdisplay { get; set; }
protected void OnMouseOver(MouseEventArgs mouseEvent)
{
if (!_IsHovering)
{
_IsHovering = true;
Imgdisplay = "d-none";
StateHasChanged();
}
}
protected void OnMouseOut(MouseEventArgs mouseEvent)
{
Imgdisplay = String.Empty;
_IsHovering = false;
StateHasChanged();
}
Above code changes the css for all divs, can you assist.. i would like to change the class to d-none on the specific div that my mouse event occurs.
I want to style this dropdown menu with bootstrap so it would appear a little nicer:
<ul id="menu">
#ShowTree(Model)
</ul>
#helper ShowTree(List<Category> categories)
{
foreach (var item in categories)
{
<li class="#(item.Children.Any() ? "parent" : "")">
#Html.ActionLink(item.Name, "", "")
#if (item.Children.Any())
{
<ul class="child">
#ShowTree(item.Children)
</ul>
}
</li>
}
}
So basically I'm assigning class="parent" if the category has any children and child if it has a parent.
Trying to get something like this:
Any help would be appreciated. Thanks
My category class:
public class Category
{
public string Name { get; set; }
public int? ParentCategoryId { get; set; }
public List<Category> Children { get; set; }
}
<ul id="menu">
#ShowTree(Model, 0)
</ul>
#helper ShowTree(List<Category> categories, int level)
{
foreach (var item in categories)
{
<li class="level_#level">
#Html.ActionLink(item.Name, "", "")
#if (item.Children.Any())
{
<ul class="child_#level">
#ShowTree(item.Children, level + 1)
</ul>
}
</li>
}
}
I have a few problems and this is my source code:
Controller:
public ActionResult Index()
{
List<Order> list = new List<Order>();
for (int i = 0; i < 20; i++)
{
list.Add(new Order());
}
list = DatabaseService.DBGetList<Order>("Order");
List<Order> orders = new List<Order>();
for (int i = 0; i < list.Count(); i++)
{
if (list[i].numberOfCompleted == 0)
{
orders.Add(new Order() { id = list[i].id, numberOfCompleted = list[i].numberOfCompleted, customerName = list[i].customerName, foods = list[i].foods });
}
}
return View(orders);
}
Order.cs
public List<Food> foods { get; set; }
public string customerName { get; set; }
public int id { get; set; }
public long totalCost = 0;
public int numberOfCompleted { get; set; }
View
#foreach (var item in Model)
{
<!--Display attributes-->
<!--Display Complete button-->
<div class="media-container-column col-12 col-lg-3 col-md-4">
<div class="mbr-section-btn align-right py-4">
<button class="btn btn-primary display-4 remove"
data-toggle="modal"
data-target="#exampleModal"
type="submit"
>Complete</button>
</div>
</div>
</div>
</div>
</section>
}
I want when clicking the Complete button, the numberOfComplete attribute will be assigned with food.Count(). What do I have to do to achieve this?
First you create a post form in view page of index action. Change this to your index.cshtml file.
#foreach (var item in Model)
{
<!--Display attributes-->
<!--Display Complete button-->
<div class="media-container-column col-12 col-lg-3 col-md-4">
#Html.BeginForm("Index","Controller",FormMethod.post)
{
<input type="text" name="id" display="none" value="#item.id"/>
<div class="mbr-section-btn align-right py-4">
<button class="btn btn-primary display-4 remove" data-toggle="modal" data-
target="#exampleModal" type="submit">Complete</button>
</div>
}
</div>
}
Then create post action method of index.
[HttpPost]
public ActionResult Index(Order obj)
{
Order order=Order().Find(x=>x.id=obj.id);
order.numberOfComplete = order.food.count();
return view();
}
I have a web app where users can posts items on the home page. Currently, the items on the home page are listed from oldest date to newest. This is not good because the users want to see the most recent posts when they visit the home page.
I have a DatePosted property in my post model that I use to track the time and date of a posting. How can I sort by Newest to Oldest using that property?
Here is my Action that takes users to the home page where they can see posts:
// GET: Posts
public ActionResult Index()
{
var posts = db.Posts.ToList();
return View(posts);
}
The View:
#model IEnumerable<DothanTrader.Models.Post>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{
int i = 5;
}
<div class="row">
#foreach (var item in Model)
{
if (i == 5)
{
#:</div><div class="row">
i = 1;
}
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
#Html.ActionLink(#item.Title, "Details", "Post", new { id = item.PostId }, null)
</div>
<div class="panel-body" style="min-height: 200px; max-height: 200px; ">
<img src="#Url.Content("~/Content/images/" + System.IO.Path.GetFileName(item.Image))" alt="" class="img-responsive" />
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-eye-open"> #item.Views</span> | <span class="glyphicon glyphicon-usd"> #item.Price</span>
<div class="pull-right">
<span>#item.DatePosted.Value.ToShortDateString()</span>
</div>
</div>
</div>
</div>
{ i++; }
}
</div>
The Model (just in case you need it):
public class Post
{
public int PostId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime? DatePosted { get; set; }
public string Image { get; set; }
public float Price { get; set; }
public int Views { get; set; }
public int Likes { get; set; }
public virtual ApplicationUser ApplicationUser { get; set; }
public string ApplicationUserId { get; set; }
}
Use db.Posts.OrderByDescending(p => p.DatePosted).ToList()
In using the FXVK virtual keyboard, I would like to alter the default skin to my own whims. The css tags I found in the source code of JavaFX. These were added to a custom css and loaded as seen below.
public static void setVirtualKeyboardCSS() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof PopupWindow) {
if (window.getScene() != null && window.getScene().getRoot() != null) {
Parent root = window.getScene().getRoot();
if (root.getChildrenUnmodifiable().size() > 0) {
Node popup = root.getChildrenUnmodifiable().get(0);
if (popup.lookup(".fxvk") != null) {
if (popup instanceof FXVK) {
FXVK keyboard = (FXVK)popup.lookup(".fxvk") // reference to the vk skin
ObservableList<String> sheets = keyboard.getStylesheets();
sheets.add("#customVK.css");
System.out.println("Setting keyboard stylesheet");
}
}
}
}
}
}
}
When the keyboard is expected to be shown, the call is made to this function and the output is shown that the call has been made. The CSS however does not change the layout. Using keyboard.getScene().getStyleSheets() instead of keyboard.getStyleSheets() also provides no working alternative.
Your code worked a lot for me, but, your error was that you must to call "setVirtualKeyboardCSS" function after the focus event propagates through the app and after the FXVK SubWindow is completely rendered.
public static final int TICK = 5;
public void setTimer() {
timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
public void run() {
Platform.runLater(() -> {
setVirtualKeyboradCss();
});
}
}, TICK, TICK);
}
public void setVirtualKeyboradCss() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof Popup) {
String vars = getClass().getResource("/css/variables.css").toExternalForm();
String embed = getClass().getResource("/css/embeded.css").toExternalForm();
FXVK keyboard = (FXVK) window.getScene().getRoot().lookup(".fxvk");
if (keyboard != null) {
if (!keyboard.getStylesheets().contains(embed)) {
keyboard.getStylesheets().addAll(vars, embed);
}
}
timer.cancel();
timer = null;
}
}
}
variables.css
#font-face {
-fx-font-family: "DINPro-Bold";
src: url('/fonts/DINPro-Bold.otf');
}
* {
-color-black: #303030;
-color-white: #FFFFFF;
-color-brownish-gray: #606060;
-color-yellow: #FCB400;
}
embeded.css
.fxvk {
-fx-background-color: -color-brownish-gray;
}
.fxvk .key{
-fx-font-family: "DINPro-Bold", "sans-serif";
-fx-border-image-source: null;
-fx-border-radius: 3;
-fx-background-radius: 3;
-fx-background-color: radial-gradient(center 50% 50%, radius 60%, derive(-color-white, -65%), -color-black);
}
.fxvk .key:hover{
-fx-background-color: -color-yellow;
}
.fxvk-secondary{
}
.shift-icon {
}
.capslock-icon{
}
.shift{
-fx-fill: -color-white;
}
.special {
-fx-fill: -color-white;
}
.backspace{
-fx-fill: -color-white;
}
.enter {
-fx-fill: -color-white;
}
.hide{
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}
.key-text {
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-alttext{
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-icon {
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}