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

Question

У меня есть веб-сайт MVC, использующий виды Razor. Моя модель List<Device>. В этом конкретном представлении мне нужно ввести серийный номер для коробки устройства и, если он совпадает с серийным номером устройства, изменить выпадающий список с LabelPack на SystemPack. Наконец, контроллер обновит статус устройства в БД. Вот соответствующий код из вида:

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.SerialNumber)
        </td>
        <td>
            <input type="text" id=@item.SerialNumber name=@item.SerialNumber 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.

Answer 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="sp_@item.ID">@Html.DisplayFor(modelItem => item.SerialNumber)</span>
            </td>
            <td>
                <input type="hidden" id="hdn_@item.ID" value="@item.ID" />
                <input type="text" id="ser_@item.ID" 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")
}