#jquery #asp.net-mvc
#jquery #asp.net-mvc
Вопрос:
У меня есть 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>
}
Ответ №1:
Вам нужно вернуть свой класс модели, который вы используете в представлении в контроллере, и это поле userId должно быть не пустым.
После выполнения этих:
var blogCommentValue = $('#comment_' @Model.blogId).val();
нужно работать
Комментарии:
1. Я только что понял, что мне нужно поместить это: var BlogId = $(this).attr(‘data-id’); перед var blogCommentValue = $(‘#comment_’ BlogId).val();
2. Если вы хотите зафиксировать значение с помощью модели, это то, что я говорю, но это тоже работает. @user3020047
Ответ №2:
Ваша кнопка имеет атрибут данных 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>