Cascading values and EventCallback in Blazor with layout component - c#

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.

Related

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>

Html/Css CSHTML - Accordion not opening for SOME items

My issue is that I am creating a comments section for a page. Each comment can have a number of replies. I am using bootstrap accordion to achieve this and by dynamically creating the accordions via C# MVC code. I cant work out why some of the accordions open correctly and some do not. each comment is comprised of a comment, an edit button a delete button and a reply button.
Sometimes the Accordion will not open, but when I go to the inspection hatch in Chrome, I can put the "show" keyword into the div I want to expand, and it does so.
Here is the rendered code. I dont think the issue is the C# code as the accordions sometimes open. is there a hierarchy thing going on that I dont know about? BTW the first div is an outermost accorion to show or hide all the comments.
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion" href="#div-10" data-toggle="collapse" aria-expanded="true">
<span class="btn-accordion-arrow comments-top"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="div-10" style="">
<br>
<br>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:0px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:41</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#0d41c31f-8629-4f02-bf4c-64af8f830975" data-toggle="collapse" data-target="#0d41c31f-8629-4f02-bf4c-64af8f830975" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="0d41c31f-8629-4f02-bf4c-64af8f830975">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-0d41c31f-8629-4f02-bf4c-64af8f830975"> First Comment for Dispute 001 - PARENT</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="0d41c31f-8629-4f02-bf4c-64af8f830975" href="#" onclick="deleteComment('0d41c31f-8629-4f02-bf4c-64af8f830975');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="0d41c31f-8629-4f02-bf4c-64af8f830975" id="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" name="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:45</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#612de2eb-f33c-4b30-b69c-825d0c8171bd" data-toggle="collapse" data-target="#612de2eb-f33c-4b30-b69c-825d0c8171bd" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="612de2eb-f33c-4b30-b69c-825d0c8171bd">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-612de2eb-f33c-4b30-b69c-825d0c8171bd"> Second Comment for Dispute 001 - First Child</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="612de2eb-f33c-4b30-b69c-825d0c8171bd" href="#" onclick="deleteComment('612de2eb-f33c-4b30-b69c-825d0c8171bd');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="612de2eb-f33c-4b30-b69c-825d0c8171bd" id="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" name="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:51</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#a869e748-f0c3-461a-89bb-07bf29620d66" data-toggle="collapse" data-target="#a869e748-f0c3-461a-89bb-07bf29620d66" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="a869e748-f0c3-461a-89bb-07bf29620d66" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-a869e748-f0c3-461a-89bb-07bf29620d66"> First REPLY for Dispute 001 - to comment 1</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="a869e748-f0c3-461a-89bb-07bf29620d66" href="#" onclick="deleteComment('a869e748-f0c3-461a-89bb-07bf29620d66');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="a869e748-f0c3-461a-89bb-07bf29620d66" id="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" name="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 15:12</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#c768c95c-d926-41f7-a237-8b6803c9521d" data-toggle="collapse" data-target="#c768c95c-d926-41f7-a237-8b6803c9521d" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="c768c95c-d926-41f7-a237-8b6803c9521d" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-c768c95c-d926-41f7-a237-8b6803c9521d"> Second REPLY for Dispute 001 - to comment that was working</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="c768c95c-d926-41f7-a237-8b6803c9521d" href="#" onclick="deleteComment('c768c95c-d926-41f7-a237-8b6803c9521d');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="c768c95c-d926-41f7-a237-8b6803c9521d" id="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" name="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
</div>
*** As you can see the rendered code looks ok,here is the C# View .cshtml:--
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion collapsed" href="#div-10" data-toggle="collapse" aria-expanded="false">
<span class="btn-accordion-arrow comments-top"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="div-10">
<br /><br />
#if (Model.DisputeComments != null)
{#*list of comment lists*#
foreach (var list in Model.DisputeComments)
{ #*comment list*#
foreach (var comment in list)
{
var indent = comment.ParentID != Guid.Empty ? "40px" : "0px";
var containerName = comment.ParentID == Guid.Empty ? comment.Id : comment.ParentID; #*use for removing on delete*#
<div class="container-fluid-#containerName" style="padding-left:#indent">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">#comment.IbasUser.FirstName #comment.IbasUser.LastName • </span><span class="blue-slate-text">#comment.EntryDate.ToString("dd-MMM-yyyy HH:mm")</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="##comment.Id" data-toggle="collapse" data-target="##comment.Id" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="#comment.Id">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-#comment.Id"> #comment.Description</span>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="#comment.Id" href="#" onclick="deleteComment('#comment.Id');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
#{
var isChecked = "checked";
if (comment.ShareWithCustomer == false) { isChecked = "unchecked"; }
}
<input type="checkbox" value="#comment.Id" id="shareWCustomer-#comment.Id" name="shareWCustomer-#comment.Id" #isChecked> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="~/Content/Images/icon-replies.png" class="img-responsive icon-replies" />
</div>
</div>
<hr class="hr-white" />
<br />
</div>
</div>
} #* end of inner for each *#
} #*end of outer for each*#
}
</div>#*end of Comments accordian*#
#* end of container *#
** I tried to add the CSS but as usual Stack overflow said it was unformatted, I will try and add it after I post this lot. Thanks for any help!

I finally got to the bottom of my issue. The Collapsing divs were using the current comments GUId as an identifier. I did this because the comments are rendered on the fly and the Comment id is used for editing and deleting the comment within the div. I stripped out all but the collapse div and button, but it still didnt work. This is when I substituted the GUID for a counter as an identifier for the collapse div. This did the trick and the accordion works as normal. I dont know why a GUID as an ID should flummox the Accordion, especially as I use GUIDs as ids when rendering lists to html on the fly quite often. In any case I take it as a win. Thanks to Pete for having a look.

Showing the data of the right side of the TimeLine

How can I show the description Data on the left or the right side of the timeline acording of it Candidate.Saving result?
If it's Candidate.Saving == true it should be on the left, if it's Candidate.Saving==false it should be on the right side of the time line.
I will shou here my candidate Model And my View.
public class Candidate : BaseEntity
{
public int Id { get; set; }
public string Name { get; set; }
public int Number { get; set; }
public string ProfileText { get; set; }
public Byte[] CV { get; set; }
public string CVNAME { get; set; }
public List<Profile> ProfileList { get; set; }
public String Description { get; set; }
public Boolean Saving { get; set; }
public string Title { get; set; }
public DateTime DateOfDescription { get; set; }
}
Here is my view:
#model HCCBPOHR.Data.Candidate
#{
ViewData["Title"] = "CandidateHistory";
}
<h2>Canidate - #Model.Name</h2>
<label>History</label>
<hr />
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> History Of #Model.Name
</div>
#foreach (var Description in Model.Description)
{
#if (Model.Saving == true)
{
<ul>
<li class="timeline">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> #Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
#if (Model.Saving == false)
{
<ul>
<li class="timeline-inverted">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> #Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
}
</div>
#*<div class="panel-body">
<ul class="timeline">
<li>
<li class="timeline-inverted">
Isto é para inverter o lado
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> #Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
</div>
</div>*#
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#Model.Saving"> Add History Description</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form asp-action="CandidateHistory">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group">
<label>Selects</label>
<select asp-for="Saving" class="form-control">
<option value="false">Candidate </option>
<option value="true">Hitachi</option>s
</select>
</div>
<div class="form-group">
<label asp-for="DateOfDescription" class="form-group"></label>
<input asp-for="DateOfDescription" class="form-group" />
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What I've tried to do:
I have tried to make a foreach method where the side depends of the Candidate.Saving, But the result was this:
I have managed to fix it.
This is how I did It:
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> History Of #Model.Name
</div>
<div class="panel-body">
#if (Model.Saving == true)
{
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i>
#Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
#if (Model.Saving == false)
{
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> #Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
</div>
</div>
I only have on doubt right now, to be able to add more than one Description for the candidate I should Create a list off Descriptions
and do a foreach method in the view right?
Right now my controller looks like this:
public IActionResult CandidateHistory(int Id)
{
using (var applicationcontext = new ApplicationContext())
{
var candidate = applicationcontext.Candidates.Where(s => s.Id.Equals(Id)).SingleOrDefault();
if (candidate == null)
{
return NotFound();
}
Candidate candidates = new Candidate();
candidates.DescriptionList.Add(candidate);
candidates.DescriptionList.Add(new Candidate { Description = candidate.Description });
candidates.DescriptionList.Add(new Candidate { Title = candidate.Title });
candidates.DescriptionList.Add(new Candidate { DateOfDescription = candidate.DateOfDescription });
candidates.DescriptionList.Add(new Candidate { Saving = candidate.Saving });
applicationcontext.Candidates.Add(candidates);
return View();
}
}
[HttpPost, ActionName("CandidateHistory")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> CandidateHistoryPost(int? id, Candidate candidatelist)
{
if (id == null)
{
return NotFound();
}
using (var context = new ApplicationContext())
{
var candidateUpdate = await context.Candidates.SingleOrDefaultAsync(s => s.Id == id);
if (await TryUpdateModelAsync<Candidate>(candidateUpdate, "", s => s.Description, s => s.Title, s => s.DateOfDescription, s => s.Saving))
{
try
{
await context.SaveChangesAsync();
return RedirectToAction(nameof(CandidateHistory));
}
catch (DbUpdateException /* ex */)
{
//Log the error (uncomment ex variable name and write a log.)
ModelState.AddModelError("", "Unable to save changes. " +
"Try again, and if the problem persists, " +
"see your system administrator.");
}
}
return View(candidateUpdate);
}
}
I'm trying to output an Candidate.DescriptionList to the CandidateHistory View so that way I can save into that list all the descriptions, description title, date and "saving", so i can do a foreach method to output all the description of that user.
But now I have this error:
System.NullReferenceException: 'Object reference not set to an instance of an object.
HCCBPOHR.Data.Candidate.DescriptionList.get returned null.`

I have managed to fix it.
This is how I did It:
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> History Of #Model.Name
</div>
<div class="panel-body">
#if (Model.Saving == true)
{
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i>
#Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
#if (Model.Saving == false)
{
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-badge">
<i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Title</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> #Model.DateOfDescription.ToShortDateString()</small>
</p>
</div>
<div class="timeline-body">
<p>#Model.Description</p>
</div>
</div>
</li>
</ul>
}
</div>
</div>
I only have on doubt right now, to be able to add more than one Description for the candidate I should Create a list off Descriptions
and do a foreach method in the view right?

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)
}

ASP.NET MVC Post data from view using controller method

Hope you peeps can help ill start with my problem.
Code Problem:
Passing data entered from a completed user form, to a method in controller which posts values back to api, at same time a modal is loaded containing the submitted data.
My Issue:
Ive attempted to come up with a solution to the above problem but I don't think the post request is being sent after checking with firebug in firefox but I don't know why. The modal is displayed and values are shown within the body correctly.
Here is what i have so far:
Bootstrap Form:
<form action="/Home/PostData" method="post" class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2" for="imei">IMEI:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="imei" name="formpart" placeholder="IMEI">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2" for="phoneNumber">Phone Number:</label>
<div class="col-xs-9">
<input type="tel" class="form-control" id="phoneNumber" name="formpart" placeholder="Phone Number">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Policy Organisation:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span id="dropdown_title1">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">TMT Internals</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="policyNumber" class="control-label col-xs-2">Policy Number:</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="policyNumber" name="formpart" placeholder="Policy Number">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default" id="dropdownMenu2" data-toggle="dropdown">
<span id="dropdown_title2">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdownMenu2">
<li><a tabindex="-1" href="#">Android</a></li>
<li><a tabindex="-1" href="#">IOS</a></li>
<li><a tabindex="-1" href="#">Windows Phone</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="diagnosticMode" class="control-label col-xs-2">Diagnostic Mode:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
<span id="dropdown_title3">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Simple</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Advanced</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mannual</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Complete</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" id="SendRequest" class="btn btn-success">Create New Request</button>
<button class="btn btn-primary">Back to List</button>
</div>
</div>
</form>
Controller Method:
public ActionResult PostData()
{
using (WebClient client = new WebClient())
{
System.Collections.Specialized.NameValueCollection reqparm = new System.Collections.Specialized.NameValueCollection();
reqparm.Add("IMEI", Request["#imei"].ToString());
reqparm.Add("PhoneNumber", Request["#phoneNumber"].ToString());
reqparm.Add("PolicyNumber", Request["#policyNumber"].ToString());
reqparm.Add("SupportUserId", Session["UserId"].ToString());
reqparm.Add("PolicyOrganisationId", Request["#dropdown_title1"].ToString());
reqparm.Add("PlatformFamilyInfoId", Request["#dropdown_title2"].ToString());
reqparm.Add("AppModeId", Request["#dropdown_title3"].ToString());
byte[] responsebytes = client.UploadValues("**removed url for security purposes**", "POST", reqparm);
string responsebody = Encoding.UTF8.GetString(responsebytes);
}
return View("something");
}
Jquery (passes values to modal)
// captures user entered data
$("#SendRequest").click(function () {
var imei = ("IMEI: " + $("#imei").val());
$('#printImei').html(imei);
var phonenumber = ("Phone Number: " + $("#phoneNumber").val());
$('#printPhoneNumber').html(phonenumber);
var policyorganisation = ("Organisation: " + $("#dropdown_title1").text());
$('#printPolicyOrg').html(policyorganisation);
var policynumber = ("Policy Number: " + $("#policyNumber").val());
$('#printPolicyNumber').html(policynumber);
var platform = ("Platform: " + $("#dropdown_title2").text());
$('#printPlatform').html(platform);
var diagmode = ("Diagnostic Mode: " + $("#dropdown_title3").text());
$('#printDiagnosticMode').html(diagmode);
});
Modal shown after "Create new Request" is clicked:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Summary</h4>
</div>
<div class="modal-body">
<span id="printImei"></span><br />
<span id="printPhoneNumber"></span><br />
<span id="printPolicyOrg"></span><br />
<span id="printPolicyNumber"></span><br />
<span id="printPlatform"></span><br />
<span id="printDiagnosticMode"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Categories