如何使用一种形式获取动态文本

Question

我有一个评论回复系统，当我尝试回复评论时，第一个回复工作正常。

对于任何后续回复，我可以获得要提交的评论 ID 和文章 ID，但我无法获得回复文本值。

如何根据下面的 Razor 代码为所有回复完成这项工作？

<h4>Comments</h4>
<hr />
@foreach (var item in Model.Comments.ToList())
{
    <!-- Single Comment -->
    <div class="media mb-4">
        <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
        <div class="media-body" style="width:400px;">
            <h5 class="mt-0">@item.User.UserName</h5>
            <div>
                <p style="word-break:break-all">
                    @item.Paragraph
                    @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                {
                        <a class="btn btn-danger" href="/Home/DeleteComment/@item.CommentId">
                            Delete
                        </a>

                        <div style="height:10px;"> <a id="post_id_1" name='comment1' class="showReply" href="javascript: void(0)">Reply</a></div>
                    }
                </p>
                <p style="font-size:small"><b>Yorum Tarihi:</b>@String.Format("{0: d MMMM yyyy}", item.Date)</p>
            </div>
            <!--Reply Form-->
            <div id="replymsgbox" style="display: none;">
                <form id="frmComment" novalidate="novalidate" method="POST" name="frmComment">
                    <div>
                        <textarea id="replytext" class="" name="comment1[text]"></textarea>
                        <div id="error_text"> </div>
                    </div>
                    <div>
                        <input id="@item.CommentId" class="reply" type="submit" value="Cevapla" name="Submit">
                    </div>
                </form>
            </div>


            @foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
            {
                <div class="media mt-4">
                    <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
                    <div class="media-body">
                        <h5 class="mt-0">@reply.User.UserName</h5>
                        <p>@reply.Paragraph</p>
                        @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                        {
                            <a class="btn btn-danger" href="/Home/DeleteReply/@reply.ReplyCommentId">
                                Sil
                            </a>
                        }
                    </div>
                </div>
            }
        </div>
    </div>

这是我的 javascript 代码

<script type="text/javascript">

$(document).ready(function () {

    $('a.showReply').on("click", function (e) {
        $(this).parent("div").parent("div").next("div").slideToggle();
    });

    $(".reply").click(function (e) {

        e.preventDefault();
        var r_comment = $("#replytext").val();
        var r_commentid = parseInt($(this).attr("id"));
        $.ajax({
             url: '/Home/ReplyComment/',
             data: { replycomment: r_comment, articleid:@Model.ArticleId, commentid: r_commentid },
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                alert("Cevap gönderildi");
                window.location.reload();

            }
        });

});
})

Answer 1

您生成了多个 ID 为 replytext 的元素。在您的点击代码中，以及几乎所有其他地方，您都在使用类引用作为选择器，这很好。对于回复文本，尽管您有：

var r_comment = $("#replytext").val();

当 ID 重复时，您试图通过 ID 引用元素。您将需要为您的元素提供唯一的 id，或者找到一种不同的方式，例如手动遍历 DOM，就像您尝试使用多个 .parent() 选择器或一些搜索一样。

在点击事件中，this 的上下文应该是按钮本身。这意味着使用this，您可以向上遍历一两个父级并向下遍历到子级以查找已填写的文本区域。你也可以试试

var r_comment = this.closest("form > textarea").val(); 

理论上应该遍历到上面堆栈中最近的表单，然后再向下遍历到您的文本区域元素。尝试在你的 onclick 中添加一个调试器并使用 DOM 来查看你在哪里和需要在哪里，但是如果不是你需要的，sn-p 应该可以让你到达那里。

顺便说一句，将来如果您要将生成的剃须刀标记与 JS 混合使用，通常最好使用 for 循环分配具有索引的唯一 ID，这样无论您身在何处，都可以这样做基于您当前拥有的控件 ID 的直接 ID 元素查找。

Answer 2

我用这个 js 代码解决了我的问题

  var r_comment = $(this).closest("form").find(".textreply").val();

感谢您的帮助:)