MVC Razor视图需要使用Javascript更新控件

Question

我有一个使用Razor视图的MVC网站。我的模型是List<Device>。在此特定视图中，我需要输入设备盒的序列号，如果它与设备的序列号匹配，请将下拉列表从LabelPack更改为SystemPack。最后，控制器将更新设备在DB中的状态。以下是该视图中的相关代码：

@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来实现这一点，所以我使用onInput事件调用JavaScript方法。但是，我不知道在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="[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")
}