Блог

У меня есть asp.net просмотр mvc, и я ввожу значение в текстовое поле. Я ввожу ‘test’.

Я пытаюсь получить значение из текстового поля с помощью jQuery.

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

Однако в предупреждении оно отображается как «неопределенное».

В конечном итоге я хочу проверить значение текстового поля на наличие пробелов, прежде чем разрешить его передачу в контроллер. Но поскольку оно считается «неопределенным», оно попадает в контроллер.

Почему jQuery / JavaScript видит это как ‘undefined’?

Тем не менее, я снова выполняю ту же команду

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

перед переходом к контроллеру.

Оно попадает в контроллер, и он показывает его как ‘test’. Значение, которое я ввел.

В методе action я вижу, что значение ‘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>
  

}

Вам нужно вернуть свой класс модели, который вы используете в представлении в контроллере, и это поле userId должно быть не пустым.

После выполнения этих:

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

нужно работать

Ваша кнопка имеет атрибут данных id. Чтобы получить его значение, вам нужно обратиться к 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>