Добрый день уважаемые форумчане. Помогите пожалуйста со следующим вопросом.
Пытаюсь организовать иерархические комментарии к статье и хотелось бы организовать всплытие формы для сообщения, при нажатии ответить:
Примерно как это выглядит:
Добавить сообщение
ник
сообщение
ответить
ник2
сообщение2
ответить
ник3
ответ на сообщение2
ответить
До этого использовал просто переход по гиперссылке на View с пустой формой, но это как говориться не очень хорошо(
после некоторых мучений вот что получилось:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
@using _10012014.Models
@model IEnumerable<_10012014.Models.Comment>
@{
ViewBag.Title = "FullPage";
}
<div class="name">@Html.ActionLink("Добавить сообщение", "NewComment", new { id = 0 })</div>
<ul>
@foreach (var comment in Model.Where(p => p.IDBaseComment == 0))
{
<li>
<div class="name">@comment.NameAuthor</div>
<div class="line">
@comment.TextComment
</div>
<div class="answer">@*@Html.ActionLink("Ответить", "NewComment", new { id = comment.ID })*@
Ответит
</div>
@*поле пад каментарый *@
@using (Html.BeginForm("NewComment", "Main", FormMethod.Post, new { @class = "form" }))
{
<label for="NameAuthor">Имя</label>
<div>
<input id="NameAuthor" class="text-box single-line" type="text" value="" name="NameAuthor" data-val-required="Введите свое имя" data-val="true">
<span style="color: red">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NameAuthor"></span>
</span>
</div>
<label for="TextComment">Текст сообщения</label>
<div>
<textarea id="TextComment" class="text-box multi-line" name="TextComment" data-val-required="Введите свое текст сообщения" data-val="true"></textarea>
<span style="color: red">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="TextComment"></span>
</span>
</div>
<input id="IDBaseComment" type="hidden" value=@comment.ID name="IDBaseComment" data-val-number="Значением поля IDBaseComment должно быть число." data-val="true">
<input type="submit" value="Опубликовать">
}
@if (Model.Count(p => p.IDBaseComment == comment.ID) > 0)
{
@:<ul>
}
@RenderMenuItem(comment)@*чамусь падсвечваецца чырвоным(((*@
@if (Model.Count(p => p.IDBaseComment == comment.ID) > 0)
{
@:</ul>
}
</li>
}
</ul>
@helper RenderMenuItem(Comment mi)
{
foreach (var comment in Model.Where(p => p.IDBaseComment == mi.ID))
{
@:<li>
<div class="name" >
@comment.NameAuthor</div>
<div class="line">
@comment.TextComment
</div>@*
<div>@Html.ActionLink("Ответить", "NewComment", new { id = comment.ID })</div>*@
<div class="answer">
Ответит
</div>
@*поле пад каментарый *@
using (Html.BeginForm("NewComment", "Main", FormMethod.Post, new { @class = "form" }))
{
<label for="NameAuthor">Имя</label>
<div>
<input id="NameAuthor" class="text-box single-line" type="text" value="" name="NameAuthor" data-val-required="Введите свое имя" data-val="true">
<span style="color: red">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NameAuthor"></span>
</span>
</div>
<label for="TextComment">Текст сообщения</label>
<div>
<textarea id="TextComment" class="text-box multi-line" name="TextComment" data-val-required="Введите свое текст сообщения" data-val="true"></textarea>
<span style="color: red">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="TextComment"></span>
</span>
</div>
<input id="IDBaseComment" type="hidden" value=@comment.ID name="IDBaseComment" data-val-number="Значением поля IDBaseComment должно быть число." data-val="true">
<input type="submit" value="Опубликовать">
}
if (Model.Count(p => p.IDBaseComment == comment.ID) > 0)
{
@:<ul>
}
@RenderMenuItem(comment)
if (Model.Count(p => p.IDBaseComment == comment.ID) > 0)
{
@:</ul>
}
else
{
@:</li>
}
}
}
и jquery файл
1.
2.
3.
4.
5.
6.
$(document).ready(function () {
$('.answer').click(function (eventObject) {
$(this).css('color', 'red');
$(this).next().css('visibility', 'visible').css('height', '100%');
});
});
Но данный метод приводит к возникновению большого количества ругани в VS из-за повторяющихся id, да и что греха таить выглядит очень топорно:(
Подскажите как сделать более правильно).
Стою только на начале пути познания и надеюсь на ваше понимание:)
За ранее спасибо)
