在jQuery中获取未定义的值

如何解决在jQuery中获取未定义的值

我有一个asp.net mvc视图，并且在文本字段中输入了一个值。我输入“测试”。

我正在尝试使用jQuery从文本字段中获取值。

var blogCommentValue = $('#comment_' + blogId).val();

但是，警报将其显示为“未定义”。

我最终希望在允许它传递到控制器之前测试文本字段值是否为空白。但是因为它被认为是“未定义的”，所以它进入了控制器。

为什么jQuery / JavaScript会将其视为“未定义”？

但是我再次发出相同的命令

var blogCommentValue = $('#comment_' + blogId).val();

在转到控制器之前。

它进入控制器，并显示为“测试”。我输入的值。

在操作方法中，我可以看到'test值在那里。

---

这是视图代码（不是全部）之前的视图html。

        <div class="panel-footer">
            <button type="button" class="btn btn-primary Comment" data-id="@Model.BlogPublishedByBlogId.BlogId" value="Comment">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
            </button>
        </div>

        @* Add comment area. *@
        <div id="@string.Format("{0}_{1}","commentsBlock",@Model.BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
            @*Centering the button with in-line CSS. *@
            <div class="AddCommentArea" style="margin-left: 30%;  margin-bottom: 5px; margin-top: 8px;">
                <input type="text" id="@string.Format("{0}_{1}","comment",@Model.BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a comment..." style="display: inline;" />
                <button type="button" class="btn btn-primary addComment" data-id="@Model.BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
            </div>
        </div>

这是底部的查看代码（不是全部）：

@section Scripts
{
    <script type="text/javascript">
    $(document).ready(function () {
         ...another function not shown.

        // For when clicking the 'addComment' button - 'Add a comment...'. Adding a new comment.
        $('.addComment').on('click',function () {
            var blogCommentValue = $('#comment_' + blogId).val();

            alert('Here 1. Value is: ' + blogCommentValue);

            // Uses a regular expression.
            if (/^\s*$/.test($('#comment_' + blogId).val())) {
                alert('Validation Error. The comment cannot be blank.')
            }
            else
            {
                var blogCommentId = 0;
                var userId = 0;
                var blogId = $(this).attr('data-id');
                // HERE I GET THE VALUE AGAIN! 
                var blogCommentContent = $('#comment_' + blogId).val();
                var likeCount = 0;
                var disLikeCount = 0;
                var dateTimeNow = new Date();
                var userName = "";
                var blogCommentProcessType = "I";

                // An object - the BlogComment model.
                  var blogComment = {
                    BlogCommentId: blogCommentId,UserId: userId,BlogId: blogId,BlogCommentContent: blogCommentContent,LikeCount: likeCount,DisLikeCount: disLikeCount,DateTimeOfBlogComment: dateTimeNow.toLocaleString(),UserName: userName
                };

                $.ajax({
                    type: 'POST',url: '@Url.Action("ProcessSaveBlogComment","BlogPublished")',data: { blogComment,blogCommentProcessType },success: function (response) {
                       ... code not shown.
                    },error: function (xhr,ajaxOptions,thrownError) {
                        alert("Critical Error: something is wrong in the call to ProcessSaveBlogComment! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
                    }
                });
            }               
        });

    });
</script>

}

解决方法

您需要返回在控制器的View中使用的模型类，并且此userId字段不能为空。

完成这些操作后：

var blogCommentValue = $('#comment_' + @Model.blogId).val();

需要工作

,

您的按钮具有 id data attribute。为了获得其价值，您需要参考dataset：

var blogId = this.dataset.id;

如果您喜欢jQuery，则可以使用.data()：

var blogId = $(this).data('id')

$('.addComment').on('click',function (e) {
    var blogId = this.dataset.id;
    var blogCommentValue = $('#comment_' + blogId).val();

    console.log('Here 1. Value is: ' + blogCommentValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="panel-footer">
    <button type="button" class="btn btn-primary Comment" data-id="4" value="Comment">
        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
    </button>
</div>
<div id="commetsBlock_4" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
    <div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
        <input name="__RequestVerificationToken" type="hidden" value="xxxxxx">
        <input type="text" id="comment_4" class="form-control" placeholder="Add a comment...." style="display: inline;" value="test">
        <button type="button" class="btn btn-primary addComment" data-id="4">Click Me</button>
    </div>
</div>