Develop Reference

Boostrap Datetimepicker with Html.hiddenfor not binding values in controller action

I am working in an mvc problem and I found my self stuck in a problem trying to bind datetimepicker data to my controller action. I have a view that add a partial to collection of partial views when the user do some action.
My Models looks like
public class CreateOCVM
{
private string errors { get; set; }
public operaciones_confidenciales oc { get; set; }
[Display(Name = "Restringidas")]
public ICollection<PersonaMin> restringidas { get; set; }
public class PersonaMin
{
public int Id { get; set; }
public string motivo { get; set; }
[DataType(DataType.Date)]
public DateTime fecha_acceso;
In my view I have
#using (Html.BeginForm("CreateOC", "OC", FormMethod.Post, new { id = "form" }))
<table id="personasRestringidas" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>Motivo</th>
<th>Fecha de acceso</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody id="person">
#foreach (PersonaMin item in Model.restringidas)
{
#Html.Partial("~/Views/OC/AddOCRestriccion.cshtml", item)
}
</tbody>
</table>
When user do some ation I add a new item to the ICOllection restringidas. By making an ajax call to a controller method as follows:
function addRestriccion(idPersona) {
if (jQuery.inArray(idPersona, dataset) != 0) {
$.get('/OC/AddOCRestriccion', { id: idPersona}, function (template) {
dataset.push(idPersona);
$("#person").append(template);
$('#datetimepicker' + idPersona).datetimepicker();
$('#datetimepicker' + idPersona).datetimepicker({ format: "DD/MM/YYYY hh:mm" });
$("#datetimepicker" + idPersona).on("change.dp", function (e) {
$('#fechaAcceso' + idPersona).val($("#datetimepicker" + idPersona).datepicker('getFormattedDate'))
});
});
}
This call a controller method an returns a partial view that will be added to the main view.
[HttpGet]
public ActionResult AddOCRestriccion(Int32 id)
{
PersonaMin item = new PersonaMin();
item.Id = id;
persona p = PersonaCollection.getPersonasById(id);
return PartialView("AddOCRestriccion", item);
}
Edit:
This controller returns the partial view to add in the main one.
<tr>
#using (Html.BeginCollectionItem("restringidas"))
{
<td>
#Html.HiddenFor(model => model.Id)
#Html.DisplayFor(model => model.Id, new { #placeholder = "id", #id = "ID" })
</td>
<td>
#Html.TextAreaFor(model => model.motivo, new { #placeholder = "motivo", #id = "motivo", #class = "form-control" })
</td>
<td>
<div class='input-group date' id="#("datetimepicker" + Model.Id)">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
#Html.HiddenFor(model => model.fecha_acceso, new { #id = "fechaAcceso" + Model.Id })
</div>
</td>
<td class="text-center">
<span class="input-group-btn">
<button type="button" class="btn btn-primary" onclick="deleteAnother($(this).parent().parent())">
<i class="fa fa-minus"></i>
</button>
</span>
</td>
}
When I submit the form it is handled by the controller action
[HttpPost]
public ActionResult CreateOC(CreateOCVM ocvm)
{ ... do something ....
The problem is that when i check the values on my model all the values are ok but not the one for the datetime (fecha_acceso)
In my view the hidden field for my datetime property has value on it.
But the value change when i check it on the controller method.
I tried with diferent aproaches but i always get wrong data on my controller method. Does somebody knows what is happening? Or has somebody a different aproach that can help me to do the same?
Thanks.

By default controller doesn't allow date format as dd-mm-yyyy.
Add below lines in your web.config file to do it
<configuration>
<system.web>
<globalization culture="en-GB" />
</system.web>
</configuration>

Looks like my Html.BeginCollectionItem helper has problems with DateTime so y change de type of my viewmodel from datetime to string. I know it is a workaround and not the correct solution but the lack of time force me to do it.

.NET MVC C# Error - A data source must be bound before this operation can be performed

I am encountering the following error:
A data source must be bound before this operation can be performed.
I have a text box, the user enters a name, and clicks the submit button. The name is added to a list. I have researched the error but everything I try gives me the same error. Any insight on what I am doing wrong will be appreciated.
Model:
namespace RangeTest.Models
{
public class UserNameModel
{
[Key]
public int Id { get; set; }
[Display(Name = "Names Added List")]
public string FullName { get; set; }
}
}
Controller:
public ActionResult Admin()
{
return View();
}
[HttpPost]
public ActionResult Admin(UserNameModel model, IEnumerable<RangeTest.Models.UserNameModel> t)
{
List<UserNameModel> userList = new List<UserNameModel>();
model.FullName = t.FirstOrDefault().FullName;
userList.Add(model);
return View(userList.ToList());
}
View (Admin.cshtml):
#model IEnumerable<RangeTest.Models.UserNameModel>
#{
ViewBag.Title = "";
}
<div class="container"></div>
<div class="jumbotron">
#using (Html.BeginForm("Admin", "UserNames", FormMethod.Post, new { #id = "WebGridForm" }))
{
#Html.ValidationSummary(true)
WebGrid dataGrid = new WebGrid(Model, canPage: false, canSort: false);
//Func<bool, MvcHtmlString> func =
//(b) => b ? MvcHtmlString.Create("checked=\"checked\"") : MvcHtmlString.Empty;
<div class="table-bordered">
<div class="Title">Admin - Add names to range list</div><br />
<table id="TblAdd"class="table">
<tr>
#{
RangeTest.Models.UserNameModel t = new RangeTest.Models.UserNameModel();
}
#Html.Partial("_AddDynTable", t)
</table>
</div>
<div class="table-responsive">
<div class="Title">Names Added to Range List</div>
<table class="table">
<tr>
<td >
#dataGrid.GetHtml(columns: dataGrid.Columns(dataGrid.Column(format: #<text>#item</text>),
dataGrid.Column("", format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.id }))))
</td>
</tr>
</table>
</div>
}
</div>
Partial View (_addDynTable.cshtml)
#model RangeTest.Models.UserNameModel
<tr>
<td>
Enter Full Name: #Html.TextBoxFor(m => m.FullName)
#*<input type="button" value="Create" id="ClickToAdd" />*#<input class="CreateBtn" type="submit" value="Add to List" /></td>
</tr>

Can you link info about the error please?
One thing I can see is your t object is null when you pass it to the partial view
RangeTest.Models.UserNameModel t = new RangeTest.Models.UserNameModel();
A new UserNameModel with no data in it, if your error is there that might be the problem

Model empty on post

When I submit, my model is empty on post.
Model
public QuizModel()
{
Questions = new List<QuizQuestionModel>();
}
public QuizModel(string quizName)
{
QuizName = quizName;
Score = 0;
IntranetEntities db = new IntranetEntities();
Quiz quiz = db.Quizs.Where(x => x.Name.Equals(quizName, StringComparison.InvariantCultureIgnoreCase)).FirstOrDefault();
if (quiz != null)
{
IQueryable<Quiz_Question> questions = db.Quiz_Question.Where(x => x.QuizID.Equals(quiz.ID)).OrderBy(x => x.QuestionNo);
Questions = new List<QuizQuestionModel>();
foreach (Quiz_Question question in questions)
{
QuizQuestionModel q = new QuizQuestionModel();
q.ID = question.ID;
q.Question = question.Question;
q.UserAnswer = null;
q.SystemAnswer = question.Answer;
Questions.Add(q);
}
}
}
public string QuizName { get; set; }
public List<QuizQuestionModel> Questions { get; set; }
public int Score { get; set; }
Controller
[HttpPost]
public ActionResult OSHAQuiz(Models.QuizModel model)
{
if (ModelState.IsValid)
{
bool passed = false;
model.Score = model.Questions.Where(x => x.UserAnswer.Equals(x.SystemAnswer, StringComparison.InvariantCultureIgnoreCase)).Count();
if (!model.Score.Equals(0))
{
double percent = model.Score / model.Questions.Count();
if (percent >= .8)
{
passed = true;
}
}
if (passed)
{
return View("/Views/Quiz/Passed.cshtml");
}
else
{
return View("/Views/Quiz/Failed.cshtml");
}
}
else
{
return View("/Views/Quiz/Quiz.cshtml", model);
}
}
View
#model PAL.Intranet.Models.QuizModel
<script>
$(document).ready(function () {
$("input:checked").removeAttr("checked");
});
</script>
<div class="grid">
<h2>OSHA Quiz</h2>
<hr />
<div class="align-center">
#using (Html.BeginForm("OSHAQuiz", "Quiz", FormMethod.Post, new { id = "formShowLoading" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="row cell">
<div class="example bg-grayLighter" data-text="Directions">
<ul class="simple-list">
<li class="align-left">When you have made your selection for all 20 statements, click on the button 'Submit.'</li>
<li class="align-left">Mark 'True' or 'False' for each statement.</li>
<li class="align-left">You must score 80% (16 correct) to pass.</li>
<li class="align-left">You must fill in your full name to receive credit.</li>
</ul>
</div>
</div>
<div class="row cell">
<div class="row cell">
<div class="panel" data-role="panel">
<div class="heading">
<span class="title">Questions</span>
</div>
<div class="content">
<ul class="numeric-list">
#foreach (var question in Model.Questions)
{
<li>
<table class="table hovered" style="width: 100%;">
<tr>
<td align="left">#question</td>
<td align="right" width="150px">
<div class="align-center">
<label class="align-right input-control radio small-check">
#Html.RadioButtonFor(model => question.UserAnswer, true, new { Name = question.GroupName })
<span class="check"></span>
<span class="caption">True</span>
</label>
<label class="align-right input-control radio small-check">
#Html.RadioButtonFor(model => question.UserAnswer, false, new { Name = question.GroupName })
<span class="check"></span>
<span class="caption">False</span>
</label>
</div>
</td>
</tr>
</table>
</li>
}
</ul>
</div>
</div>
</div>
</div>
<div class="row cell">
<input type="submit" value="Submit" class="button info small-button" />
<input type="reset" value="Reset" class="button primary small-button" />
</div>
}
</div>
</div>
UPDATE
if I use HiddenFor on QuizName, it does come back over on post but the rest of the model is empty.

When iterating over a collection that you want to post back to your model, you can't use foreach; you must use a regular for statement with indexing in order for Razor to generate the correct field names.
#for (var i = 0; i < Model.Questions.Count(); i++)
{
...
#Html.RadioButtonFor(m => m.Questions[i].UserAnswer)
}
Then, your fields will have name attributes in the form of Questions[0].UserAnswer, which the modelbinder will recognize and bind appropriately to your model. As you have it now, with the foreach, the field name is being generated as question.UserAnswer, which the modelbinder has no idea what to do with and discards.
Also, FWIW, accessing your context from within your model entity is a hugely bad idea, and even worse if you're not injecting it. Move that logic out of your entity and utilize a utility class or service instead. Also, look into dependency injection, as your context is one of those things that you want one and only one instance of per request. If you start instantiating multiple instances of the same context, you will have problems.

The problem is model binding is going to attempt to bind your form values to properties on your model. It will not use the constructor on your model that takes the quiz name, it will use the default constructor to instantiate the QuizModel object.
I would consider refactoring this model to remove your EntityFramework dependency and find a new way to populate those values.
You should also call the Dispose() method on IDisposable objects when you're done using them.
My suggestion for how to solve this problem would be to use the QuizModel you currently have to help render your view (i.e. Your quiz questions and possible answer for each question).
Create a seperate ViewModel for quiz submission
public class QuizSubmission
{
public string QuizName { get;set; }
public List<QuizQuestionResponse> Responses { get;set; }
}
public class QuizQuestionResponse
{
public int QuestionId { get;set; }
public int AnswerId { get;set; }
}
In your controller action, you should be binding to a QuizSubmission model.
[HttpPost]
public ActionResult OSHAQuiz(Models.QuizSubmission model)
{
Then you'll be able to perform any actions you need for that quiz submission (ie. data access, validation ).
You'll also need to update your view so that your Html input elements have the correct name attributes that model binding can correctly bind each question and response pair to a QuizQuestionResponse item in your Responses list.

Model passed to Partial to View

Been searching around but couldn't find a direct solution to what I'm trying to achieve.
I've tried to include as much as needed but it's a very large project so hopefully you'll get the gist.
Overview:
I have a view model that has several lists of objects within it. I am using two partial views for control over each of the list of objects, one for gathering the list of objects (which is held in a session), and the other for adding a list of said object into the list.
Update:
As per comment - what I am looking to do is as follows - in the Index, fill out the existingIp model info, which is displayed through the addToListPartialView, then it will post to the ListPartialView to update the list through the session, handled backend in the controller, which will in turn display on the Index - the question ultimately is, how do I achieve this?
Problem:
The issue I'm having is once I've added an object, through a partial view, to the object list, another partial view, how do I then pass this back to the main view?
Code:
Controller
public ActionResult AddExistingIp([Bind(Include = "Subnet, Cidr, Mask")]ExistingIp existingIp)
{
if(Session["pa_ipv4Session"] != null)
{
pa_ipv4 pa_ipv4 = (pa_ipv4)Session["pa_ipv4Session"];
if(pa_ipv4.ExistingIps == null)
{
pa_ipv4.ExistingIps = new List<ExistingIp>();
}
pa_ipv4.ExistingIps.Add(existingIp);
ViewBag.pa_ipv4 = pa_ipv4.ExistingIps;
return View("ExistingIpView", ViewBag.pa_ipv4);
}
else
{
pa_ipv4 pa_ipv4 = new pa_ipv4();
Session["pa_ipv4Session"] = pa_ipv4;
pa_ipv4.ExistingIps = new List<ExistingIp>();
pa_ipv4.ExistingIps.Add(existingIp);
ViewBag.pa_ipv4 = pa_ipv4.ExistingIps;
return View("ExistingIpView", ViewBag.pa_ipv4);
}
Index:
#model ViewModel
<div id="ExistingIpList">
#{Html.RenderPartial("ExistingIpView");}
</div>
<div id="addExisting">
#{Html.RenderPartial("AddExistingIp");}
</div>
List Partial
#model IEnumerable<ExistingIp>
#if (Model != null)
{
foreach (var ei in Model)
{
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a">
<span>#ei.Subnet</span>
</div>
<div class="ui-block-b">
<span>#ei.Cidr</span>
</div>
<div class="ui-block-c">
<span>#ei.Mask</span>
</div>
<div class="ui-block-d">
#ei.Id
Delete
</div>
</div>
}
}
Add to list partial:
#using (Html.BeginForm("AddExistingIp", "PA_IPV4"))
{
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a">
<span>
#Html.EditorFor(m => m.Subnet)
#Html.ValidationMessageFor(m => m.Subnet)
</span>
</div>
<div class="ui-block-b">
<span>
#Html.EditorFor(m => m.Cidr)
#Html.ValidationMessageFor(m => m.Cidr)
</span>
</div>
<div class="ui-block-c">
<span>
#Html.EditorFor(m => m.Mask)
#Html.ValidationMessageFor(m => m.Mask)
</span>
</div>
<div class="ui-block-d">
<span>
#Html.EditorFor(m => m.Id)
#Html.ValidationMessageFor(m => m.Id)
</span>
</div>
</div>
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<input type="submit" id="addExistingIp" cssclass="ui-btn ui-corner-all ui-shadow" value="Add" />
</div>
</div>
}
ViewModel:
public Contact ContactDetails { get; set; }
[Required]
public bool ExistingAddress { get; set; }
public List<ExistingIp> ExistingIps { get; set; }
[Required]
[DataType(DataType.MultilineText)]
public string ExistingNotes { get; set; }

You can modify the AddExistingIp to just store the data. And to make a RedirectToAction Index. There you will take the data from Session and pass it to the Model.
[HttpPost]
public ActionResult AddExistingIp([Bind(Include = "Subnet, Cidr, Mask")]ExistingIp existingIp)
{
if(Session["pa_ipv4Session"] != null)
{
pa_ipv4 pa_ipv4 = (pa_ipv4)Session["pa_ipv4Session"];
if(pa_ipv4.ExistingIps == null)
{
pa_ipv4.ExistingIps = new List<ExistingIp>();
}
pa_ipv4.ExistingIps.Add(existingIp);
}
else
{
pa_ipv4 pa_ipv4 = new pa_ipv4();
Session["pa_ipv4Session"] = pa_ipv4;
pa_ipv4.ExistingIps = new List<ExistingIp>();
pa_ipv4.ExistingIps.Add(existingIp);
}
return RedirectToAction("Index");
}
The Index Action will look similar with this, where you take data from Session and use it in your Model
public ActionResult Index()
{
var viewModel = new ViewModel();
// take data from Session
pa_ipv4 pa_ipv4 = Session["pa_ipv4Session"] as (pa_ipv4);
// some verification
// add the list from Session to model
viewModel.ExistingIps = pa_ipv4.ExistingIps;
return View(viewModel);
}
Also, I think your Index View you should at ExistingIpView you should pass the Model to display.
#model ViewModel
<div id="ExistingIpList">
#{Html.RenderPartial("ExistingIpView", Model.ExistingIps);}
</div>
<div id="addExisting">
#{Html.RenderPartial("AddExistingIp");}
</div>

Postback problems

When I postback on my "Review" page I check the modelstate and based on the results either redisplay the page or continue. I have two issues.
When it fails validation it hangs up on partial views on that it loaded fine on the original get for the page.
edit: This was caused by the [HttpGet]attribute being applied to methods for the partials views. I removed the attribute and the partials renedered.
If I comment out the partials then the the whole page diplays without any CSS styles..it's all text black and white. Edit: I'm still having the problem with the styles missing from the page
[HttpGet]
public ActionResult Review()
{
var agmtsService = new AgreementsService();
bool? scoreRelease = agmtsService.GetReleaseScoreIndicator();
var vm = new ReviewModel {ReleaseScoreIndicator = scoreRelease};
return View(vm);
}
[HttpPost]
public ActionResult Review(ReviewModel model)
{
if(!ModelState.IsValid)
{
return View(model);`**This is displaying the view w/o head section and no css**`
}
return RedirectToAction("CheckOut", "Financial");
}
edit:
View Model
public class ReviewModel
{
public bool? ReleaseScoreIndicator { get; set; }
// Terms & Conditions
[RequiredToBeTrue(ErrorMessage = "Eligibility Checkbox must be checked.")]
public bool TermsEligibility { get; set; }
[RequiredToBeTrue(ErrorMessage = "True and Accurate Checkbox must be checked.")]
public bool TermsAccurate { get; set; }
[RequiredToBeTrue(ErrorMessage = "Identity Release Checkbox must be checked.")]
public bool TermsIdentityRelease { get; set; }
[RequiredToBeTrue(ErrorMessage = "Score Release Checkbox must be checked.")]
public bool TermsScoreRelease { get; set; }
}
public class RequiredToBeTrueAttribute : RequiredAttribute
{
public override bool IsValid(object value)
{
return value != null && (bool)value;
}
}
View
#model Registration.Web.Models.ReviewModel
#{
ViewBag.DisableNavigation = true;
}
<script type="text/javascript">
$(document).ready(function () {
$('.open_review').toggle(function() {
$(this).text('Done').parents('.review_section').addClass('open_for_review').find('.review_content').slideDown('fast');
return false;
}, function() {
$(this).text('Review').parents('.review_section').removeClass('open_for_review').find('.review_content').slideUp('fast');
return false;
});
});
</script>
<div class='section module'>
<h2>
Please Review Your Application
</h2>
<p>
Remember that your application fee is
<strong>
not refundable.
</strong>
Review your information below and make corrections before submitting.
</p>
<div class='review_section'>
<a class="button open_review" href="#">Review</a>
<h4>
Identification
</h4>
#{Html.RenderAction("Review", "PersonalInformation");}
</div>
<div class='review_section'>
<a class="button open_review" href="#">Review</a>
<h4>
Education
</h4>
#{Html.RenderAction("Review", "MedicalEducation");} /////hangs here
</div>
<div class='review_section'>
<a class="button open_review" href="#">Review</a>
#{Html.RenderAction("Review", "PostGraduate");}////then hangs here
</div>
</div>
<div class='actions' id='terms_and_conditions'>
#using (Html.BeginForm("Review", "Agreements", FormMethod.Post))
{
//"reviewForm","Agreements", FormMethod.Post
#Html.ValidationSummary(true)
<div class='group' id='data_release'>
<h4>
Data Release
</h4>
<p>
Do you wish to release your scores?
</p>
<ul class='input_group'>
<li>
#Html.RadioButtonFor(model => model.ReleaseScoreIndicator, true)
<label>
Yes
</label>
</li>
<li>
#Html.RadioButtonFor(model => model.ReleaseScoreIndicator, false)
<label>
No
</label>
</li>
</ul>
</div>
<div class='group' id='terms'>
<h4>
Terms & Conditions
</h4>
#Html.ValidationSummary(false)
<table>
<tbody>
<tr>
<th>
#Html.CheckBoxFor(x => x.TermsEligibility)
#* #Html.CheckBox("terms_eligibility")*#
</th>
<td>
<label for='terms_eligibility'>
I currently meet all of the
requirements
and have read the
Information
</label>
</td>
</tr>
<tr>
<th>
#Html.CheckBoxFor(x => x.TermsAccurate)
#* #Html.CheckBox("terms_accurate")*#
</th>
<td>
<label for='terms_accurate'>
The information I've provided is true and accurate
</label>
</td>
</tr>
<tr>
<th>
#Html.CheckBoxFor(x => x.TermsIdentityRelease)
#* #Html.CheckBox("terms_identity_release")*#
</th>
<td>
<label for='terms_identity_release'>
I authorize the release
</label>
</td>
</tr>
<tr>
<th>
#Html.CheckBoxFor(x => x.TermsScoreRelease)
#*#Html.CheckBox("terms_score_release")*#
</th>
<td>
<label for='terms_score_release'>
I agree
</label>
</td>
</tr>
</tbody>
</table>
</div>
<div class='actions'>
<input type="submit" value="Go To Checkout" class="button" />
<a class="button" onclick="getForMasterPage('#Url.Action("CheckOut", "Financial")', null);">BYPASS</a>
</div>
} </div>

Do you need to set the ReleaseScoreIndicator on the return from being posted? It looks like it gets set for the initial GET, but the subsequent one, it doesn't get set. Does the view use that property?