Question

我的应用程序由一个单独的表单组成，其中包含部分视图，允许我通过使用jQuery和ajax动态添加或删除行。

每行包含多个表单元素，其中一个是一个按钮，然后加载一个模式（存储在我的主视图中），允许用户搜索并选择某个供应商。一旦用户选择了某个供应商，我然后将此选择存储在变量中，并将其显示在同一行的文本字段中。

我现在面临的问题：我不知道如何识别用户当前所在的行（=部分视图的实例）。

主视图包含我的部分视图：

...
    <tbody id="OrderZone">
    @foreach (var row in Model.ExtendedOrders)
    {
       Html.RenderPartial("~/Views/Orders/OrderExtendedCreate.cshtml", row);   
    }
    </tbody>
...

部分视图

    <tr class="editorRow">
        @using (Html.BeginCollectionItem("ExtendedOrders"))
        {
            //other form elements..

            <td style="min-width:250px">
                <div class="input-group vendorGroup">
                    <span class="input-group-btn">
                        <button class="btn btn-sm btn-default vendorButton" type="button" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                    @Html.EditorFor(model => model.Vendor, new { htmlAttributes = new { @class = "input-sm form-control vendor" } })
                </div>
            </td>

            //other form elements..
        }
    </tr>

我在部分视图中包含了以下JavaScript代码。我首先存储用户点击的任何按钮（打开模态的按钮）。然后我查找与该按钮共享同一父级的输入字段（供应商）。但是，这个解决方案似乎不起作用。它只是每次都选择第一行：

       $(document).ready(function () {
        var searchButtonVendor = $('.editorRow').find(".vendorButton");
        searchButtonVendor.click(function () {
            var modalResultShouldComeHere = $(this).parents('.vendorGroup').find(".vendor");
        });  
  });

Answer 1

您的期望是获取相应按钮的行内容。您需要使用“最近”选择器。这将遍历到顶部并获得第一个匹配元素。

按如下方式更改您的代码

var searchButtonVendor = $('.editorRow').find(".vendorButton");
    searchButtonVendor.click(function () {
        var modalResultShouldComeHere = $(this).closest('.vendorGroup').find(".vendor");
    });

以下将获得当前行。您需要修改以从一个模型到另一个文本框中获取所选项目。

var modalResultShouldComeHere = $(this).closest('.vendorGroup').find(".vendor");

Answer 2

您可以通过以下代码获取当前点击的搜索行完整（三）数据

$('.vendorButton').click(function(){
    var VendorID = $(this).closest('tr').find('td')[1].childNodes[1].id;
    var vendorValue = $('#'+VendorID).val();
    var OrderCodeID = $(this).closest('tr').find('td')[2].childNodes[0].id;
    var OrderCodeValue = $('#' + OrderCodeID).val();
    var PriceID = $(this).closest('tr').find('td')[3].childNodes[0].id;
    var PriceValue = $('#' + PriceID).val();
});

希望这会有所帮助

jQuery局部视图检测行

2 个答案: