#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.
Related
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 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 ?
The Microsoft documentation mentions the #ontouchenter and #ontouchleave events.
I would like to utilize these to enable drag and drop in my Blazor app, but it doesn't seem like these events are firing. There is not a lot of examples of other mentions on the web.
Does anyone know whether they are supposed to work? Do I need to do any special to make them work?
UPDATE
I think it is because the element position is not changed, as the normal draggable ensures via mouse drag.
Is it possible to change/update the elements position (x,y) via c# in Blazor?
Example
The following is a minimal example
Index.razor
#page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<div style="height: 300px;width: 300px;background-color: cornflowerblue;touch-action: none; border: medium;"
ondragover="event.preventDefault();"
#ontouchenter="OnTouch"
#ontouchleave="OnTouch"
#ondragenter="OnDrag"
#ondragleave="OnDrag"
#ondrop="OnDrop">
Drag to Me
</div>
<DragItem></DragItem>
<DragItem></DragItem>
<DragItem></DragItem>
<DragItem></DragItem>
#code{
private void OnTouch(TouchEventArgs args)
{
Console.WriteLine("Index:OnTouch:" + args.Type);
}
void OnDrag(DragEventArgs args)
{
Console.WriteLine("Index:OnDrag:" + args.Type);
}
void OnDrop(DragEventArgs args)
{
Console.WriteLine("Index:OnDrop:" + args.Type);
}
}
DragItem.razor
<div
draggable="true"
#ontouchmove="OnTouchMove"
style=" cursor: move;
background-color: cornflowerblue;
touch-action: none;
user-select: none;
border: medium;
min-height: 100px;
min-width: 100px">
DragMe
</div>
#code {
private void OnTouch(TouchEventArgs args)
{
Console.WriteLine("OnTouch:" + args.Type);
}
private void OnTouchMove(TouchEventArgs args)
{
//double x = args.ChangedTouches[0].ClientX;
//double y = args.ChangedTouches[0].ClientY;
//--> I guess this is where I should update my dragitem position
//--> Normal drag via mouse automatically updates position, but not touchMove
}
void OnDrag(DragEventArgs args)
{
Console.WriteLine("OnDrag:" + args.Type);
}
void OnDrop(DragEventArgs args)
{
Console.WriteLine("OnDrop:" + args.Type);
}
void StoryClicked()
{
Console.WriteLine("StoryClicked");
}
}
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()