commenting c# and html code together in razor mvc [duplicate] - c#

This question already has answers here:
Razor comment syntax
(4 answers)
Closed 3 years ago.
I have mixed c# and html code in razor.
how can I comment the whole as a one comment, this is the code?
#if (Request.Cookies["area"] != null && Request.Cookies["area"].Value != "")
{
<div>
<div class="search-main">
<div><input type="text" class="search-control" placeholder="Search ads..." /></div>
<div class="search-control .search-control-border" style="cursor:pointer;overflow-y:visible;">
<a style="display:block; width:100%;height:100%" onclick="expandCategoryDropdown()"> <span class="category-dropdown-text" style="float: left;margin-top: 2%;margin-left: 0.2em;">#(Request.Cookies["city"] != null ? Request.Cookies["city"].Value.ToString() : "Select Location")</span><i class="glyphicon glyphicon-chevron-down icon category-dropdown-icon" style="float: right;margin-top: 3%;"></i></a>
<div class="searh-dropdown" style="z-index:1">
<div class="inner-dropdown">
<ul style="margin-left:-38px">
#*<li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="color:black" onclick="select_cat(this,'parent')">#ViewBag.area</a></li>*#
#{
List<ListHell.CODE.Locations> lst = (List<ListHell.CODE.Locations>)ViewBag.cities;
}
<li class="select-cat-li" style="list-style-type:none">
#ViewBag.areaStr
<ul style="margin-left:-40px;">
#foreach (ListHell.CODE.Locations l in lst)
{
<li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="margin-left:10px;color:black" onclick="select_cat(this,'child')">#l.city</a></li>
}
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="search-control .search-control-border"></div>
</div>
<div><input type="button" class="form-control" placeholder="Search" value="Search" style="margin-top: -2.5% !important;margin-left: 76%;;width:20%" /></div>
</div>
}
I dont want embed comment within comment. Just one commenting should do. Possible?

This should work, it's working in my client.
#{/*
#if (Request.Cookies["area"] != null && Request.Cookies["area"].Value != "")
{
<div>
<div class="search-main">
<div><input type="text" class="search-control" placeholder="Search ads..." /></div>
<div class="search-control .search-control-border" style="cursor:pointer;overflow-y:visible;">
<a style="display:block; width:100%;height:100%" onclick="expandCategoryDropdown()"> <span class="category-dropdown-text" style="float: left;margin-top: 2%;margin-left: 0.2em;">#(Request.Cookies["city"] != null ? Request.Cookies["city"].Value.ToString() : "Select Location")</span><i class="glyphicon glyphicon-chevron-down icon category-dropdown-icon" style="float: right;margin-top: 3%;"></i></a>
<div class="searh-dropdown" style="z-index:1">
<div class="inner-dropdown">
<ul style="margin-left:-38px">
#*<li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="color:black" onclick="select_cat(this,'parent')">#ViewBag.area</a></li>*#
#{
List<ListHell.CODE.Locations> lst = (List<ListHell.CODE.Locations>)ViewBag.cities;
}
<li class="select-cat-li" style="list-style-type:none">
#ViewBag.areaStr
<ul style="margin-left:-40px;">
#foreach (ListHell.CODE.Locations l in lst)
{
<li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="margin-left:10px;color:black" onclick="select_cat(this,'child')">#l.city</a></li>
}
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="search-control .search-control-border"></div>
</div>
*/}

Should be #* {code} * # for multiline.
alt. /* and */
You can also try ctrl + k + c if you are using Visual Studio
Example:
#*
#{
/* C# comment */
// Another C# comment
}
<!-- HTML comment -->
*#
Similar Post answer

that should work
#* #if (Request.Cookies["area"] != null && Request.Cookies["area"].Value != "")
{
<div>
<div class="search-main">
<div><input type="text" class="search-control" placeholder="Search ads..." /></div>
<div class="search-control .search-control-border" style="cursor:pointer;overflow-y:visible;">
<a style="display:block; width:100%;height:100%" onclick="expandCategoryDropdown()"> <span class="category-dropdown-text" style="float: left;margin-top: 2%;margin-left: 0.2em;">#(Request.Cookies["city"] != null ? Request.Cookies["city"].Value.ToString() : "Select Location")</span><i class="glyphicon glyphicon-chevron-down icon category-dropdown-icon" style="float: right;margin-top: 3%;"></i></a>
<div class="searh-dropdown" style="z-index:1">
<div class="inner-dropdown">
<ul style="margin-left:-38px">
<!-- <li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="color:black" onclick="select_cat(this,'parent')">#ViewBag.area</a></li> -->
#{
List<ListHell.CODE.Locations> lst = (List<ListHell.CODE.Locations>)ViewBag.cities;
}
<li class="select-cat-li" style="list-style-type:none">
#ViewBag.areaStr
<ul style="margin-left:-40px;">
#foreach (ListHell.CODE.Locations l in lst)
{
<li class="select-cat-li" style="list-style-type:none"><a class="select-cat" style="margin-left:10px;color:black" onclick="select_cat(this,'child')">#l.city</a></li>
}
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="search-control .search-control-border"></div>
</div>
<div><input type="button" class="form-control" placeholder="Search" value="Search" style="margin-top: -2.5% !important;margin-left: 76%;;width:20%" /></div>
</div>
} *#

For Visual Studio, use Ctrl+A, Ctrl+K, Ctrl+C.
For JetBrains, use Ctrl+A, Ctrl+/.

Related

Running Into a Object Null Error Building Bug Tracker

I am building an Bug Tracker with Asp.Net following a self paced online course. I'm running into an 'Object not set to a reference error" while attemping to list out Tickets assigned to each project in my Project Details View. I know information isn't being passed in, but I'm not sure how to fix that. Any specific solutions to the problem?
Attempted Work Arounds:
Commented out the Ticket Status and Ticket Priority Code and it worked, but it doesn't show everything I'd like.
Youtube Video of Error
Screenshot of Error
Highlighted Code in GitHub Repo
Problem Code:
#model TheBugTrackerProject.Models.Project
#using TheBugTrackerProject.Models.Enums
#using TheBugTrackerProject.Services.Interfaces
#using Microsoft.AspNetCore.Identity
#using TheBugTrackerProject.Models
#inject UserManager<BTUser> userManager
#inject IBTProjectService ProjectService
#inject IBTHistoryService HistoryService
#{
ViewData["Title"] = "Details";
BTUser btUser = await userManager.GetUserAsync(User);
BTUser projectManager = await ProjectService.GetProjectManagerAsync(Model.Id);
}
<h1>Details</h1>
<div>
<div class="container-fluid">
<div class="row gy-2">
<div class="col-md-12 col">
<div class="row col-cols-2 mt-5 bg-secondary">
<div class="card col m-1 p-2">
<div class="body">
#* Project Name *#
<h5>#Model.Name</h5>
#* Project Description *#
<p>#Model.Description</p>
<div class="progress-container progress-info m-b-25">
<span class="progress-badge" style="font-size:small">Project Status</span>
<div class="progress">
#* Razor code block *#
#{
var start = Model.StartDate.DateTime;
var end = Model.EndDate.DateTime;
var today = DateTime.Now;
var percent = today >= end ? 100 : today < start ? 0 : Math.Round((today.Subtract(start)) / (end.Subtract(start)) * 100);
}
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: #percent;">
#* Use Progress Bar code variable here *#
<span class="progress-value">#percent%</span>
</div>
</div>
</div>
</div>
</div>
<div class="card col m-1 p-2">
<div class="body">
<ul class=" list-unstyled basic-list">
<li>Start Date: <span class="">#Model.StartDate.ToString("dd MMM, yyyy")</span></li>
<li>Deadline: <span class="">#Model.EndDate.ToString("dd MMM, yyyy")</span></li>
<li>Priority: <span class="">#Model.ProjectPriority?.Name</span></li>
#* if() logic *#
#if (today < end && today >= start)
{
<li>Status:<span class="">Active</span></li>
}
else
{
<li>Status:<span class="">Inactive</span></li>
}
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 col mt-5 ">
<div class="bg-secondary">
<div class="card m-1 p-2">
<div class="header">
<h2>Project Manager</h2>
<hr />
</div>
<div class="body" style="overflow-y:auto;height:300px;">
#* if() logic for Avatar/Default etc *#
#if (projectManager != null)
{
<div>
#if (projectManager.AvatarFileData != null)
{
<img class="rounded-circle" src="data:image/*;base64, #(Convert.ToBase64String(projectManager.AvatarFileData))" alt="" />
}
else
{
<img class="rounded-circle " style="width: 60px; height:60px;" src="https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png" alt="" />
}
<div>
<h5>#projectManager.FullName</h5>
<span>#projectManager.Email</span>
<p class="text-muted m-b-0">Project Manager</p>
#if (User.IsInRole(nameof(Roles.Admin)) || (btUser.Id == projectManager.Id))
{
<a class="btn btn-xs alert-primary" style="font:small;" asp-action="AssignUsers" asp-controller="Projects" asp-route-id="#Model.Id">Manage Team</a>
}
</div>
</div>
}
else
{
<div>
<img class="rounded-circle" style="width:60px;height:60px;" src="https://cdn.icon-icons.com/icons2/1378/PNG/avatardefault_92824.png" />
<div class="wid-u-info">
<h5 class="text-muted m-b-0">Not Assigned</h5>
#if (User.IsInRole(nameof(Roles.Admin)))
{
<span><a asp-action="AssignProjectManager" asp-controller="Home" asp-route-id="#Model.Id" class="btn btn-xs btn-outline-info">Assign PM</a></span>
}
<span><a asp-action="AssignProjectManager" asp-controller="Home" asp-route-id="#Model.Id" class="btn btn-xs btn-outline-info">Assign PM</a></span>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-md-4 col mt-5 ">
<div class="bg-secondary">
<div class="card m-1 p-2">
<div class="header">
<h2>Project Team</h2>
<hr />
</div>
<div class="body" style="overflow-y:auto;height:300px;">
<ul class="right_chat list-unstyled mb-0">
#* Logic for avatars *#
#foreach (BTUser member in await ProjectService.GetAllProjectMembersExceptPMAsync(Model.Id))
{
<li class="">
<a href="">
<div class="media">
#if (member.AvatarFileData != null)
{
<img class="" src="data:image/*;base64,#(Convert.ToBase64String(member.AvatarFileData))" alt="" />
}
else
{
<img class="" src="https://cdn.icon-icons.com/icons2/1378/PNG/avatardefault_92824.png" />
}
<div class="">
<span class="">#member.FullName</span>
<span class="">#((await userManager.GetRolesAsync(member)).FirstOrDefault())</span>
</div>
</div>
</a>
</li>
}
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 col mt-5 ">
<div class="bg-dark">
<div class="card m-1 p-2">
<div class="header">
<h2>Project Activity</h2>
<hr />
</div>
<div class="body" style="overflow-y:auto;height:300px;background-color:antiquewhite">
#* Project Activity loop *#
#foreach (TicketHistory history in await HistoryService.GetProjectTicketHistoryAsync(Model.Id, btUser.CompanyId.Value))
{
<div class="">
<span class="date">#history.Created.ToString("dd MM, yyyy")</span>
<h6>#history.Description</h6>
<span>By: #history.User.FullName</span>
<div class="">
<p>The Ticket <b>#history.Property</b> was edited</p>
<p>#($"Previous {history.Property}: {history.OldValue}")</p>
<p>#($"Current {history.Property}: {history.NewValue}")</p>
<div class="media">
<div class="media-body">
<h6 class="mb-0"></h6>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-md-12 col">
<div class="mt-5 bg-secondary">
<div class="card m-1 p-2">
<div class="header">
<h2>Tickets</h2>
</div>
<div class="body">
<div class="table-responsive" style="overflow-y:auto;height:600px;">
<table class="table table-hover">
<thead class="">
<tr>
#* Table header *#
<th>Title</th>
<th>Developer</th>
<th>Status</th>
<th>Priority</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#* Table body *#
#foreach (var ticket in Model.Tickets.OrderByDescending(d => d.Created))
{
<tr>
<td><a asp-action="Details" asp-controller="Tickets" asp-route-id="#ticket.Id" style="color:black"><strong>#ticket.Title</strong></a> </td>
<td>
#if (ticket.DeveloperUserId != null)
{
#ticket.DeveloperUser?.FullName
}
else
{
if (User.IsInRole(nameof(Roles.Admin)) || User.IsInRole(nameof(Roles.ProjectManager)))
{
<a class="btn btn-xs btn-info" asp-action="AssignDeveloper" asp-controller="Home" asp-route-ticketId="#ticket.Id">Assign Dev</a>
}
}
</td>
#if (ticket.TicketStatus.Name == "New")
{
<td><span class="badge-success">#ticket.TicketStatus.Name</span></td>
}
else
{
<td><span class="badge-success">#ticket.TicketStatus.Name </span></td>
}
<td><span class="badge-warning">#ticket.TicketPriority.Name </span></td>
<td>#ticket.Created.ToString("MM-dd-yyyy")</td>
<td>
<a class="btn btn-sm btn-outline-info" asp-action="Details" asp-controller="Tickets" asp-route-id="#ticket.Id"><i class="fs-5 bi-justify"></i></a>
#if (ticket.DeveloperUserId == btUser.Id || ticket.OwnerUserId == btUser.Id || (projectManager?.Id == btUser.Id) || User.IsInRole(nameof(Roles.Admin)))
{
<a class="btn btn-sm btn-outline-secondary" asp-action="Edit" asp-controller="Tickets" asp-route-id="#ticket.Id"><i class="fs-5 bi-pencil"></i></a>
}
#if (User.IsInRole("Admin") || (projectManager?.Id == btUser.Id))
{
<a class="btn btn-sm btn-outline-danger"><i class="fs-5 bi-archive"></i></a>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
P.S. My code is a mess; but looking forward to working with other's on here and possibly in the future.
In your project service, you aren't Include-ing the ticket status so it will be null. Try something like this instead:
Project project = await _context.Projects
.Include(p => p.Tickets)
.ThenInclude(t => t.TicketStatus) // <-- add this line
.Include(p => p.Members)
.Include(p => p.ProjectPriority)
.FirstOrDefaultAsync(p => p.Id == projectId && p.CompanyId == companyId);

Cascading values and EventCallback in Blazor with layout component

I have three components that I want to pass values and eventcallbacks through:
First I have MainLayout that is a LayoutComponent
#inherits LayoutComponentBase
<div class="cms-container">
<div class="header">
<div class="header-logo">
CMS
</div>
<div class="header-settings">
<div class="header-settings__alert">
<i class="fa fa-bell"></i>
<div class="header-settings__alert--no">
<div class="header-settings__alert--no__text">
2
</div>
</div>
<ul class="cms-dropdown">
<li class="cms-dropdown__alert">
<span class="cms-dropdown__alert--status"><i class="fa fa-info-circle font-danger"></i></span>
<span class="cms-dropdown__alert--left">Följ upp händelse</span><span class="cms-dropdown__alert--right">1 dgr</span>
</li>
<li class="cms-dropdown__alert">
<span class="cms-dropdown__alert--status"><i class="fa fa-info-circle font-success"></i></span>
<span class="cms-dropdown__alert--left">Tidrapport behöver lämnas in</span><span class="cms-dropdown__alert--right">3 dgr</span>
</li>
</ul>
</div>
<div class="header-settings__org">
<span class="header-settings__org--text">
Kanal10.se
</span>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-tasks"></i>
</div>
<div class="cms-dropdown__normal--text">Uppgifter</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-users"></i>
</div>
<div class="cms-dropdown__normal--text">Användare</div>
</li>
</ul>
</div>
<div class="header-settings__account">
<i class="fa fa-user"></i>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-user"></i>
</div>
<div class="cms-dropdown__normal--text">Min profil</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-money-check"></i>
</div>
<div class="cms-dropdown__normal--text">Lönebesked</div>
</li>
</ul>
</div>
<div class="header-settings__system">
<div class="header-settings__system--icon">
<i class="fa fa-cog"></i>
</div>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-bars"></i>
</div>
<div class="cms-dropdown__normal--text">Menyer</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-users"></i>
</div>
<div class="cms-dropdown__normal--text">Användare</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-shield-alt"></i>
</div>
<div class="cms-dropdown__normal--text">Behörighetsgrupper</div>
</li>
</ul>
</div>
</div>
</div>
<div class="LeftNav">
<NavMenu />
</div>
<TelerikRootComponent>
<div class="cms-content">
#Body
</div>
</TelerikRootComponent>
<div class="footer">
<div class="footer-body">
<div class="footer-body__left">
</div>
<div class="footer-body__right">
<CascadingValue Value="visible">
<SaveAndCancelBtns OnBtnAction="?" />
</CascadingValue>
</div>
</div>
</div>
</div>
<BlazoredToasts Position="Blazored.Toast.Configuration.ToastPosition.TopCenter"
Timeout="3"
IconType="IconType.FontAwesome"
SuccessClass="success-toast-override"
SuccessIcon="fa fa-thumbs-up" />
#code {
private bool visible = false;
}
Then I have a child component called Buttons.razor
#if (visible == true)
{
<div class="footer-body__right--item">
<button class="btn btn-primary" #onclick="Save" type="submit">Save</button>
</div>
<div class="footer-body__right--item">
<button class="btn btn-cancel" #onclick="Cancel">Cancel</button>
</div>
}
[Parameter] public EventCallback<string> OnBtnAction { get; set; }
[Parameter] public bool visible { get; set; }
private void Save()
{
OnBtnAction.InvokeAsync("Save");
}
private void Cancel()
{
OnBtnAction.InvokeAsync("Cancel");
}
}
And then I have the component razor page called pageDetail.razor
#page "/pages/detail/{Id}"
#page "/pages/detail"
<div class="wrapper">
<div class="cms-content__title">
<div class="cms-content__title-left">
Page Detail
</div>
</div>
<div class="cms-content__page">
<div class="cms-content__page-all">
#if (cmsPage == null)
{
<ErrorMessage Message="Loading..." />
}
else
{
<div class="col-6">
<EditForm Model="cmsPage" OnValidSubmit="SavePage">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="PageTitle">Page Title</label>
<InputText #bind-Value="#cmsPage.PageTitle" class="form-control" id="PageTitle"></InputText>
</div>
<div class="form-group">
<label for="PageTitle">Page Descr</label>
<InputTextArea #bind-Value="#cmsPage.PageDescr" class="form-control" id="PageTitle"></InputTextArea>
</div>
<div class="form-group">
<label for="PageTitle">Page Url</label>
<InputText #bind-Value="#cmsPage.UrlName" class="form-control" id="PageTitle"></InputText>
</div>
<div class="form-group">
<label for="PageTitle">Page Type</label><br />
<TelerikComboBox Data="#cmsPageTypes" TextField="PageType" Width="100%" ValueField="PageTypeId" #bind-Value="selectedValue">
</TelerikComboBox>
<ValidationMessage For="#(() => cmsPage.PageTypeId)" />
</div>
<div class="form-group">
<label for="PageTitle">Parent Page</label><br />
<TelerikTreeView Data="#cmsPages" OnItemClick="#OnItemClickHandler">
<TreeViewBindings>
<TreeViewBinding IdField="PageId" TextField="PageTitle" ParentIdField="ParentId" HasChildrenField="false"></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
</div>
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" #onclick="DeletePage">Delete</button>
<button class="btn btn-info" #onclick="BackToList">Back To List</button>
</EditForm>
</div>
}
</div>
</div>
</div>
#code{
"not sure how to implement the event button action"
}
What I want is to:
On PageDetail set a parameter for visible and if it is true show the buttons in Buttons.razor or hide them
When clicking on a buttton in buttons.razor handle the event on PageDetail.razor for the EditForm there
The thing is how to handle the component that is a LayoutComponent. Not sure how it fits in the logic.
As you can see I have started implementing it but am not sure of how to connect the different parts.
Grateful for help!
Peter
I'd recommend looking at this article: https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/ but you're part of the way there by using the <CascadingParameter> in your layout.
In your case I'm not keen on using a boolean visible as a cascading parameter, it's a bit simplistic. The cascading value is also in the wrong place for this as it needs to wrap both the #Body render and the buttons.
I'd create a state class and cascade that class to any child that wants to use it, by wrapping the #Body and the <SaveAndCancelBtns ..>
<CascadingValue Value="buttonState" >
<TelerikRootComponent>
<div class="cms-content">
#Body
</div>
</TelerikRootComponent>
<div class="footer">
<div class="footer-body">
<div class="footer-body__left">
</div>
<div class="footer-body__right">
<SaveAndCancelBtns />
</div>
</div>
</div>
</CascadingValue>
You also need to add a value in the layout code:
ButtonStates buttonState = new ButtonStates();
The ButtonStates class should provide the values and events you need, e.g.
public class ButtonStates
{
public bool Visible { get; private set; }
// etc
}
Rather than put all the code here I've created a simple sample repo on github for you:
https://github.com/conficient/CascadingStateExample
Note that I've just used a simple state container and event to pass events from it. EventCallback<T> is specifically used to wire up events between Razor components.

Avoid duplicates using foreach asp.net mvc 5

I have created a tab where one adds their products and automatically it will add it on the tab. But now my issue is that it repeats the same thing on the tab view "header" whenever I have uploaded the same database. I want it to categorize it and not repeat it. Below is the code I have created.
The picture below shows the database.
Controller
public ActionResult Index()
{
return View(db.Products.ToList());
}
View
#model IEnumerable<tkkkk.Models.Product>
#{
ViewBag.Title = "Home Page";
int counterHeader = 0;
int counterBody = 0;
}
<br />
<ul class="nav nav-tabs">
#foreach (var product in Model)
{
if (counterHeader == 0)
{
<li class="active"><a data-toggle="tab" href="##product.ProductId">#product.ProductName</a></li>
}
else
{
<li><a data-toggle="tab" href="##product.ProductId">#product.ProductName</a></li>
}
counterHeader++;
}
</ul>
<br />
<div class="tab-content">
#foreach (var item in Model)
{
if (counterBody == 0)
{
<div id="#item.ProductId" class="tab-pane fade in active">
<div class="col-lg-4 col-md-6 mb-4" style="width:200px;">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="" width="200">
<div class="card-body">
<h4 class="card-title">
#item.ProductItem - #item.ProductName
</h4>
<h5>R #item.ProductPrice</h5>
</div>
</div>
</div>
</div>
}
else
{
<div id="#item.ProductId" class="tab-pane fade">
<div class="col-lg-4 col-md-6 mb-4" style="width:200px;">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="" width="200">
<div class="card-body">
<h4 class="card-title">
#item.ProductItem - #item.ProductName
</h4>
<h5>R #item.ProductPrice</h5>
</div>
</div>
</div>
</div>
}
counterBody++;
}
</div>

MVC C# Carousel Image

i have been trying to create a carousel image on my MVC application. The below snippet from W3 was just used as an example. The result was the images displayed ont he webpage one below eachother. Do i need to do anything else on the MVC application to resolve this?
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I had the same requirement sometime ago and I used below code, look if it works for you.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#{
var first = true;
}
#foreach (var item in ViewBag.Images)
{
<div class="carousel-item #(first?Html.Raw("active"):Html.Raw(""))">
<img class="d-block w-100" src="#item.Image" alt="#item.Name">
</div>
first = false;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Please Try this.I hope your problem is solved
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="carousel-item #active">
<img src="#Url.Content(#item.FilePath)" alt="">
</div>
}
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

MVC Razor passing Model from View to Controller

My Controller which calls the View:
public ActionResult Excel()
{
myClass arg = new myClass(string arg1, object arg2);
return View(arg);
}
My View:
#model myClass
#using (Html.BeginForm("createXML", "Excel", new { arg = Model }))
{ { #Html.ValidationSummary(true)
<div class="container-full" style="background-color:aliceblue">
<h3 class="= container">Einstellungen:</h3>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">nk</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<form action="select.html">
<label>
Anzahl:
<select name="decimal">
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</label>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">sign</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<form action="select.html">
<label>
left:
<select name="decimal">
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</label>
</form>
</li>
<li class="list-group-item">
<form action="select.html">
<label>
right:
<select name="decimal">
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</label>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Optionen</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<form>
<fieldset>
<ul class="list-group">
<li class="list-group-item">
<label>
#Html.CheckBoxFor(m => m.P5_VerkBesch)
#*<input type="checkbox" name="verkBesch" value="1">*#
Verk
</label>
</li>
<li class="list-group-item">
<label>
#Html.CheckBoxFor(m => m.P5_SpezBesch)
#*<input type="checkbox" name="sFonds" value="1">*#
spezbesch
</label>
</li>
<li class="list-group-item">
<label>
<input type="checkbox" name="kgpr" value="1">
kgpr
</label>
</li>
<li class="list-group-item">
<label>
#Html.CheckBoxFor(m => m.P5_AD)
#*<input type="checkbox" name="Ad" value="1">*#
ad
</label>
</li>
<li class="list-group-item">
<label>
<input type="checkbox" name="md" value="1">
md
</label>
</li>
<li class="list-group-item">
<label>
<input type="checkbox" name="beschText" value="1">
beschtxt
</label>
</li>
<li class="list-group-item">
<label>
#Html.CheckBoxFor(m => m.P5_Uni)
#*<input type="checkbox" name="uni" value="1">*#
uni
</label>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4">Weitere Einstellungen</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div>
<label>Anzahl Dateien pro:</label>
<br />
#*<small>123</small>*#
#Html.TextBoxFor(i => i.P5_ANZAHL, new { #type = "number", #style = "max-width: 100%" })
</div>
</li>
<li class="list-group-item">
<div>
<label>Datum ändern:</label>
<br />
<p>
#Html.TextBoxFor(m => m.P5_DATUM, new { #id = "datepicker", #type = "text", #style = "width: 100%" })
#*<input type="text" id="datepicker" style="width:100%">*#
</p>
</div>
</li>
<li class="list-group-item">
<div>
<label>Fds:</label>
<br />
#Html.TextAreaFor(m => m.P5_Fundstelle, new { #rows = "4", style = "width: 100%" })
#*<textarea style="max-width:100%;" rows="4"></textarea>*#
</div>
</li>
<li class="list-group-item">
<div>
<label>Anhaltspunkte :</label>
<br />
#*<small>123</small>*#
#Html.TextBoxFor(m => m.P5_Anhaltspunkte, new { style = "width: 100%" })
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Excel</h2>
<div>
<form id="myForm" method="post"
enctype="multipart/form-data"
action="">
<div>
<h1>File Upload</h1>
#if (!IsPost)
{
#FileUpload.GetHtml(
initialNumberOfFiles: 2,
allowMoreFilesToBeAdded: true,
includeFormTag: true,
addText: "Add another file",
uploadText: "Upload")
}
<span>#message</span>
</div>
</form>
<input type="submit" value="Submit" />
</div>
</div>
</div>
}
Controller Function which should be called:
public ActionResult createXML(myClass arg)
{
//Code here...
return View("~/Views/Excel/Excel.cshtml");
}
My Problem is that "arg" is passed as null to createXML. I can't figure out why. One has to say that I am normally a WPF/WinForms Programmer.
UPDATE
I updated my code a bit, to make it clearer maybe.
UPDATE 2
I found out a part of the problem. My Object has only one constructor, where i need some paramateres. This generates somehow an error. I created a constructor without any parameter and it works, but it somehow creates a new object when I start my form and does not use the object i passed on to the view.
change view like this
#using (Html.BeginForm("createXML", "Excel", FormMethod.Post))
and
add this above createxml
[HttpPost]
UPDATE
I tried your codes and worked. Here is codes
HomeController codes. You can place this methods in your ExcelController
public ActionResult Excel()
{
myClass arg = new myClass();
arg.p = 5;
return View(arg);
}
[HttpPost]
public ActionResult createXML(myClass arg)
{
int a = arg.p;
return View();
}
Home/Excel.cshtml codes
#model Identity.Controllers.myClass
#{
Layout = null;
}
#using (Html.BeginForm("createXML", "Home", FormMethod.Post))
{ #Html.ValidationSummary(true)
<div class="container-full" style="background-color:aliceblue">
<h3 class="= container">Einstellungen:</h3>
<div class="container">
#Html.TextBoxFor(x => x.p)
<input type="submit" value="Submit" />
</div>
</div>
}
You are using wrong overload.
You can use this overload. BeginForm(
this HtmlHelper htmlHelper,
string actionName,
string controllerName,
Object routeValues,
FormMethod method,
Object htmlAttributes)
#Html.BeginForm("createXML", "Excel", new { arg = Model },FormMethod.Post,null)
or remove the argument and use hidden field within the form:
#using(Html.BeginForm("createXML", "Excel",FormMethod.Post))
{
.....
#Html.Hidden("arg", Model)
}

Categories