I have the following Models :
public class EvaluationCriteriaItem
{
public int ID { get; set; }
public string Name { get; set; }
[Required(ErrorMessage = "*")]
public int Score { get; set; }
public List<EvaluationCriteriaItem> Children { get; set; }
}
public class UserPanelModel
{
public List<SelectListItem> OrganizationsList { get; set; }
public List<EvaluationCriteriaItem> EvaluationCriteriaList { get; set; }
}
I've created a TreeView from above Models with Razor :
@using AssessmentSystem.Models
@section Header{
<link href="@Url.Content("~/Content/jquery.treeview.rtl.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.treeview.user.js")"></script>
<style type="text/css">
input[type="text"], input[type="password"]
{
width: 40px;
margin-right: 10px;
direction: ltr;
}
.treeview .hover, .filetree div.file:hover
{
cursor: default;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="text"]').keydown(function (event) {
if (event.keyCode == 46 || event.keyCode == 8 ||
event.keyCode == 9 || event.keyCode == 27 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39))
return;
else if ((event.keyCode < 48 || event.keyCode > 57) &&
(event.keyCode < 96 || event.keyCode > 105))
event.preventDefault();
});
});
</script>
}
@helper TreeView(List<EvaluationCriteriaItem> childrens)
{
for (int i=0; i<childrens.Count; i++)
{
if (childrens[i].Children != null && childrens[i].Children.Count > 0)
{
<li>
<div class="folder">
<div>
<span id="@string.Format("span_{0}", childrens[i].ID)">@childrens[i].Name</span>
</div>
</div>
<ul>
@TreeView(childrens[i].Children)
</ul>
</li>
}
else
{
<li>
<div class="file">
<div>
<span id="@string.Format("span_{0}", childrens[i].ID)">@childrens[i].Name</span>
@Html.TextBox("ScoreFor_", childrens[i].Score == 0 ? "" : childrens[i].Score.ToString(), new { maxlength = 3 })
</div>
</div>
</li>
}
}
}
@if (!MvcHtmlString.IsNullOrEmpty(Html.ValidationMessage("InvalidData")))
{
<div style="width: 250px; margin: 20px auto; color: red;">
@Html.ValidationMessage("InvalidData")
</div>
}
@using (Html.BeginForm("SubmitScore", "UserPanel"))
{
<table class="register-table">
<tr>
<td>
Organization :
</td>
<td>
@Html.DropDownListFor(x => x.OrganizationsList, Model.OrganizationsList)
</td>
</tr>
</table>
<div style="width: 50%; margin: 0 auto;">
<ul id="EvaluationCriteriaTreeView" class="filetree">
@TreeView(Model.EvaluationCriteriaList)
</ul>
<br />
<div style="text-align: center;">
<input type="submit" value="Submit Score" /></div>
</div>
}
<script type="text/javascript">
$("#EvaluationCriteriaTreeView").treeview({
animated: "fast"
});
</script>
But because I'm using @Html.TextBox I can't use server model validation.
How can I use @Html.TextBoxFor in top situation.
Thanks
I would suggest using MVC Display/EditorTemplates rather than a helper in this context. With templates you get automatic collection support, and you can use a strongly typed model.