Представление MVC Razor требует обновления элементов управления с помощью Javascript

У меня есть веб-сайт 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.

Вы не можете дать своему полю ввода и div под ним один и тот же идентификатор, который недействителен в HTML. JavaScript не сможет отличить их друг от друга, что может помешать вашему сценарию, если он не сможет получить значение из правильного элемента.

ADyson 06.03.2019 17:23

Было бы здорово, если бы вы могли показать нам свой код JavaScript, чтобы мы могли точно сказать, являются ли идентификаторы проблемой (вы все равно должны изменить их).

Heretic Monkey 06.03.2019 17:25

В любом случае вы легко сможете исследовать, как использовать JavaScript для получения введенного значения из текстового поля, а затем после этого вам просто нужен оператор «если», чтобы сравнить его с числом, введенным из модели. Если они совпадают, вам нужно обновить выбранное значение в раскрывающемся списке (опять же, должно быть довольно тривиально, чтобы посмотреть, как вы это делаете). что ты уже испробовал?

ADyson 06.03.2019 17:26

P.s. что касается обновления статуса в БД, на данный момент ваши данные никуда не денутся, потому что у вас нет кнопки для отправки формы. На самом деле, если вы только что не убрали его из своего фрагмента, у вас вообще нет формы.

ADyson 06.03.2019 17:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
73
1

Ответы 1

К счастью, коллега смог помочь мне в этом. Извините, я не дал достаточно информации в первоначальном вопросе. Я действительно думал, что будет простой способ сделать это, но, похоже, теперь есть. Ниже приведен полный код с моей точки зрения на случай, если кто-то еще столкнется с той же проблемой.

@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")
}

Другие вопросы по теме