We Keep Coding

MVC ViewModel containing a dictionary for fields returning empty to controller

Attempting to make a Questionnaire page for a client. It's a pretty large list of questions, so I've broken it up into sections and subsections to make it easier for the user to navigate. The problem seems to be that in order to build the page, I iterate over the sections/subsections/questions, and not the answers. Answers are stored in a dictionary, with the key being the ID number of the associated question.
The ViewModel passed to the view is UserQuestionnaireViewModel, QuestionnaireViewModel has a list of Sections, each of which has a list of SubSections, each of which has a list of Questions. The Answers Dictionary gets all Answers linked to the relevant user, indexed by the Question they're linked to. Missing Answers are populated here, the View breaks if they're missing.
Model
public class UserQuestionnaireViewModel {
ClientPortalDbContext db = new ClientPortalDbContext();
public QuestionnaireViewModel Questionnaire { get; set; }
public Dictionary<Int32, QuestionnaireAnswer> Answers { get; set; }
public UserQuestionnaireViewModel() { }
public UserQuestionnaireViewModel(Int32 userID) {
Questionnaire = new QuestionnaireViewModel();
Answers = new Dictionary<Int32, QuestionnaireAnswer>();
List<QuestionnaireAnswer> answerList = db.QuestionnaireAnswers.Where(a => a.UserID == userID).ToList();
foreach (QuestionnaireAnswer answer in answerList) {
Answers.Add(answer.QuestionID, answer);
}
foreach (QuestionnaireViewModel_Section section in Questionnaire.Sections) {
foreach (QuestionnaireViewModel_SubSection subsection in section.SubSections) {
foreach (QuestionnaireQuestion question in subsection.Questions) {
if (!Answers.ContainsKey(question.ID)) {
Answers.Add(question.ID, new QuestionnaireAnswer() {
QuestionID = question.ID,
UserID = userID,
AnswerBool = false,
AnswerText = ""
});
}}}}}}
The Section and SubSectionclasses contain a name string, and a List of whatever comes under them (SubSection and Question respectively). Question has an id int, string for question text, and bools for what fields to show.
View
<div class="content-wrapper">
<% using (Html.BeginForm("Save", "Questionnaire", new { input = Model.Answers })) { %>
<%: Html.AntiForgeryToken()%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<ul class="questionnaire-tabs">
<% Int32 tabIndex = 0; %>
<% foreach (clientportal.Models.QuestionnaireViewModel_Section section in Model.Questionnaire.Sections) { %>
<% tabIndex++; %>
<li id="<%: "tab-button-" + tabIndex.ToString()%>" data-tab="<%: "tab-" + tabIndex.ToString()%>">
<%: section.Name%>
</li>
<% } %>
</ul>
<div class="clear"></div>
<% tabIndex = 0; %>
<% foreach (clientportal.Models.QuestionnaireViewModel_Section section in Model.Questionnaire.Sections) { %>
<% tabIndex++; %>
<div class="questionnaire-tab-content" id="<%: "tab-" + tabIndex.ToString()%>">
<p><%: section.Heading%></p>
<% foreach (clientportal.Models.QuestionnaireViewModel_SubSection subsection in section.SubSections) { %>
<h4><%: subsection.Name%></h4>
<p><%: subsection.Heading%></p>
<div>
<table class="questionnaire-table">
<% foreach (clientportal.Models.QuestionnaireQuestion question in subsection.Questions) { %>
<% clientportal.Models.QuestionnaireAnswer answer = Model.Answers[question.ID]; %>
<% if (question.Enabled) { %>
<tr>
<td class="label-col">
<%: Html.Label(question.Text) %>
<%: Html.Hidden("Model.Answers.Index", question.ID) %>
<%: Html.Hidden("Model.Answers[" + question.ID + "].ID", answer.ID) %>
<%: Html.Hidden("Model.Answers[" + question.ID + "].QuestionID", answer.QuestionID) %>
<%: Html.Hidden("Model.Answers[" + question.ID + "].UserID", answer.UserID) %>
</td>
<td class="bool-col">
<% if (question.ShowCheckBox) { %>
<%: Html.CheckBox("Model.Answers[" + question.ID + "].AnswerBool", answer.AnswerBool) %>
<% } else { %>
<%: Html.Hidden("Model.Answers[" + question.ID + "].AnswerBool", answer.AnswerBool) %>
<% } %>
</td>
<td class="text-col">
<% if (question.ShowTextBox) { %>
<%: Html.TextBox("Model.Answers[" + question.ID + "].AnswerText", answer.AnswerText) %>
<% } else { %>
<%: Html.Hidden("Model.Answers[" + question.ID + "].AnswerText", answer.AnswerText) %>
<% } %>
</td>
</tr>
<% } %>
<% } %>
</table>
</div>
<% } %>
</div>
<% } %>
</fieldset>
<h4>Please ensure you have checked all sections of the Questionnaire before saving.</h4>
<input type="submit" value="Save Answers" />
<% } %>
</div>
On submitting the form, it goes through to the Controller fine (The Controller takes a Dictionary<Int32, QuestionnaireAnswer> for this Action), except the model sent through has 0 rows and fails ModelState.IsValid
Looking around SO has given me the idea that this is an issue with MVC and Dictionaries in general, or simply failure to bind the dictionary. Any answers in the Database are displayed correctly, it's simply the inability to get the contents of the page back to the controller that's preventing me moving onwards.

Don't use foreach loop. Use for loop.
One more thing always use Html.HiddenFor(model.xxxx) and for other controls also.
If you use for loop along with HiddenFor this will automatically create appropriate name for controls
If it's possible to separate out database operation from MVC model then it's best.

View loop value doesn't change after first value

I have an ICollection<String> being passed to my view and I do a foreach to load a partial view. It loops through the correct number of times, however, the value it passes is the same and I know in the model that this is not the case.
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View("Index", new List<String>());
}
[HttpPost]
public ActionResult Index(List<String> txtValue)
{
return View("Index", txtValue);
}
}
View:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<String>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
//Deletes the div the Control is in.
$(".delete").live("click", function () {
$(this).parent().remove();
});
//Adds the TextBoxes to divControls
function AddTextBox(Value) {
var elements = "<div><input name=\"txtValue\" type=\"text\" /><input type=\"button\" class=\"delete\" value=\"-\" /><br/></div>";
$("#divControls").append(elements);
}
</script>
<h2>Controls!!!</h2>
<input id="btnAdd" type="button" name="Refresh" value="+" onclick="AddTextBox()" />
<% using (Html.BeginForm())
{ %>
<input id="btnsubmit" type="submit" name="Submit" onclick="Submit" />
<div id="divControls">
<%
foreach (var text in this.Model)
{ %>
<%=Html.TextBox("txtValue", text, new { id = "Value", name = "txtValue" })%>
<% Html.RenderPartial("TextControl", text);
}
%>
</div>
<%
}
%>
</asp:Content>
TextControl.ascx
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<String>" %>
<div>
<%=Html.TextBox("txtValue", this.Model, new { id = "Value", name = "txtValue" }) %>
<input id="btn" type="button" class="delete" value="-" /><br/>
</div>
The values of the model passed from the controller to the view are correct, even when passed to the user control "TextControl" the value is correct, but when the Textbox displays they are all just the first value of the original model passed in.
Ex.
Model as List<String> { "1", "2", "3", "4" }
passed to the view, will iterate through each one correctly, passing the correct string to "TextControl" to create a Html.TextBox("name", this.Model). Everything on the debugging side appears correct, however, when it finishes all the textboxes are "1" (or the first value in the list).
Here's a link to my exact code: http://www.sendspace.com/file/sypl1u
Note:
I came up with a solution of just using <input type="text" name="txtValue" value="<%= this.Model %>" /> instead.

Potential issue: you are using ElementAt which is LINQ method that fave special behavior for IList argument, but you are passing in txtValue as result of some query. In this case ElementAt may case sequence to be enumerated multiple times and may even fail if sequence can't be re-enumerated.
Consider simple foreach on the collection instead:
foreach (var text in Model)
{
Html.RenderPartial("TextControl", text);
}

Display data on form and update form asynchronously

What is the best way to approaching this? I have a text box where Teachers enter Student ID and I want to display student information based on the id entered. Once the student info is displayed, I have a drop down list which populates with a list which lists all the classes that student is enrolled in. Once a course is selected from that drop down list I want to display students progress on the form in a particular section on the form. How can I approach this? Here is What I have so far:
Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Student.Models;
namespace Student.Controllers
{
public class StudentFormController : Controller
{
//
// GET: /StudentForm/
public ActionResult Index()
{
return View("StudentForm");
}
public ActionResult DisplayStudentDetails(string StudentId)
{
StudentDataContext db = new StudentDataContext();
var StudentName = (from p in db.vwStudent.Where(a => a.StudentID == StudentId)
group p by p.StudentName into g
select g.Key).FirstOrDefault();
var StudentClassList = (from p in db.vwStudent.Where(a => a.StudentID == StudentId)
group p by p.ClassID into g
select g.Key).ToList();
ViewData["StudentName"] = StudentName;
ViewData["StudentClassList "] = StudentClassList ;
return View("StudentForm");
}
public ActionResult DisplayClassDetails(string StudentId, string ClassId)
{
StudentDataContext db = new StudentDataContext();
ViewData.Model = (from p in db.vwStudentProgress.Where(a => a.StudentID == StudentId && a.ClassID == ClassId);
return View("LPForm");
}
}
}
View(Form):
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
Student Form
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<form id="form2" method="get" action="/StudentForm/DisplayStudentDetails/" runat="server">
<div style="text-align: left; height: 202px;">
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
Student Id:<input type="text" name="id" value="<%=HttpContext.Current.Request.QueryString["StudentId"]%>" /><br />
Student Name:<input type="text" name="StudentName" value="<%=ViewData["ShortName"]%>" /><br />
Classes Enrolled in:
<select name="Classes">
<%if (ViewData["Classes"] != null)
{%>
<% foreach (int? Classes in (List<int?>)ViewData["Classes"])
{%>
<option><%=Classes%></option>
<%}%>
<%}%>
</ContentTemplate>
</asp:UpdatePanel>
<input type="submit" value="Display Student Details"/>
</div>
</form>
</asp:Content>

What is the best way to approaching this?
Simple answer is AJAX. Don't try to use update panels in an ASP.NET MVC application. Use jquery to male ajax calls and update portions of your page.
Once a course is selected from that drop down list I want to display
students progress on the form in a particular section on the form. How
can I approach this?
Basically you should bind to the change event of the dropdown through jquery and call an action that returns a partial view.
Use html helpers to create textboxes, form and other stuff and avoid using the html elements directly.

how to read TextArea value and model in HttpPost in MVC2

I'm new in MVC2, so sorry for stupid question. I looked for nice answer, but can't find it. So my question is:
I have view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MyProject.MyDB.MyProducts>>" %>
<%# Import Namespace="MyProject.MyDB" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
<% using (Html.BeginForm())
{%>
<table>
<%
foreach (var item in Model)
{%>
<tr>
<td>
<%:item.name%>
</td>
<td>
<%:String.Format("{0:g}", item.date)%>
</td>
</tr>
<% } %>
</table>
<div>
<%:Html.TextArea("MyTextArea")%>
</div>
<p>
<input type="submit" value="Send" />
</p>
<% } %>
</asp:Content>
My controller is:
[HttpGet]
public ActionResult ViewMyProducts(int id)
{
List<MyProducts> myModel = GetMyProducts(id);
return View(myModel);
}
[HttpPost]
public ActionResult ViewMyProducts(/*???What should I put here???*/)
{
if(/*I want "MyTextArea" value here*/ == something && myModel/*from view*/.count==5}
{
//do something
}
return View(myModel);
}
So, in HttpPost I need myModel from view and value of "MyTextArea" from view. How can I get them?? I'll appreciate any help.

I would think that the following should work:
[HttpPost]
public ActionResult ViewMyProducts(string MyTextArea)
A helpful thing to do would be to explicitly call your Action in your Form - by changing this line:
<% using (Html.BeginForm())
to
<% using (Html.BeginForm("ViewMyProducts","ControllerName",HttpMethod.Post))
to ensure that the Submit action redirects it to the right Action.
As far as the model is concerned:
If you are just checking the Count - you could make a hidden field that returns the number of items in the "Model" like such:
<%: Html.Hidden("modelCount", Model.Count());
but if you want the entire Model - it would be need to be something like this:
<%: Html.Hidden("myModel", Model);
then you could further modify your Action to look something like this:
ViewMyProducts(string MyTextArea, int modelCount)
{
//...
}
or
ViewMyProducts(string MyTextArea, IEnumerable<MyProject.MyDB.MyProducts> myModel)
{
//...
}
Although you have access inside of the Controller to refresh the Model - so if you didn't need to pass back the entire thing you could still repopulate your view with a fresh call.

string myTextArea - or you could just check the FormCollection (I would recommend the named variable).
If you want to get the model back from the view, you will need to serialize it out as well in order to get back the values. If this is the case, I would convert the whole thing to a view model that either derives from your Model or has a public property that is your model, add a property for MyTextArea and then emit hidden input's for you model, named for the appropriate properties. Assuming that your model is persisted somewhere (database), I would just pass the key (id) and rehydrate the object from within the action result.
[HttpPost]
public ActionResult ViewMyProducts(ViewMyProductsViewModel viewModel)
{
if(viewModel.MyTextArea == "something" && (IEnumerable<foo>)myModel).Count()==5)) {
var model = repo.Get(myModel.First().Id);
// do something with the model
}
return View(viewModel);
}
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MyProject.MyDB.MyProducts>>" %>
<%# Import Namespace="MyProject.MyDB" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
<% using (Html.BeginForm())
{%>
<table>
<%
foreach (var item in Model)
{%>
<tr>
<td>
<input type="hidden" name="viewModel.Id" value="<%:item.id%>" />
<%:item.name%>
</td>
<td>
<%:String.Format("{0:g}", item.date)%>
</td>
</tr>
<% } %>
</table>
<div>
<%:Html.TextArea("MyTextArea")%>
</div>
<p>
<input type="submit" value="Send" />
</p>
<% } %>
</asp:Content>

First of all You are rendering item.name and item.date as a text not html control. So You won't be able to receive it in controller method parameters.

How do I send data from DropDownList to Html.BeginForm in MVC?

I would like to pass a date from a drop down list to my ID in the Html.BeginForm. This is what I have so far.
<%using (Html.BeginForm("Inquiry", "Billing", new { Date = ????? }, FormMethod.Post))
<select id="myList" name="myList" >
<option>Term - Balance</option>
foreach (var item in Model.Term)
{ %>
<option value="/<%=String.Format("{0:yyyyMMdd}", item.Date) %>" >
<%=item.Date.ToShortDateString()%> - <%=String.Format("{0:C}", (item.Balance))%></option>
<% } %>
</select>
Any suggestions?

You can add additional attributes to the BeginForm method like this:
<% using (Html.BeginForm("Inquiry", "Billing",
FormMethod.Post, new { id = myDate.ToString() }))
{ %>
...
<%} %>
If you're asking how to make the form ID change when a user changes the selection on a dropdownlist on the form, then you'll need to use javascript for that. The code above only runs once at render time, so if your myDate variable isn't set by then, then you can't get it on the server side.