We Keep Coding

Pass Model to bootstrap

In my project I have Class A, which has collection of class B.
Something like this:
public class A
{
public int Id { get; set; }
public string Name { get; set; }
public IEnumerable<B> B { get; set; }
}
public class B
{
public int Id { get; set; }
public string Name { get; set; }
public bool IsValid { get; set; }
}
In my view I'm iterating through A elements and do a div's list.
Now, when I'm clicking some div, I want to pass B elements to modal and show some values there.
Something like:
#model IEnumerable<A>
#foreach (var a in A)
{
<div class="container" data-toggle="modal" data-target="#testModal" <!-- how to pass this model here and use it in Modal?--> >
<p>#a.Name</p>
</div>
}
Is this possible?

You can pass it as json like:
#foreach (var a in A)
{
<div class="container" data-toggle="modal" data-target="#testModal"
data-value='#JsonConvert.Serialize(a.B)'>
<p>#a.Name</p>
</div>
}
then you can just read the json like:
var model = JSON.parse($('.container').data('value'));

IGrouping Model not binding

I have the following classes as my viewmodel. Due to requirements, I have to use IGrouping instead of a normal IList or IEnumerable. I have to group ExtraCostOption according to the Types.
I have attached image of my view that will explain the requirement.
My problem is that the FirstCostOption do not get populated at all but all the other values are populated.
Could anyone point me to a direction?
public class ExtraCostOption
{
public string Name { get; set; }
public string Description { get; set; }
public bool IsSelected { get; set; }
public OptionCategory Category { get; set; }
public string SourceId {get;set;}
}
public class Product
{
public string Id {get;set;}
public string Cost {get;set;}
public List<IGrouping<string, ExtraCostOption>> FirstCostOption { get; set; }
}
My razor code is :
<div class="sm card content">
#if (Model.FirstCostOption .Any())
{
foreach (var optGroup in Model.FirstCostOption)
{
<h5>#optGroup.Key</h5>
for (int i = 0; i < optGroup.ToList().Count; i++)
{
<div class="card">
#Html.HiddenFor(m => optGroup.ToList()[i].SourceId)
<label class="control checkbox">
#Html.CheckBoxFor(m => optGroup.ToList()[i].IsSelected)
<span class="control-indicator"></span>
<span>
#optGroup.ToList()[i].Name
</span>
</label>
</div>
}
}
}
</div>
My controller code looks like this:
[ValidateAntiForgeryToken]
[System.Web.Mvc.HttpPost]
public async Task<ActionResult> Process([FromBody]Product viewModel)

CRUD operations for multiple related records in different tables from single view in MVC C#

I was hoping I could get some assistance on this functionality I am trying to achieve. I have searched, but i do not seem to be able to translate the examples/tutorials I have found to make it work in my own code.
For brevity, let's say I have 2 Models with a one to many relationship between the two. Let's say it is parents and children. One parent can have zero or many children. Each child can only have 1 parent:
namespace MyApp.Models
{
public partial class Parent
{
[Key]
public int parent_id { get; set; }
public string parent_name { get; set; }
public string parent_address { get; set; }
public ICollection<Child> Child { get; set; }
}
public partial class Child { get; set; }
{
[Key]
public int child_id { get; set; }
public int parent_id { get; set; }
public string child_name { get; set; }
public string child_allergies { get; set; }
public virtual Parent parent { get; set; }
}
}
Entity created the tables in the database properly, assigning primary/foreign keys where they needed to be.
I put the common fields in a viewmodel to render them in my view:
using MyApp.Models;
namespace MyApp.ViewModels
{
public class ParentChildViewModel
{
public int parent_id { get; set; }
public string parent_name { get; set; }
public string parent_address { get; set; }
public string child_name { get; set; }
public string child_allergies { get; set; }
}
}
I have my view written as below:
#model MyApp.ViewModels.ParentChildViewModel
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(model => model.parent_name)
#Html.EditorFor(model => model.parent_name)
</div>
<div>
#Html.LabelFor(model => model.parent_address)
#Html.EditorFor(model => model.parent_address)
</div>
<table id="child_table">
#{ Html.RenderPartial("_children"); }
</table>
<div>
<button id="add">Add Child</button>
<button id="rem">Remove Child</button>
</div>
<div>
<input type="submit" value="Create" />
</div>
}
<script type="text/javascript">
$("#add").click(function () {
$.ajax({
url: "#Url.Action("BlankChRow")",
cache: false,
success: function (html) {
$("#child_table").append(html);
}
});
return false;
});
$("#rem").click(function () {
$("#child_table tbody tr:last")
.remove();
return false;
});
</script>
I created a partial view for the child so I can repeat those:
#model MyApp.ViewModels.ParentChildViewModel
#using (Html.BeginCollectionItem("children"))
{
<tr>
<td>
<div>
#Html.LabelFor(model => model.child_name)
#Html.EditorFor(model => model.child_name)
</div>
</td>
<td>
<div>
#Html.LabelFor(model => model.child_allergies)
#Html.EditorFor(model => model.child_allergies)
</div>
</td>
</tr>
}
Then, in my controller (this is where I am stuck):
private ApplicationDbContext db = new ApplicationDbContext();
public ActionResult BlankChRow()
{
return PartialView("_children");
}
public ActionResult Create()
{
return View(new ParentChildViewModel());
}
[HttpPost]
public ActionResult Create(ParentChildViewModel pcvm)
{
var parent = new Parent()
{
parent_id = pcvm.parent_id,
parent_name = pcvm.parent_name,
parent_address = pcvm.parent_address
};
var child = new Child()
{
parent_id = pcvm.parent_id,
child_name = pcvm.child_name,
child_allergies = pcvm.child_allergies
};
if (ModelState.IsValid)
{
db.Parent.Add(parent);
db.Child.Add(child);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(pcvm);
}
I have experimented a few different ways of doing this... but I am unable to get this working the way I would like. Ideally, the View can be brought up, and while they enter the Parent's data, they could add one or many children. The children that are added would each be their own record in the Child table/entity while having the appropriate parent_id.
Any help is appreciated.

I see that you want to generate a list of children for a given parent but your viewmodel doesn't look so.
using MyApp.Models;
namespace MyApp.ViewModels
{
public class ParentChildViewModel
{
public int parent_id { get; set; }
public string parent_name { get; set; }
public string parent_address { get; set; }
public string child_name { get; set; }
public string child_allergies { get; set; }
}
}
Try a viewmodel with a list of children.
Something like this :
using MyApp.Models;
namespace MyApp.ViewModels
{
public class ParentChildViewModel
{
public int parent_id { get; set; }
public string parent_name { get; set; }
public string parent_address { get; set; }
public IEnumerable<Child> children { get; set; }
}
}
I'm supposing here that you just want to iterate over the list. That's why I use the IEnumerable interface instead of the IList interface.
To add a child in the list, you could call the "Create" function of your controller and pass the parent_id of the new child.
In your controller you can therefore create a new child for a given parent in the database using your application context.
Once the database transaction done, you can create a new ParentChildViewModel and fulfill it with the corresponding children and return it to the view.

MVC 6 Modelbinding complex dictionaries

I'm trying to post a form containing a dictionary of complex types.
The dictionary looks like this:
public Dictionary<Question, List<QuestionAlternative>> Questions { get; set; }
One question can have many alternatives.
The question itself looks like this:
public class Question
{
public Guid Id { get; set; }
public string Text { get; set; }
public Guid TestId { get; set; }
public Test Test { get; set; }
public ICollection<QuestionAlternative> QuestionAlternatives { get; set; }
public Guid? QuestionTypeId { get; set; }
public QuestionType QuestionType { get; set; }
}
And then there's the QuestionAlternative:
public class QuestionAlternative
{
public Guid Id { get; set; }
public string Alternative { get; set; }
public Guid QuestionId { get; set; }
public Question Question { get; set; }
}
My form looks like this:
<form asp-controller="Answer" asp-action="AnswerMe" method="post">
#foreach (var questionPair in Model.Questions)
{
#Html.Hidden("Questions[" + questionIndex + "].Key.Id", questionPair.Key.Id)
<br />
foreach (var alternative in questionPair.Value)
{
<label for="#alternative.Id">#questionPair.Key.Text</label>
<textarea id="#alternative.Id" name="#("Questions["+ questionIndex + "].Value["+ index +"]")"></textarea>
index++;
}
}
questionIndex++;
}
<input type="submit" class="button" value="Answer" />
</form>
The ActionResult that i'm posting to looks like this:
[AllowAnonymous]
[HttpPost("AnswerMe")]
public IActionResult AnswerMe([FromBody]AnswerViewModel model)
{
foreach(var item in model.Questions) //throws exception
....
}
and my viewmodel:
public class AnswerViewModel
{
public ODELDAL.Entities.Test Test { get; set; }
public Dictionary<Question, List<QuestionAlternative>> Questions { get; set; }
public Guid SelectedRole { get; set; }
}
When I post my form the dictionary named Questions is null.
Is it possible to achieve this with the default modelbinder or do i need to build a custom one.
If so, how would that solution look like?
Thanks in advance

Since a Question already possesses a collection of QuestionAlternative why not use a simple collect (List, array....etc) in your view model...
public class AnswerViewModel {
public ODELDAL.Entities.Test Test { get; set; }
public Question[] Questions { get; set; }
public Guid SelectedRole { get; set; }
}
...and an updated view...
<form asp-controller="Answer" asp-action="AnswerMe" method="post">
#for(int i = 0; i < Model.Questions.Length; i++) {
#Html.HiddenFor(m => m.Questions[i].Id)
<br />
for(int j = 0; j < m.Questions[i].QuestionAlternatives.Count; j++) {
#Html.LabelFor(m => m.Questions[i].QuestionAlternatives[j].Alternative,m.Questions[i].QuestionAlternatives[j].Text)
#Html.TextAreaFor(m => m.Questions[i].QuestionAlternatives[j].Alternative)
}
}
<input type="submit" class="button" value="Answer" />
</form>
The model binder will have an easier task of reconstructing your model using this approach as it will be able to use the expressions to generate the ids for the html tags.
For example, the hidden input will look something like this when generated
<input data-val="true" id="Questions_0__Id" name="Questions[0].Id" value="{Some-Guid-Value_Here}" type="hidden">

ASP.NET MVC 5 group of radio buttons

I am starting my first ASP.NET MVC project, so I have one simple question.
I have following code:
foreach(var question in Model.GeneralQuestions)
{
<div class = "well">
<h3>
<strong>#question.QuestionString</strong>
</h3>
#foreach (var answer in question.PossibleAnswers)
{
#Html.RadioButtonFor(model => question.QuestionString, answer.Answer)
#Html.Label(answer.Answer)
<br />
}
</div>
}
All questions in Model.GeneralQuestions are unique, so radio buttons should be divided into groups by name attribute (for each question one group of radio buttons). But this code produces only one group, so when I answer second question first one becomes deselected.
What do I need to change?
EDIT
My model looks like:
public class StudentViewModel
{
public Student Student { get; set; }
public List<Question> GeneralQuestions { get; set; }
public List<SubjectQuestions> SubjectQuestions { get; set; }
}
public class Student
{
public int StudentID { get; set; }
public string Index { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public virtual ICollection<Subject> Subjects { get; set; }
}
public class Question
{
public int QuestionID { get; set; }
public string QuestionString { get; set; }
public bool IsAssociatedWithSubject { get; set; }
public virtual ICollection<PossibleAnswer> PossibleAnswers { get; set; }
public virtual ICollection<Results> Results { get; set; }
}
public class SubjectQuestions
{
public Subject Subject { get; set; }
public List<Question> Questions { get; set; }
}
public class Results
{
public int ResultsID { get; set; }
public int QuestionID { get; set; }
public int? SubjectID { get; set; }
public int PossibleAnswerID { get; set; }
public virtual Question Question { get; set; }
public virtual PossibleAnswer PossibleAnswer { get; set; }
public virtual Subject Subject { get; set; }
}
In one instance of StudentViewModel I save one student and all questions that he should answer (both general and related to subjects he is studying) and pass it to view. In view I put all questions in single form and they are all type of radio. So, can anyone help me with grouping of radio buttons and posting back this form correctly?

There are a number of problems with your code including generating duplicate id's (invalid html), generating duplicate name attributes (which is why you're creating only one group, but more importantly this will prevent you from binding to the model when you post back) and you're not actually binding to a valid property anyway.
You will need to create view models to represent what you want to display and edit and generate the radio buttons in a for loop (or using an EditorTemplate) so they are correctly named with indexers.
View models
public class QuestionVM
{
public int ID { get; set; } // for binding
public string Text { get; set; }
[Required]
public int? SelectedAnswer { get; set; } // for binding
public IEnumerable<AnswerVM> PossibleAnswers { get; set; }
}
public class SubjectVM
{
public int? ID { get; set; }
[DisplayFormat(NullDisplayText = "General")]
public string Name { get; set; }
public List<QuestionVM> Questions { get; set; }
}
public class AnswerVM
{
public int ID { get; set; }
public string Text { get; set; }
}
public class StudentVM
{
public int ID { get; set; }
public string Name { get; set; }
// plus any other properties of student that you want to display in the view
public List<SubjectVM> Subjects { get; set; }
}
View
#model YourAssembly.StudentVM
#using(Html.BeginForm())
{
#Html.HiddenFor(m => m.ID)
#Html.DisplayFor(m => m.Name)
for(int i = 0; i < Model.Subjects.Count; i++)
{
#Html.HiddenFor(m => m.Subjects[i].ID)
#Html.DisplayFor(m => m.Subjects[i].Name) // will display "General" if no name
for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
{
#Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
#Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)
foreach(var answer in Model.Subjects[i].Questions[j].PossibleAnswers )
{
<div>
#Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID})
<label for="#answer.ID">#answer.Text</label>
</div>
}
#Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
}
}
<input type="submit" value="save" />
}
Controller
public ActionResult Edit(int ID)
{
StudentVM model = new StudentVM();
// populate your view model with values from the database
return View(model);
}
[HttpPost]
public ActionResult Edit(StudentVM model)
{
// save and redirect
}
Note I am a little confused by the database structure implied by your models (for example why do you need separate models for Question and SubjectQuestion when a null value for SubjectID identifies it as a "General" question). I suggest you start by just hard-coding some values in the GET method to see how it works and posts back.
StudentVM model = new StudentVM();
model.ID = 1;
model.Name = "bambiinela";
model.Subjects = new List<SubjectVM>()
{
new SubjectVM()
{
Questions = new List<QuestionVM>()
{
new QuestionVM()
{
ID = 1,
Text = "Question 1",
SelectedAnswer = ?, // set this if you want to preselect an option
PossibleAnswers = new List<AnswerVM>()
{
new AnswerVM()
{
ID = 1,
Text = "Answer A"
},
new AnswerVM()
{
ID = 1,
Text = "Answer B"
}
}
},
new QuestionVM()
{
ID = 2,
Text = "Question 2",
PossibleAnswers = new List<AnswerVM>()
{
// similar to above
}
}
}
},
new SubjectVM()
{
ID = 1,
Name = "Math",
Questions = new List<QuestionVM>()
{
// similar to above
}
}
};
When you post, the model is populated with the ID of the selected answer for each question in each subject. Note the use of DisplayFor() for some properties. These won't post back so you would need to repopulate these properties if you return the view (e.g. ModelState is not valid). Alternatively you can generate a read-only textbox or add a hidden input for those properties. I also suggest you inspect the HTML that is generated, in particular the name attributes which will look something like
<input type="radio" name="Subjects[0].Questions[0].SelectedAnswer" ...
to give you an understanding of how collections are bound to your model on post back

The trick is to use an expression (first parameter to Html.RadioButtonFor) which contains a value that changes per group of radio-buttons. In your case, it would be an index in the list of questions.
Here is some sample code:
#for (int i = 0; i < Model.GeneralQuestions.Count; i++)
{
var question = Model.GeneralQuestions[i];
#Html.Label(question.QuestionString)
<br />
foreach (var answer in question.PossibleAnswers)
{
#Html.RadioButtonFor(model =>
Model.GeneralQuestions[i].SelectedAnswerId, answer.Id)
#Html.Label(answer.Answer)
<br />
}
}
This produces the following HTML:
<label for="Q1">Q1</label>
<br />
<input id="GeneralQuestions_0__SelectedAnswerId"
name="GeneralQuestions[0].SelectedAnswerId" type="radio" value="1" />
<label for="A01">A01</label>
<br />
<input id="GeneralQuestions_0__SelectedAnswerId"
name="GeneralQuestions[0].SelectedAnswerId" type="radio" value="2" />
<label for="A02">A02</label>
<br />
<label for="Q2">Q2</label>
<br />
<input id="GeneralQuestions_1__SelectedAnswerId"
name="GeneralQuestions[1].SelectedAnswerId" type="radio" value="11" />
<label for="A11">A11</label>
<br />
<input id="GeneralQuestions_1__SelectedAnswerId"
name="GeneralQuestions[1].SelectedAnswerId" type="radio" value="12" />
<label for="A12">A12</label>
<br />
And for sake of completeness, here is a reduced version of the models used:
public class StudentViewModel
{
public List<Question> GeneralQuestions { get; set; }
}
public class Question
{
public int QuestionId { get; set; }
public string QuestionString { get; set; }
public ICollection<PossibleAnswer> PossibleAnswers { get; set; }
public int SelectedAnswerId { get; set; }
}
public class PossibleAnswer
{
public int Id { get; set; }
public string Answer { get; set; }
}
and here is the code from the action method:
return View(new StudentViewModel
{
GeneralQuestions =
new List<Question>
{
new Question
{
QuestionString = "Q1",
PossibleAnswers =
new[]
{
new PossibleAnswer {Id = 1, Answer = "A01"},
new PossibleAnswer {Id = 2, Answer = "A02"}
}
},
new Question
{
QuestionString = "Q2",
PossibleAnswers =
new[]
{
new PossibleAnswer {Id = 11, Answer = "A11"},
new PossibleAnswer {Id = 12, Answer = "A12"}
}
},
}
});