i am trying to display treeview structure for maintower and subtower (subtower has to be displayed under maintower) in mvc4. I used the below code in View. It displays structure like,
maintower1
subtower1
maintower1
subtower2
but, i want to display like
maintower1
subtower1
subtower2
Can anyone help me please?
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
<div id="treeview">
#if( maintower != #Html.Encode(dr[0]))
{
maintower = #Html.Encode(dr[0]);
<ul>
<li>#Html.Encode(dr[0])
<ul>
#foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
{
if( maintower == #Html.Encode(drow [0]))
{
<li> #Html.Encode(drow [1]) </li>
}
}
</ul>
</li>
</ul>
}
</div>
}
Before doing the following steps please make sure your ViewBag.treedata is in order by its column 0 (Order by ViewBag.treedata.Column[0])
<body style="font-family : Arial; ">
#{
var name = "";
}
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
<div id="treeview">
if( name != #Html.Encode(dr[0]))
{
name = #Html.Encode(dr[0]);
<ul>
<li>#Html.Encode(dr[0])
<ul>
#foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
{
if( name == #Html.Encode(drow [0])
{
<li>#Html.Encode(drow [1])</li>
}
}
</ul>
</li>
</ul>
}
</div>
}
</body>
You must use two loops one for maintower and one for subtower
Or something like that
#{var previousMainTower = String.Empty;
var closePreviousTag = false;}
<div id="treeview">
<ul>
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
#if(previousMainTower != dr[0])
{
if(closePreviousTag)
{
</ul>
</li>
}
<li>#Html.Encode(dr[0])
<ul>
<li>#Html.Encode(dr[1])</li>
#closePreviousTag = false;
}
else
{
<li>#Html.Encode(dr[1])</li>
#closePreviousTag = true;
}
#previousMainTower = dr[0]
}
</ul>
</div>
It's not a fully working code it's shows how you should figured it out.
In short you must check in each step of the loop if the current 'maintower' is the same as in previous steap and if it's equal then do not create it.
Related
I have web page and My web page is left without any reaction after the website is launched and the page is locked. Codes are as bellow:
#attribute [Authorize]
#inject IReciption _Reception;
<section class="p-top-10 p-bottom-10 bgcolor rtl">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="shortcode_modules">
<div class="modules__title">
<h3>Reception</h3>
#*<h3>RegReception<InfoBoxComponent StrMessage="#Message1"></InfoBoxComponent></h3>*#
</div>
<div class="text-center module--social">
<div class="social social--color--filled">
<ul>
<li>
<div>
<input type="text" #bind-value="#StrSerialNumber" placeholder="SerialNumber">
</div>
</li>
<li>
#if (!IsSaveLoading)
{
<button class="btn btn-primary" #onclick="(() => CheckTheSerial())" style="margin-top:15px;">Testing</button>
}
else
{
<button class="btn btn-primary" style="margin-top:15px;">
<i class="fa fa-spin fa-spinner"></i> Searching
</button>
}
</li>
#if (prodSrCls.Responses.Statue != LosacoWeb.Shared.Enumes.StatueResponse.NoStatus)
{
#if (prodSrCls.Responses.Statue == LosacoWeb.Shared.Enumes.StatueResponse.Success)
{
<br />
<li><h4><b class="primary">Group:</b> #prodSrCls.GoodsGroupItem_Name</h4></li>
<br />
<li><h4><b class="primary">Model:</b> #prodSrCls.Goods_GoodsName </h4></li>
}
#if (prodSrCls.Responses.Statue == LosacoWeb.Shared.Enumes.StatueResponse.Failed)
{
<br />
<li>
<h3>
<span class="danger icon-close"></span><b class="danger">
Serial Is not Correct
</b>
</h3>
</li>
}
}
</ul>
</div>
</div>
</div>
</div>
<!-- end .col-md-6 -->
</div>
<!-- end .row -->
</div>
<!-- end .container -->
</section>
And C# Programming Code Part Is As Bellow:
public bool IsSaveLoading = false;
private string serial;
public String StrSerialNumber
{
get
{
return serial;
}
set
{
serial = value;
TextChangedEvetFotCleaning();
}
}
ProdSerialClasses prodSrCls
= new ProdSerialClasses();
[Parameter]
public EventCallback<ProdSerialClasses> OnFindSerial { get; set; }
protected override async Task OnInitializedAsync()
{
IsSaveLoading = false;
}
My answer is that how I can resolve my problem. I have to use this code in a online shop project. My other pages work fine. but this page become lock after run.
Hi. Change second part to :
public bool IsSaveLoading = false;
public String StrSerialNumber = "0";
ProdSerialClasses prodSrCls = new ProdSerialClasses();
[Parameter]
public EventCallback<ProdSerialClasses> OnFindSerial { get; set; }
protected override async Task OnInitializedAsync()
{
IsSaveLoading = false;
}
you must add value to you variable StrSerialNumber = "0" because in can cause of error with null value.
I hope your code problem is solved this way.
You should also check for prolapse before using prodSrCls. If it is not null, you can use it. If you do not bet, you may still get the error.
#if(prodSrCls != null)
{
// your codes . . .
}
Please do not forget to confirm the answer.
I have an ASP.Net Core MVC web application and in my view I have a bootstrap carousel. I am trapping for the change event so I can get additional information of the image show. My problem is the image is not changing fast enough. When the change event fires and I get the unique image name it is still on the first image not the one being shown meaning the additional information I get is wrong.
Below is my bootstrap carousel: -
<div id="divCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<ul class="carousel-indicators">
#{
int Pos = 0;
}
#foreach (var photo in Model.PhotosList)
{
if (Pos == 0)
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id class="active"></li>
}
else
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id></li>
}
Pos++;
}
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
#{
Int16 i = 0;
}
#foreach (var photo in Model.PhotosList)
{
var photoPath = "~/Photos/" + photo.PhotoPath;
if (i == 0)
{
<div class="carousel-item active">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
else
{
<div class="carousel-item">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
i++;
}
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#divCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#divCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
And here is my javascript to trap for the change event: -
#section Scripts {
<script>
function showPhotoDetails() {
var url = $('.carousel-item.active img').attr('src');
var photopath = url.split('?');
photopath[0] = photopath[0].substring(8, photopath[0].length);
$.ajax({
type: 'POST',
url: "/Photos/GetValue?path=" + photopath[0],
dataType: "json",
async: false,
success: function (data) {
$("input#txtCreatedBy").val(data.createdBy);
$("input#txtDateCreated").val(data.dateCreated);
$("textarea#txtNotes").val(data.notes);
}
});
}
$(document).ready(function () {
showPhotoDetails();
$('.custom-file-input').on("change", function () {
var fileLabel = $(this).next('.custom-file-label');
var files = $(this)[0].files;
if (files.length > 1) {
fileLabel.html(files.length + ' files selected.');
} else if (files.length == 1) {
fileLabel.html(files[0].name);
}
});
$('.carousel-control-previous').on("click", function () {
showPhotoDetails();
});
$('.carousel-control-next').on("click", function () {
showPhotoDetails();
});
});
</script>
}
I basically need to get the image name after the slide event. Any help much appreciated.
Thank you,
A managed to get this sorted. Basically rather than trapping for the click event of the previous and next I use the slid.bs.carousel class. All working fine now.
I am working on a Asp.net core 2.2 project and use ReflectionIT.Mvc.Paging package for paging.
Every thing is ok but i want to change paging style in my view.
Here is code to use Pager view component
<nav>
#await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })
</nav>
And here is paging pic :
I want to write First And Last instead of 1 And 15 in above pic and want to change some css styles.
You can also create your own Pager view if you want to. You store it in the folder Views\Shared\Components\Pager :
You can for instance call the AddPaging method which you can use to set the PagingOptions. This allows you to specify which View is used for the Pager ViewComponent , in ConfigureServicesfunction :
// Register ViewComponent using an EmbeddedFileProvider & setting some options
services.AddPaging(options => {
options.ViewName = "Bootstrap5";
options.HtmlIndicatorDown = " <span>↓</span>";
options.HtmlIndicatorUp = " <span>↑</span>";
});
Modify the Bootstrap5.cshtml to fit your requirement :
#model ReflectionIT.Mvc.Paging.IPagingList
#* Fake Boostrap 5 based pager *#
#{
var start = this.Model.StartPageIndex;
var stop = this.Model.StopPageIndex;
}
#if (this.Model.PageCount > 1) {
<ul class="pagination pagination-sm justify-content-end">
#if (start > 1) {
<li class="page-item">
<a href="#Url.Action(Model.Action, Model.GetRouteValueForPage(1))" aria-label="First" class="page-link">
<span aria-hidden="true">First</span>
</a>
</li>
}
#if (this.Model.PageIndex > 1) {
<li class="page-item">
<a href="#Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageIndex - 1))" aria-label="Previous" class="page-link">
<span aria-hidden="true">«</span>
</a>
</li>
}
#for (int i = start; i <= stop; i++) {
<li class="page-item #((Model.PageIndex == i) ? "active" : null)">
#if (i == 1)
{
#Html.ActionLink("First", Model.Action, Model.GetRouteValueForPage(i), new { #class = "page-link" })
}
else{
#Html.ActionLink(i.ToString(), Model.Action, Model.GetRouteValueForPage(i), new { #class = "page-link" })
}
</li>
}
#if (this.Model.PageIndex < this.Model.PageCount) {
<li class="page-item">
<a href="#Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageIndex + 1))" aria-label="Next" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>
}
#if (stop < this.Model.PageCount) {
<li class="page-item">
<a href="#Url.Action(Model.Action, Model.GetRouteValueForPage(this.Model.PageCount))" aria-label="Last" class="page-link">
<span aria-hidden="true">Last</span>
</a>
</li>
}
</ul>
}
Output :
Try this one
services.AddPaging(options => {
options.ViewName = "Bootstrap4";
options.HtmlIndicatorDown = " <span>↓</span>";
options.HtmlIndicatorUp = " <span>↑</span>";
});
Hy everyone,
sorry if my question is duplicate of some, but i didn't found solution for my problem.
However, i'm trying to implement custom like button for posts in my asp.net core mvc application and everything works fine, except when i click on like button, it changes color (like on facebook, blue color etc.) not just for current logged user, but for all logged users. But when other users refresh window, everything is back to normal...
What I want is, when I click on "like" button, to update "like counter" FOR EVERYONE and to change color JUST FOR ME (when I came back some other day, that I know that I liked that post.)
Does someone know how to acomplish this?
Here's my code
Index.cshtml
#using Fitness_Centar.Data
#using Fitness_Centar.Data.Models
#using Fitness_Centar.Web.Areas.ModulClan.ViewModels
#using Fitness_Centar.Web.Helper
#model List<TimelineVM>
#{
ViewData["Title"] = "Index";
MyContext _ctx = (MyContext)ViewData["_ctx"];
User u = Context.GetLoggedUser();
int userId = -1;
if (u.Coach != null)
{
userId = u.Coach.CoachId;
}
if (u.Employee != null)
{
userId = u.Employee.EmployeeId;
}
if (u.Member != null)
{
userId = u.Member.MemberId;
}
}
<div class="row">
<div class="col-sm-12 col-md-9 col-lg-9">
<div class="box box-info custom aktivnosti">
<div class="box-header with-border padding-l-25">
<h3 class="box-title">Activities</h3>
</div>
<div class="box-body">
#foreach (var p in Model)
{
<div id="#p.Post.PostClanovaId" class="post">
<div class="user-info">
<img class="img-circle img-bordered-sm" src="~/AdminLTE/dist/img/avatar5.png" />
<div class="desc">
<span class="username">#p.Post.User.Name #p.Post.User.LastName</span>
<span class="post-description">Published: #p.Post.PostDate</span>
</div>
</div>
<div class="post-content text-justify">
<p>#p.Post.Content</p>
</div>
<div class="post-footer">
#{int n = p.Post.PostId + 1594;}
#{
var c = _ctx.Likes.Where(x => x.UserId == userId && x.PostId == p.Post.PostId).FirstOrDefault();
if (c != null && c.UserId == userId)
{
<a href="" id="post-#n" class="likeButton link-black liked" data-postid="#p.Post.PostId" data-userid="#userId">
<i class="fa fa-thumbs-o-up margin-r-5"></i>
Like
</a>
}
else
{
<a href="" id="post-#n" class="likeButton link-black" data-postid="#p.Post.PostId" data-userid="#userId">
<i class="fa fa-thumbs-o-up margin-r-5"></i>
Like
</a>
}
}
<div class="num-of-likes" id="post-#n-numOfLikes">
#p.Likes.Count()
<span class="usersThatLiked">
#{
string g = "";
foreach (var l in p.Likes)
{
g += l.User.Ime + " " + l.Clan.Prezime;
}
#g;
}
</span>
</div>
<div class="comment pull-right">
<a href="#" class="link-black">
<i class="fa fa-comments-o margin-r-5"></i>
Comments
</a>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Komentiraj...">
<span class="input-group-btn">
<button type="button" class="btn btn-info btn-flat"><i class="fa fa-check"></i></button>
</span>
</div>
</div>
</div>
}
</div>
</div>
</div>
javascript.js
"use strict";
var $connection = new signalR.HubConnectionBuilder().withUrl("/ModulClan/Helper/LajkHub").build();
$(".likeButton").prop("disabled", true);
$connection.on("ReceiveMessage", function (numOfLikes, postId) {
var x = postId + 1594;
var s = "#post-" + x;
if ($(s).hasClass("liked")) {
$(s).removeClass("liked");
} else {
$(s).addClass("liked");
}
$(s + "-num-of-likes").text(numOfLikes);
});
$connection.start().then(function () {
$(".likeButton").prop("disabled", false);
}).catch(function (err) {
return console.error(err.toString());
});
$(".likeButton").bind("click", function (event) {
var userId = $(this).attr("data-userid");
var postId = $(this).attr("data-postid");
$connection.invoke("SetLike", userId, postId).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
LikeHub.cs
public class LikeHub : Hub
{
private readonly MyContext _ctx;
public LikeHub (MyContext context)
{
_ctx = context;
}
public async Task SetLike(int userId, int postId)
{
Likes l = new Likes();
Likes temp = _ctx.Likes.Where(x => x.PostId == postId && x.UserId == userId).FirstOrDefault();
if(temp != null)
{
_ctx.Likes.Remove(temp);
}
else
{
_ctx.Likes.Add(l);
l.UserId = userId;
l.PostId = postId;
}
_ctx.SaveChanges();
int numOfLikes= _ctx.Likes.Where(x => x.PostId == postId).Count();
await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId);
}
}
You can identify the current user (who clicked the like button) via
var userId = $(this).attr("data-userid"); (as you did when someone clicks the like button).
But the problem is this, you are not checking for the userId when the SetLike is succeeded (inside the on ReceiveMessage javascript function).
so to solve this you need to send the userId of the user who clicked the like button from the backend to the frontend (to the on("ReceiveMessage"..) function)
e.g.: await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId, userId);
and on the ReciveMessage check if the userId you got from the backend match the current user who's browsing by var currentUserId = $(this).attr("data-userid");
if they are equal then color the like button, otherwise just update the like counter.
this way would solve your issue.
Another solution would be to send 2 requests one is specific for the user who clicked the like button and the other is to everyone to update the like counter.
I'm trying a multi-level menu in mvc4.
When I run the code, main children of my menu and also their main children are displayed correctly
but at third level, the following menus display over each other
what should I do?
here is my code:
#helper getmenutree(int? parentId)
{
foreach (var item in Model.Where(p => p.ParentId == parentId))
{
<li>
#item.Name
<ul>
#if (item.Groups1.Any())
{
#getmenutree(item.Id)
}
</ul>
</li>
}
}
<nav id="main_nav">
<ul>
#getmenutree(null)
</ul>
</nav>