#javascript #c# #asp.net #postback
#javascript #c# #asp.net #обратная передача
Вопрос:
У меня есть экран с таблицей, в которой может быть любое количество полей ввода в зависимости от фильтров, которые ограничивают отображаемые записи. Рядом с каждым полем ввода находится ссылка, по которой пользователь будет сохранять данные для этой записи в базе данных. Что я пытаюсь сделать, так это когда пользователь нажимает на кнопку сохранения для любой заданной строки, я хочу, чтобы курсор переместился к следующему полю ввода в следующей строке, если оно существует. Я знаю, что обратная передача удалит мое текущее местоположение курсора, поэтому я безуспешно пытался сохранить его в переменной. Любая помощь была бы оценена. Javascript, основанный на моем понимании, должен получать элемент и сохранять его в скрытом поле. Результат, который я получаю обратно, — это URL моего сайта. Только когда я сохраняю поле в поле test2, я получаю сохраненный фактический элемент. Должен ли я попытаться каким-то образом получить координаты элемента и сохранить это? Но если я это сделаю, то как я получу следующее поле ввода, доступное в таблице?
Определение таблицы и JavaScript ниже:
$('.checklistequipmentinsertlink').mousedown(function () {
document.getElementById('savedelement').value = document.querySelector("a:active");
var test2 = document.querySelector("a:active");
var test = document.getElementById('savedelement').value;
}); <div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayName("Equipment/Location")
</th>
<th>
@Html.DisplayName("Category")
</th>
<th>
@Html.DisplayName("Expected Count/Checkoff")
</th>
<th>
@Html.DisplayName("Actual Count/Checkoff")
</th>
</tr>
</thead>
<tbody>
@if (Model.postChecklistEqupmentList != null)
{
@foreach (var item in Model.postChecklistEqupmentList)
{
<tr>
<td class="hiddentd">
@Html.DisplayFor(modelitem => item.Checklist_ID)
</td>
<td class="hiddentd">
@Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
</td>
<td>
@Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
</td>
<td>
@Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
</td>
<td id="expectedcount">
@Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
</td>
<td>
@Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked, new
{
htmlAttributes = new
{
@class = "form-control"
},
autofocus = "autofocus"
})
</td>
<td>
<a href="#" class="checklistequipmentinsertlink">Save</a>
</td>
</tr>
}
}
</tbody>
</table>
</div> Ответ №1:
Хорошо, итак, после того, как я проснулся этим утром, я решил попробовать решить это по-другому. Что я придумал, так это попытаться выяснить, в какой текущей строке в моей таблице был нажат мой элемент сохранения. Я использовал jquery, чтобы помочь мне получить ту информацию, которую вы увидите в функции getCurrentRowClicked. Эта функция запускается при нажатии на одну из ссылок сохранения. Затем, когда на экране происходит событие windows.onload, я запускаю функцию movePostChecklistCursorToNextRow, чтобы во время загрузки я мог расположить фокус там, где мне нужно в таблице, или, если в таблице нет никаких записей, в одном из полей поиска, которые у меня есть над таблицей. Я не уверен, что это самый чистый способ сделать то, что я хотел сделать, но это работает.
function getCurrentRowClicked(el) {
document.getElementById('savedRowCount').value = $(el).closest('tr').index() 1;
}
function movePostChecklistCursorToNextRow() {
var stringCount = document.getElementById('savedRowCount').value;
var rowCount = parseInt(stringCount);
var verityRowsExist = $('.table tr:eq(1)').index();
var lastRow = $('.table tr:last').index() 1;
if (verityRowsExist > -1) {
if (rowCount < lastRow) {
rowCount = rowCount 1
$('.table tr:eq(' rowCount ')').find('input').focus();
}
else {
$('.table tr:last').find('input').focus();
}
}
else
{
$('#equipmentSearch').focus();
getCurrentRowClicked(this);
}
} <div class="main">
<h2>Post Checklist - Equipment/Location Checks</h2>
<br />
<form method="post">
<input asp-for="CurrentDeputyID" hidden />
<input asp-for="SavedActivityLogID" hidden />
<input asp-for="SavedChecklistID" hidden />
<input asp-for="ScrollPostion" id="scrollposition" hidden />
<input asp-for="savedRowCount" id="savedRowCount" hidden />
<div class="row">
<div class="col-sm-4">
<a href="./Post_Checklist_Notes">Enter Notes</a>
</div>
<div class="col-sm-4">
<a href="./Post_Checklist_Stats">Enter Stats</a>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-4">
<label asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc">Equipment</label>
<input asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc" class="form-control" id="equipmentSearch" />
</div>
<div class="col-sm-4">
<label asp-for="postChecklistEquipmentView.Equipment_Category_ID">Category</label>
<select asp-for="postChecklistEquipmentView.Equipment_Category_ID" asp-items="@(new SelectList(Model.equipmentCategoriesDropDown,"Equipment_Category_ID", "Equipment_Category_Desc"))" class="form-control"></select>
</div>
<div class="col-sm-4">
<input type="submit" value="Search" id="searchButton" class="btn search-btn btn-light form-control" />
</div>
</div>
<br />
</form>
</div>
<div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
<table class="table" id="table">
<thead>
<tr>
<th>
@Html.DisplayName("Equipment/Location")
</th>
<th>
@Html.DisplayName("Category")
</th>
<th>
@Html.DisplayName("Expected Count/Checkoff")
</th>
<th>
@Html.DisplayName("Actual Count/Checkoff")
</th>
</tr>
</thead>
<tbody>
@if (Model.postChecklistEqupmentList != null)
{
@foreach (var item in Model.postChecklistEqupmentList)
{
<tr>
<td class="hiddentd">
@Html.DisplayFor(modelitem => item.Checklist_ID)
</td>
<td class="hiddentd">
@Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
</td>
<td>
@Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
</td>
<td>
@Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
</td>
<td id="expectedcount">
@Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
</td>
<td>
@Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked)
</td>
<td>
<a href="#" class="checklistequipmentinsertlink">Save</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>