I'm almost loosing my head trying to use the default asp.net MVC features to acomplish this mission. First of all i'll introduce what i've so far and what is my goal.
I have those two models.
public class ClassifiedViewModel
{
public int? ClassifiedId { get; set; }
public List<ClassifiedWishListViewModel> wishListModel {get; set;}
[Required]
public String UserId { get; set; }
[Required]
public string Title { get; set; }
[Required]
public string Name { get; set; }
[Required]
public string Description { get; set; }
}
public class ClassifiedWishListViewModel
{
public string KeyWord { get; set; }
public int CategoryId { get; set; }
public int SubCategoryId { get; set; }
}
Added more information
View
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.ClassifiedId, new { htmlAttributes = new { @class = "form-control" } })
@Html.HiddenFor(model => model.UserId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="form-group">
@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-3">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Description, new { @class = "form-control", rows = "10", cols = "60" })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group" id="wishList">
</div>
<button type="button" class="btn" id="btnAddWish">
<span>Add item</span>
</button>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default" id="btnSave">Save</button>
</div>
</div>
</div>
}
script
$("#btnAddWish").on("click", function () {
$.get('/Classified/ClassifiedWishList', function (template) {
$("#wishList").append(template);
});
});
Controller - method to get partial view
[HttpGet]
public ActionResult ClassifiedWishList()
{
var model = new ClassifiedWishListViewModel();
var categoriesBO = new CategoriesBO();
var categories = categoriesBO.GetAllCategories();
model.Categories =
from c in categories
select new SelectListItem
{
Text = c.Name,
Value = c.CategoryId.ToString()
};
return PartialView("ClassifiedWishList", model);
}
And i'm trying to create a view to edit the Classified. But the classifiedwishList is a variable lenght property. So, i've created a partial view to that generates the ClassigiedWishListViewModel editor many times in the same form. But when i try to submit the entire form the ClassifiedWishListViewModel never gets binded to my original ClassifiedViewModel property.
Is there a way that i can acomplish that by simple using Asp.net MVC features? Every place i look suggests me to use a javascript framework and send all the information to the Controller through serialized jsons, but by using that i will loose all the validation that the Annotations performs (like required, maxlenght, others...) in the MVC, correct?
It's really frustrating that if you need a more dynamic page on Asp.net MVC you have to forget all the tools the framework offers you and start to just send and retrieve data through JSON communication.
Any kind of help is welcome! Thanks guys!