We Keep Coding

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.

Getting viewmodel value null on Http Post method,

My View page, it contains many dynamic controls
I know this question has been asked and answered a dozen of times but none of the solutions help me.
I have a following ViewModel which is consisted of QuestionBatch data model,listResponseTag and a list of listQuestion data model.
View Model
public class VM_Questionaire
{
public QuestionBatch ThequestionBatch { get; set; }
public List<Question> listQuestion { get; set; }
public List<ResponseTag> listResponseTag { get; set; }
}
Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult submit_Questionaire(VM_Questionaire vm_question)
{
if (ModelState.IsValid)
{
Console.Write(Newtonsoft.Json.JsonConvert.SerializeObject(vm_question));
}
return View("Index");
}
View
<pre>
#model Fonz_Survey.Models.VM_Questionaire
#{
ViewBag.Title = "Questionaire";
}
#using (Html.BeginForm("submit_Questionaire", "Questions", FormMethod.Post))
{
#Html.AntiForgeryToken()
<h2>Questionaire</h2>
<div class="card">
<div class="card-header">
<div class="jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">CODE</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-danger text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.Code, new { #class = "text-danger text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.Code)
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Question Batch</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.BatchName, new { #class = "text-primary text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.BatchName)
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">No of Questions</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<label class="text-primary text-monospace">#ViewBag.totalQstns</label>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Description</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace text-wrap">
#Html.DisplayFor(model => model.ThequestionBatch.Description, new { #class = "text-primary text-monospace text-wrap" })
#Html.HiddenFor(model => model.ThequestionBatch.Description)
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
#{
//int rowIndex = 0;
}
#if (Model != null && Model.listQuestion != null)
{
for(var rowIndex=0; rowIndex< Model.listQuestion.Count; rowIndex++)
//foreach (Question question in Model.listQuestion)
{
// rowIndex++;
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-gray text-light">
<div class="d-inline-block">
<label class="text-lg-left font-weight-bold">#rowIndex.</label>
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionEN</label>
<br />
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionAR</label>
</div>
</div>
<div class="card-body font-weight-bolder">
#switch (#Model.listQuestion[rowIndex].QType)
{
case 1:
// to do Text Boxes
<p class="text-info"><u>Please enter your message below;</u></p>
<div class="form-row">
#*<input type="text" placeholder="#question.QuestionEN" name="Q_#question.Id" id="Q_#question.Id" class="form-control" />*#
#Html.EditorFor(model=> #Model.listQuestion[rowIndex].QuestionEN)
</div>
break;
case 2:
// to do Radio
<p class="text-info"><u>Please select any one of the option below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="radio" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
case 3:
// to do Radio
<p class="text-info"><u>Please select options below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="checkbox" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
}
</div>
</div>
</div>
</div>
}
<div class="form-group">
<div class="col-12 text-center">
<input type="submit" value="Submit" class="btn btn-success " />
</div>
</div>
}
</div>
<div class="card-footer">
<label class="text-danger">#ViewBag.Message</label>
</div>
</div>
}
</prev>
First object getting value, but the list getting null.

#Html.DisplayFor() will not post values. You need to use #Html.HiddenFor() along with #Html.DisplayFor(). Refer: Html.DisplayFor not posting values to controller in ASP.NET MVC 3

if you're not passing any type of data then make your data as a hidden field and after that you will received your data at your respective controller.
Thanks.

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.

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

How can i use Remote Attribute in Mvc 5?

I developing business application in ASP MVC 5. I was trying to use Remote attribute but its not working.
Metadata class - where i put attribute
[MetadataType(typeof(Departmanmetadata))]
public partial class DepartmanTable
{
}
public class Departmanmetadata
{
[Key]
[DisplayName("Deparman No")]
public int DepartmanID { get; set; }
[Required(ErrorMessage = "Bu alan boş bırakılamaz!")]
[StringLength(50, MinimumLength = 2, ErrorMessage = "Lütfen 2 ile 50 karakter arasında veri giriniz!")]
[DisplayName("Departman Adı")]
[Remote("IsNameAvaible", "Departman", ErrorMessage = "Sistemde zaten var!")]
public string DepartmanName { get; set; }
}
Controller
public JsonResult IsNameAvaible(string name)
{
return Json(!db.DepartmanTable.Any(a => a.DepartmanName == name), JsonRequestBehavior.AllowGet);
}
View
<link href="~/css/eklemeler.css" rel="stylesheet" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/scripts/jquery.validate.min.js"></script>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>DEPARTMAN</h2>
<ol class="breadcrumb">
<li>
<a>Home</a>
</li>
<li>
<a>Departman</a>
</li>
<li class="active">
<strong>Departman Add</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Departman Add</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<form class="form-horizontal form-label-left" method="post" action="~/Departman/Create" novalidate>
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="item form-group">
#Html.LabelFor(model => model.DepartmanName, htmlAttributes: new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-6 col-sm-6 col-xs-12">
#Html.EditorFor(model => model.DepartmanName, new { htmlAttributes = new { #class = "form-control col-md-7 col-xs-12" } })<span class="fa fa-long-arrow-up form-control-feedback right" aria-hidden="true"></span>
#Html.ValidationMessageFor(model => model.DepartmanName, "", new { #class = "text-danger" })
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Ekle" class="btn btn-primary" /> |
<i class="fa fa-share fa-2x"></i> #Html.ActionLink("Geri Dön!", "Index")
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Create button doesn't working.
I think Scripts is the problem. Here the scripts.
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/scripts/jquery.validate.min.js"></script>
What might be the issue?

The property you apply the attribute to is named DepartmanName and generates the following html
<input type="text" name="DepartmanName" ..... />
which means you controller method must have a matching parameter. Change it to
public JsonResult IsNameAvaible(string departmanName)
{
....
}