У меня есть веб-сайт MVC, использующий представления Razor. Моя модель List<Device>. В этом конкретном представлении мне нужно ввести серийный номер для коробки устройства и, если он совпадает с серийным номером устройства, изменить перечисление раскрывающегося списка с LabelPack на SystemPack. Наконец, контроллер обновит статус устройства в БД.
Вот соответствующий код из представления:
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.SerialNumber)
</td>
<td>
<input type = "text" [email protected] [email protected] oninput = "return boxSerialNumberInput(@item.SerialNumber)" />
</td>
<td>
<div class = "col-md-10" id = "@item.SerialNumber">
@Html.EnumDropDownListFor(modelItem => item.Status, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(modelItem => item.Status, "", new { @class = "text-danger" })
</div>
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID })
</td>
</tr>
}
Мой вопрос в основном: как проверить, соответствует ли введенный серийный номер серийному номеру устройства, и обновить раскрывающийся список? Я предполагаю, что есть способ сделать это с помощью JavaScript, поэтому я вызываю метод JavaScript с событием onInput. Однако я не знаю, что добавить в метод JavaScript.
Было бы здорово, если бы вы могли показать нам свой код JavaScript, чтобы мы могли точно сказать, являются ли идентификаторы проблемой (вы все равно должны изменить их).
В любом случае вы легко сможете исследовать, как использовать JavaScript для получения введенного значения из текстового поля, а затем после этого вам просто нужен оператор «если», чтобы сравнить его с числом, введенным из модели. Если они совпадают, вам нужно обновить выбранное значение в раскрывающемся списке (опять же, должно быть довольно тривиально, чтобы посмотреть, как вы это делаете). что ты уже испробовал?
P.s. что касается обновления статуса в БД, на данный момент ваши данные никуда не денутся, потому что у вас нет кнопки для отправки формы. На самом деле, если вы только что не убрали его из своего фрагмента, у вас вообще нет формы.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


К счастью, коллега смог помочь мне в этом. Извините, я не дал достаточно информации в первоначальном вопросе. Я действительно думал, что будет простой способ сделать это, но, похоже, теперь есть. Ниже приведен полный код с моей точки зрения на случай, если кто-то еще столкнется с той же проблемой.
@model IEnumerable<DHLScanner.Models.Device>
@{
ViewBag.Title = "LabelPackStationView";
}
@using (Html.BeginForm("LabelPackStation", "Device", FormMethod.Post, new { id = "frmPackStation" }))
{
<p>
Find by serial number: @Html.TextBox("SearchString")
<input type = "submit" value = "Search" />
</p>
<div>
<h4>Device</h4>
<hr />
<dl class = "dl-horizontal"></dl>
</div>
<table class = "table">
<tr>
<th>
@Html.DisplayNameFor(model => model.SerialNumber)
</th>
<th>
@Html.DisplayName("Box Serial Number")
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
<span id = "[email protected]">@Html.DisplayFor(modelItem => item.SerialNumber)</span>
</td>
<td>
<input type = "hidden" id = "[email protected]" value = "@item.ID" />
<input type = "text" id = "[email protected]" oninput = "return boxSerialNumberInput(@item.SerialNumber)" />
</td>
<td>
<div class = "col-md-10">
@Html.EnumDropDownListFor(modelItem => item.Status, htmlAttributes: new { @class = "form-control", id = "ddl_" + @item.ID, name = "ID" })
@Html.ValidationMessageFor(modelItem => item.Status, "", new { @class = "text-danger" })
</div>
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID })
</td>
</tr>
}
</table>
<p id = "test"> xyz</p>
<p id = "links">
@Html.ActionLink("Back to Prep", "PrepStation", "Order", new { id = ViewBag.Order.ID }, null)
@{
if (ViewBag.ShowSystemPackView)
{
@Html.ActionLink("Advance to System Pack", "SystemPackStation", "Order", new { id = ViewBag.Order.ID }, null)
}
}
</p>
<input type = "hidden" name = "testField" value = "a value here" id = "testField" />
<input type = "hidden" id = "hdn_Url" value = "@ViewBag.Url" />
<input type = "hidden" id = "hdn_OrderId" name = "ID" value = "@ViewBag.Order.ID" />
<button id = "btn_Refresh" name = "pageRefrersh" value = "refresh">Refresh</button>
}
@*<form action = "" method = "post"></form>*@
<script type = "text/javascript">
function RegisterEvents(){
$('input[id^ = "ser"]').blur(function () {
var Id = $(this).siblings('input[type = "hidden"]').val();
var lbl = $('span[id = "sp_' + Id + '"]');
if ($(this).val() == lbl.html()) {
$('select#ddl_' + Id).val('3');
}
});
$('button[id = "btn_Refresh"]').click(function () {
CollectDeviceData();
return false;
});
}
function CollectDeviceData() {
var devices = new Array();
// Collect Data
$.each($('input[id^ = "ser"]'), function () {
var Id = $(this).siblings('input[type = "hidden"]').val();
var orderId = $('input[id = "hdn_OrderId"]').val();
var device = {};
device.Id = Id;
device.Status = $('select#ddl_' + Id).val();
device.OrderID = orderId;
devices.push(device);
});
var jsonObject = {
devices: JSON.stringify(devices)
};
//Return Data
var results = function (data) {
window.location.href = $('input[id = "hdn_Url"]').val();
};
PostBack(jsonObject, results);
}
function PostBack(jsonObject, result) {
var url = $('input[id = "hdn_Url"]').val();
$.ajax({
url: url,
type: 'post',
data: jsonObject,
success: result,
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
}
});
}
$(document).ready(function () {
RegisterEvents();
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Вы не можете дать своему полю ввода и div под ним один и тот же идентификатор, который недействителен в HTML. JavaScript не сможет отличить их друг от друга, что может помешать вашему сценарию, если он не сможет получить значение из правильного элемента.