In my application, previously I had issue with loading data to the partial view. With help I resolved that it. But still there is some issue here. Now when create the request I use this partial view to add data and image for user.
#model Asp_PASMVC.Models.GeneralItms
#using Asp_PASMVC.Infrastructure
#{
var z = Model.Attachment_Description;
var a = Model.Attachment_Amount;
var x = Model.Attachment;
}
<li style="padding-bottom:15px">
#using (Html.BeginCollectionItem("GeneralItmsList"))
{
#Html.HiddenFor(model => model.TempID)
<div class="form-horizontal" id="quickForm" novalidate="novalidate">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="form-group">
Select Item Description
<div class="col-md-10">
#Html.EditorFor(model => model.Attachment_Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Attachment_Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment Amount
<div class="col-md-10">
<div class="input-group-prepend">
<span class="input-group-text">Rs.</span>
#Html.EditorFor(model => model.Attachment_Amount, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Attachment_Amount, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment
<div class="col-md-10">
<input type="file" name="ImageData#(Model.TempID.ToString())" id="ImageData#(Model.TempID.ToString())" multiple="multiple" data-id="Img#(Model.TempID.ToString())" onchange="checkImage(this)" />
#Html.ValidationMessageFor(model => model.Attachment, "", new { #class = "text-danger" })
</div>
</div>
<img id="Img#(Model.TempID.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
</div>
<button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
</div>
</div>
}
</li>
<script type="text/javascript">
$('.js-dropdown').select2({
width: '100%', // need to override the changed default
});
function checkImage(obj) {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
var ResponceImgId = $(obj).data('id');
if ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert('error', 'Upload Error', 'Only .jpeg, .jpg, .png, .gif, .bmp formats are allowed.');
}
else {
var files = obj.files;
var reader = new FileReader();
name = obj.value;
reader.onload = function (e) {
$('#' + ResponceImgId).prop('src', e.target.result);
};
reader.readAsDataURL(files[0]);
}
}
</script>
When creating the request in the controller I have code like this
if (appRequest.GeneralItmsList != null)
{
foreach (GeneralItms item in appRequest.GeneralItmsList)
{
HttpPostedFileBase file = Request.Files["ImageData" + item.TempID];
item.Attachment = ConvertToBytes(file);
}
appRequest.General = new List<General>()
{
new General
{
GeneralItms = appRequest.GeneralItmsList,
}
};
}
and this method will convert the image to byte and pass to the controller to submit the data.
public ActionResult RetrieveImageG(int id)
{
var q = from temp in db.GeneralItms where temp.Id == id select temp.Attachment;
byte[] cover = q.First();
if (cover != null)
{
return File(cover, "image/jpg");
}
else
{
return null;
}
}
So Crete is working fine, and when in the edit view, I again called the same partial view to load the data inside the edit main view.
It's has 3 fields. Item Description , Amount and the attachment.
So It's loading the Item Description and amount properly, and it won't load the image again. Within the partial view I have put
#{
var z = Model.Attachment_Description;
var a = Model.Attachment_Amount;
var x = Model.Attachment;
}
to check is data passing to the view. attachment is shown in the Model.Attachment. But it won't show in the view. Can I get a help on this?
if you already happen to have the image loaded in your model: doing this way you can display the image
<img src="data:image;base64,#System.Convert.ToBase64String(Model.Attachment)" />
Related
I'm a beginner to ASP.NET MVC.
I want to update login user profile and I am having a problem. my code says model state is not valid. I've tried every possible solution which I know and also searched on Google.
I'm using Entity Framework and below is my code.
Table name: Userdb
Get action method in the controller:
public ActionResult EditProfile()
{
string username = User.Identity.Name;
Userdb user = db.Userdbs.FirstOrDefault(u => u.u_Email.Equals(username));
Userdb model = new Userdb();
// Personal Details
model.u_Firstname = user.u_Firstname;
model.u_lastname = user.u_lastname;
model.u_dob = user.u_dob;
model.u_mobile = user.u_mobile;
model.u_title = user.u_title;
// this to display data in texbox
ViewBag.u_Email = user.u_Email;
ViewBag.u_Firstname = user.u_Firstname;
ViewBag.u_lastname = user.u_lastname;
ViewBag.u_dob = user.u_dob;
ViewBag.u_mobile = user.u_mobile;
ViewBag.u_title = user.u_title;
// Education Details
model.Degree_level = user.Degree_level;
model.Degree_name = user.Degree_name;
model.Starting_date = user.Starting_date;
model.Completion_date = user.Completion_date;
// Address Details
model.country_name = user.country_name;
model.city_name = user.city_name;
model.Address = user.Address;
model.postal_code = user.postal_code;
// Social Link Details
model.S_fb_url = user.S_fb_url;
model.S_linkedin_url = user.S_linkedin_url;
model.S_github_url = user.S_github_url;
model.S_twitter_url = user.S_twitter_url;
return View(model);
}
Post action method in controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditProfile(Userdb editEntity)
{
if (ModelState.IsValid)
{
string username = User.Identity.Name;
// Get the userprofile
Userdb model =new Userdb();
// Personal Details
model.u_Firstname = editEntity.u_Firstname;
model.u_lastname = editEntity.u_lastname;
model.u_dob = editEntity.u_dob;
model.u_mobile = editEntity.u_mobile;
model.u_title = editEntity.u_title;
ViewBag.u_Email = editEntity.u_Email;
ViewBag.u_Firstname = editEntity.u_Firstname;
ViewBag.u_lastname = editEntity.u_lastname;
ViewBag.u_dob = editEntity.u_dob;
ViewBag.u_mobile = editEntity.u_mobile;
ViewBag.u_title = editEntity.u_title;
// Education Details
model.Degree_level = editEntity.Degree_level;
model.Degree_name = editEntity.Degree_name;
model.Starting_date = editEntity.Starting_date;
model.Completion_date = editEntity.Completion_date;
// Address Details
model.country_name = editEntity.country_name;
model.city_name = editEntity.city_name;
model.Address = editEntity.Address;
model.postal_code = editEntity.postal_code;
// Social Link Details
model.S_fb_url = editEntity.S_fb_url;
model.S_linkedin_url = editEntity.S_linkedin_url;
model.S_github_url = editEntity.S_github_url;
model.S_twitter_url = editEntity.S_twitter_url;
db.Entry(model).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index", "Home"); // or whatever
}
return View();
}
View
#model Applicant.Models.Userdb
#{
ViewBag.Title = "EditProfile";
Layout = "~/Views/Shared/_ProfileLayout.cshtml";
}
#using (Html.BeginForm("EditProfile", "Users"))
{
#Html.AntiForgeryToken()
<body>
<div class="container rounded bg-white mt-5 mb-5">
<div class="row">
<div class="col-md-3 border-right">
<div class="d-flex flex-column align-items-center text-center p-3 py-5"><img class="rounded-circle mt-5" width="150px" src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg"><span class="font-weight-bold">#ViewBag.u_Firstname #ViewBag.u_lastname</span><span class="text-black-50">#ViewBag.u_Email</span><span> </span></div>
</div>
<div class="col-md-5 border-right">
<div class="p-3 py-5">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="text-right">Profile Settings</h4>
</div>
<h6>Personal Detail</h6>
<div class="row mt-2">
<div class="col-md-6"><label class="labels">Name</label>#Html.EditorFor(model => model.u_Firstname, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.u_Firstname } })</div>
<div class="col-md-6"><label class="labels">Lastname</label>#Html.EditorFor(model => model.u_lastname, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.u_lastname } })</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<label class="labels">Gender</label><br />
#Html.RadioButtonFor(model => model.u_Gender, "F")
Female
#Html.RadioButtonFor(model => model.u_Gender, "M")
Male
</div>
<div class="col-md-6"><label class="labels">Designation</label>#Html.EditorFor(model => model.u_title, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.u_title } })</div>
</div>
<div class="row mt-3">
<div class="col-md-12"><label class="labels">Mobile Number</label>#Html.EditorFor(model => model.u_mobile, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.u_mobile } })</div>
<div class="col-md-12"><label class="labels">Address</label>#Html.EditorFor(model => model.Addres, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.Addres } })</div>
<div class="col-md-12"><label class="labels">Country</label>#Html.EditorFor(model => model.country_name, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.country_name } })</div>
</div>
<div class="row mt-2">
<div class="col-md-6"><label class="labels">City</label>#Html.EditorFor(model => model.city_name, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.city_name } })</div>
<div class="col-md-6"><label class="labels">Postal Code</label>#Html.EditorFor(model => model.postal_code, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.postal_code } })</div>
</div>
<hr />
<h6>Education Detail</h6>
<div class="row mt-3">
<div class="col-md-12"><label class="labels">Degree Name</label>#Html.EditorFor(model => model.Degree_name, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.Degree_name } })</div>
<div class="col-md-12"><label class="labels">Degree Level</label>#Html.EditorFor(model => model.Degree_level, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.Degree_level } })></div>
</div>
<div class="row mt-2">
<div class="col-md-6"><label class="labels">Starting Date</label>#Html.EditorFor(model => model.Starting_date, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.Starting_date } })</div>
<div class="col-md-6"><label class="labels">Completion Date</label>#Html.EditorFor(model => model.Completion_date, new { htmlAttributes = new { #class = "form-control", placeholder = #ViewBag.Completion_date } })</div>
</div>
<hr />
<div class="mt-5 text-center">
<input type="submit" value="Save Changes" class="btn" style="background-color:#5777ba; color:#fff;" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="py-5">
<h6>Skills Detail</h6>
<div class="col-md-12"><label class="labels">Skills</label><input type="text" class="form-control" placeholder="experience" value=""></div>
</div>
<div class="">
<h6>Skills Detail</h6>
<div class="col-md-12"><label class="labels">Github Link</label><input type="text" class="form-control" placeholder="experience" value=""></div>
<div class="col-md-12"><label class="labels">Linkedin Link</label><input type="text" class="form-control" placeholder="experience" value=""></div>
<div class="col-md-12"><label class="labels">Twitter Link</label><input type="text" class="form-control" placeholder="experience" value=""></div>
<div class="col-md-12"><label class="labels">Facebook Link</label><input type="text" class="form-control" placeholder="experience" value=""></div>
</div>
</div>
</div>
</div>
</body>
}
There are several problems with your view, which could account for the invalid model. If you post the definition of Userdb, complete with any metadata class (if those are still being used) we could see for sure.
First, you aren't putting the necessary name attribute in all your plain input fields. This means they won't get posted to the server as data, so the model binder won't be able to automatically populate those fields in your model.
Second, you've used #Html.EditorFor() in several places, with the identical properties being referenced. This means that what you put in the text box labeled "Name" will be assigned to the u_Firstname field on your model -- but so will what you've put in the "Gender" and "City" fields!
That means that the actual Gender and City properties on your model won't be populated.
Third, you say u_Email is the primary key, but it isn't even posted back from this form.
This brings me to what I suspect the real source of the problem is: your model isn't being fully populated from the form on posting, because you're not collecting all the data. And I'd guess at least some of those properties have Required or other constraints on them that mean leaving them empty isn't allowed. (u_Email is a likely candidate, since it's the primary key.)
If you look at the contents of editEntity while debugging, it will probably be made very clear what's populated and what isn't.
replace this code
db.Entry(model).State = EntityState.Modified;
with
db.Entry(model).State = System.Data.Entity.EntityState.Modified;
the above whole code is true but the main problem is when you change the state of entity EntityState.Modified should be replaced with System.Data.Entity.EntityState.Modified; because EntityState is an object of System.Data.Entity* namespace
I'm trying to make a partial view, which will add dynamically as much fields as I input. I input number of fields, then I want to choose days of week in formed fields and do some work with this data in controller, but I have a problem with passing amount of days in partial view.
Controller :
public class CoursesController : Controller
{
private SchoolContext db = new SchoolContext();
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include = "CourseId,Name,Language,LanguageProficiency,StartDate,EndDate,TeacherId,NumberOfLessonsPerWeek")] Course course)
{
if (ModelState.IsValid)
{
db.Courses.Add(course);
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(course);
}
public ActionResult ShowDaysOfweek(int? countDays)
{
//countDays = 2;
ViewBag.CountDays = countDays;
var days = new List<DayOfWeek> { DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday, DayOfWeek.Saturday, DayOfWeek.Sunday };
ViewBag.DaysOfWeek = new SelectList(days);
return PartialView("ShowDaysOfweek");
}
}
In this View I can add patial view by clicking button in script:
#model SchoolManagementSystem.Models.Course
#using (Ajax.BeginForm(new AjaxOptions { }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" }
<div class="form-group">
#Html.Label("Number Of Lessons Per Week", htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-5">
#Html.TextBox("NumberOfLessonsPerWeek", null, htmlAttributes: new { #class = "form-control", #type = "number", #id = "numberOfLessonsPerWeek" })
</div>
<div>
<input type="button" value="Add days" id="Show" class="btn btn-default" />
</div>
</div>
<div id="ShowResults">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<script type="text/javascript">
var url = '#Url.Action("ShowDaysOfweek", "Courses")';
$('#Show').on("click", function () {
var countDays = $('#numberOfLessonsPerWeek').val();
url += '/?countDays=' + countDays;
$('#ShowResults').load(url);
})
</script>
Partial view:
#for (var i = 0; i < ViewBag.CountDays; i++)
{
<div class="form-group">
#Html.Label("Day of week", htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-5">
#Html.DropDownList("DaysOfWeek", (IEnumerable<SelectListItem>)ViewBag.DaysOfWeek, htmlAttributes: new { #class = "form-control", style = "height: 35px" })
</div>
</div>
}
Is it possible to do something? Thanks!
First create the hidden field with partial view url
<input type="hidden" value="#Url.Action("ShowDaysOfweek", "Courses", new { countDays= "numberOfLessonsPerWeek" })" id="hdnURLShowDaysOfweek" />
in javascript read the url and replace the parameter
<script type="text/javascript">
var url = $('#hdnURLShowDaysOfweek').val();
$('#Show').on("click", function () {
url = url.replace("numberOfLessonsPerWeek",$('#numberOfLessonsPerWeek').val());
$('#ShowResults').load(url);
})
</script>
I stumbled across a better way to display my comment form within the post window with <p id="createPostButton">#Html.Action("Create", "Comment", new { id = Model.PostId })</p> (I was originally just trying to create a button to take you to the comment page sending the post id). However, I now get an error when I try to pass back the post/details/{id} view in the CommentController. It keeps trying to look in comment or shared folders passing either post OR details/{id} instead of post/details/{id}.
Post/Details Razor HTML file:
#model FantaC.Models.Post
#{
ViewBag.Title = #Html.DisplayFor(model => model.PostName);
}
<h2>#Html.DisplayFor(model => model.PostName)</h2>
<div class="row">
<div class="col-md-8 whiteBorder scroll">
<div class="postName">
<h4>Written by: #Html.DisplayFor(model => model.UserName)</h4>
<img src="#Html.DisplayFor(model => model.PostImage)" />
</div>
<div class="postContent">
<p>#Html.DisplayFor(model => model.PostContent)</p>
</div>
</div>
<div class="col-md-4 whiteBorder scroll">
<h4>Comments</h4>
#foreach (var comment in Model.PostComments)
{
<h5>#Html.DisplayFor(modelItem => comment.UserName)</h5>
<h5>#Html.DisplayFor(modelItem => comment.CommentSubject)</h5>
<p>#Html.DisplayFor(modelItem => comment.CommentContent)</p>
<p>
#Html.ActionLink("Edit", "../Comment/Edit", new { id = comment.CommentId }) |
#Html.ActionLink("Details", "../Comment/Details", new { id = comment.CommentId }) |
#Html.ActionLink("Delete", "../Comment/Delete", new { id = comment.CommentId })
</p>
}
<p id="createPostButton">#Html.Action("Create", "Comment", new { id = Model.PostId })</p> <!--**********This is the line that is important-->
#*#=Html.RenderAction("Create", "Comments", new { postId = Model.PostId });*#
#*#Html.Partial("Comments")*#
</div>
</div>
<p>
#*#Html.ActionLink("Add a Comment", "Create", "Comment")*#
#Html.ActionLink("Comment", "Create", "Comment", new { id = Model.PostId }, null) |
#Html.ActionLink("Back to List", "Index")
The Comment/Create Razor HTML file that is getting pulled in by the Html.Action:
#model FantaC.Models.Comment
#{
Layout = null;
}
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Comment</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CommentSubject, htmlAttributes: new { #class = "control-label col-md-10 displayBlock" })
<div class="col-md-12">
#Html.EditorFor(model => model.CommentSubject, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommentSubject, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommentContent, htmlAttributes: new { #class = "control-label col-md-10 displayBlock" })
<div class="col-md-12">
#Html.EditorFor(model => model.CommentContent, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommentContent, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
#*<div>
#Html.ActionLink("Back to List", "Index")
</div>*#
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
The important section from the CommentController:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(string id, [Bind(Include = "CommentSubject,CommentContent")] Comment model)
{
if (ModelState.IsValid)
{
ApplicationUser user = System.Web.HttpContext.Current.GetOwinContext().GetUserManager<ApplicationUserManager>().FindById(System.Web.HttpContext.Current.User.Identity.GetUserId());
var commentId = (23817 + db.Comment.Count()).ToString().PadLeft(10, '0');
var comment = new Comment
{
CommentId = commentId,
PostId = id,
UserName = user.UserName,
PostTime = DateTime.Now,
CommentSubject = model.CommentSubject,
CommentContent = model.CommentContent
};
db.Comment.Add(comment);
db.SaveChanges();
return View("Details/" + id, "Post");
}
return View(model);
}
I also tried return View("../post/details/" + id); to no avail. How can I get back up to the post view url (post/details/{id} from the CommentController?
As a side note, I had it almost working by taking out the returns and making the method void, but after clicking the submit comment button the whole comment/create form would disappear. I would be fine going back to that way of doing things if anyone knows a way to make the form stay after clicking the create comment button.
Thanks for any help! :)
Edit:
I forgot to mention that I tried this too. It returns an error that looks like this:
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: Child actions are not allowed to perform redirect actions.
Source Error:
Line 32: }
Line 33:
Line 34: #Html.Action("Create", "Comment", new { id = Model.PostId })
Line 35:
You should follow the PRG (POST-REDIRECT-GET) pattern. After saving the comment, you should redirect to the post details page.
You may use the RedirectToAction method to return a RedirectResponse back to the browser which will make a new GET request to the post details action method.
So replace
return View("Details/" + id, "Post");
with
return RedirectToAction("Details" , "Post", new {id=id});
I want to pass a List of VoedingBindingModel to my controller by using an Editor Template, however I only receive the first entry of the List in the Controller, never all the entries.
The Controller:
public ActionResult Create()
{
ViewBag.fk_customVoedingId = new SelectList(customvoeding.GetAllCustomvoeding(), "customVoedingId", "customVoedingNaam");
ViewBag.fk_standaardVoedingId = new SelectList(standaardvoeding.GetAllStandaardvoeding(), "standaardVoedingId", "standaardVoedingNaam");
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Datum,Tijd,VoedingCollection")]AgendaBindingModel agendaBindingModel)
{
//Do something
}
The Model:
public class AgendaBindingModel
{
[Required]
public List<VoedingBindingModel> VoedingCollection { get; set; }
//More properties
}
The View:
#using Website.Models
#model AgendaBindingModel
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>agenda</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Datum, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Datum, "{0:dd-MM-yyyy}", new { #class = "form-control-datepicker", placeholder = "DD-MM-YYYY", maxlength = "10" })
#Html.ValidationMessageFor(model => model.Datum, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Tijd, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Tijd, "{0:hh:mm}", new { htmlAttributes = new { #class = "form-control-timepicker", placeholder = "hh:mm", maxlength = "5" } })
#Html.ValidationMessageFor(model => model.Tijd, "", new { #class = "text-danger" })
</div>
</div>
<div id="CreateVoedingDiv0">
#Html.EditorFor(x => x.VoedingCollection[0])
</div>
<div id="CreateVoedingDiv1"hidden>
#Html.EditorFor(x => x.VoedingCollection[1])
</div>
<div id="CreateVoedingDiv2"hidden>
#Html.EditorFor(x => x.VoedingCollection[2])
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input value="Add" class="btn btn-default" onclick="ShowVoeding()" /> <input value="Remove" class="btn btn-default" onclick="HideVoeding()" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script>
var count = 1;
function ShowVoeding()
{
if (document.getElementById("CreateVoedingDiv" + count).hidden == true)
{
document.getElementById("CreateVoedingDiv" + count).hidden = false;
count++;
}
}
function HideVoeding()
{
count = count - 1;
if (document.getElementById("CreateVoedingDiv" + count).hidden == false) {
document.getElementById("CreateVoedingDiv" + count).hidden = true;
}
}
</script>
Partial class:
(customvoeding and standaardvoeding do the same thing, only customvoeding returns a collection of customvoeding and standaardvoeding returns a collection of standaardvoeding.
public partial class customvoeding
{
private static foodtrackerEntities1 db = new foodtrackerEntities1();
public static List<customvoeding> GetAllCustomvoeding()
{
db.Configuration.LazyLoadingEnabled = false;
return db.customvoeding.ToList();
}
}
You don't seem to be initializing the model and passing it to the view. In the action methods of your controller try adding:
var viewModel = new AgendaBindingModel();
viewModel.VoedingCollection = // TODO: Fill the list from your data source
return View(viewModel );
Try like this. I could not test, but if you like we can advance is this way:
To show all items:
<div id="group">
#for(int i = 0; i < AgendaBindingModel.VoedingCollection.Count; i++)
{
#Html.EditorFor(x => x.VoedingCollection[i])
}
To add new item:
<button onclick=newItem() >+</button>
</div>
<script>
function newItem(){
var div = document.createElement('div');
div.id = CreateNewItem;
div.innerHTML = '#Html.EditorFor(x => x.VoedingCollection[i])';
document.body.appendChild(div);
}
</script>
Your second and third html are broken.
<div id="CreateVoedingDiv2"hidden>
remove hidden
I found out what was preventing me from receiving more than one result:
You can NOT use #Html.EditorFor template for more than 1 value when you specify a template. It does not matter if you use different models or different templates, it just simply does not work.
To fix it, you have to use 'Html.BeginCollectionItem' library, which can be found here.
Im using a bootstrap datetimepicker to input appointment datetimes to a knockout viewmodel. the viewmodel has an object appointment which holds the observable values for all appointment object. Im sending the appointment to the controller via an ajax call, however after many null values for my dates i found that you must create a custom binding for the datepicker. after implementing the custom binding on the git page of the datepicker i am still receiving null values for both the start and end dates.
Have i implemented the custom binding incorrectly?
Code:
View:
<div class="form-horizontal">
<h4>Appointment</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Start, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='startdatepicker'>
<input type='text' class="form-control" data-bind="date: appointment.start, format: 'DD MMM YYYY'" /><span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
#Html.ValidationMessageFor(model => model.Start, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.End, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='enddatepicker'>
<input type='text' class="form-control" data-bind="date: appointment.end, format: 'DD MMM YYYY'" /><span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
#Html.ValidationMessageFor(model => model.End, "", new { #class = "text-danger" })
</div>
</div>
Scripts section at bottom of view
#section Scripts {
#Scripts.Render("~/bundles/jqueryval",
"/Scripts/ViewModels/AppointmentFormViewModel.js")
<script>
$(function () {
$('#startdatepicker').datetimepicker();
$('#enddatepicker').datetimepicker();
});
var viewModel = new AppointmentFormViewModel(#Html.HtmlConvertToJson(Model));
ko.applyBindings(viewModel);
</script>
}
Knockout viewmodel
function AppointmentFormViewModel(appointment) {
var self = this;
self.saveCompleted = ko.observable(false);
self.sending = ko.observable(false);
self.isCreating = appointment.id == 0;
self.appointment = {
id: appointment.id,
start: ko.observable(appointment.start),
end: ko.observable(appointment.end),
text: ko.observable(appointment.text),
clientid: ko.observable(appointment.clientid),
employeeid: ko.observable(appointment.employeeid),
roomid: ko.observable(appointment.roomid),
};
ko.bindingHandlers.date = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
ko.utils.registerEventHandler(element, 'change', function () {
var value = valueAccessor();
if (element.value !== null && element.value !== undefined && element.value.length > 0) {
value(element.value);
}
else {
value('');
}
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = valueAccessor();
var allBindings = allBindingsAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
var pattern = allBindings.format || 'DD/MM/YYYY';
var output = "-";
if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
output = moment(valueUnwrapped).format(pattern);
}
if ($(element).is("input") === true) {
$(element).val(output);
} else {
$(element).text(output);
}
}
};
here is the appointment model object that was sent from the knockout viewmodel
as you can see the date time is not what was selected
Here is how it posted to server
is creating is a variable to determine whether the form is editing or creating an appointment
self.appointment.__RequestVerificationToken = form[0].value;
$.ajax({
url: (self.isCreating) ? 'Create' : 'Edit',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: ko.toJS(self.appointment)
})