Question

我正在尝试使用EditorTemplate创建自动完成文本框。我面临的问题是，通过使用Html.BeginCollectionItem()扩展解决方案（https://www.nuget.org/packages/BeginCollectionItem/），EditorFor()和TextBoxFor()方法的ID会动态设置打破我的JavaScript。接下来，我不知道这是否可能（如果是这样，如何。下面你会发现我已经走了多远）。

在主视图中，我有一个循环来为集合中的每个项目生成局部视图

for (int i = 0; i < Model.VoedingCollection.Count; i++)
{
    @Html.EditorFor(x => x.VoedingCollection[i], "CreateVoedingTemplate")
}

部分视图CreateVoedingTemplate.cshtml使用Html.BeginCollectionItem()方法

@using (Html.BeginCollectionItem("VoedingCollection"))
{
    string uniqueId = ViewData.TemplateInfo.HtmlFieldPrefix.Replace('[', '_').Replace(']', '_').ToString();
    string searchId = "Search_";
    string standaardVoedingId = "StandaardVoeding_";
    foreach (KeyValuePair<string, object> item in ViewData)
    {
        if (item.Key == "Count")
        {
            searchId = searchId + item.Value.ToString();
            standaardVoedingId = standaardVoedingId + item.Value.ToString();
        }
    }

    <div class="form-horizontal">   
       <div class="form-group" id=@standaardVoedingId>
            @Html.LabelFor(model => model.fk_standaardVoedingId, "Voeding naam", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.HiddenFor(model => model.fk_standaardVoedingId)
                    <input type="text" id='@searchId' placeholder="Search for a product"/>
                </div>
       </div>
    </div>

    <script type="text/javascript">
        var id = '@uniqueId' + '_fk_standaardVoedingId'.toString();
        var search = '@searchId'.toString();

        var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "AgendaApi" })';

        $(document.getElementById(search)).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: url,
                    data: { query: request.term },
                    dataType: 'json',
                    type: 'GET',
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.standaardVoedingNaam,
                                value: item.standaardVoedingId
                            }
                        }));
                    }
                })
            },
            select: function (event, ui) {
                $(document.getElementById(search)).val(ui.item.label);
                //$('#id').val(ui.item.value);
                document.getElementById(id).value = ui.item.value;
                return false;
            },
            minLength: 1
        });
    </script>
}

<link href="~/Content/SearchBox/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/SearchBox/jquery-1.9.1.js"></script>
<script src="~/Scripts/SearchBox/jquery-ui.js"></script>

在上面的脚本中，我试图创建一个函数，用户可以在其中键入standaardVoeding项的名称，然后获取结果，在用户选择standaardVoeding项后， standaardVoedingId属性已设置。然后，在提交整个表单后，控制器会收到standaardVoedingId（以及所有其他信息）

所以我猜Javascript无法以某种方式处理Razor View @代码，紧接着，Html.BeginCollectionItem做了一些可疑的事情，因为你无法在运行时通过代码设置其文本框的值。接下来，我尝试了alert(document.getElementById(*html.begincollectionitemId*))，它发现字段很好。但显然所有其他方法都不起作用？

是否有更好的解决方案可以让它发挥作用？

Answer 1

BeginCollectionItem()方法改变了内置帮助程序生成的html的id和name属性，在您的情况下，隐藏输入，而不是

<input ... name="fk_standaardVoedingId" .... />

它会生成

<input ... name="VoedingCollection[xxxx].fk_standaardVoedingId" .... />

其中xxxx是Guid。

虽然可以使用javascript从文本框中提取Guid值（假设已正确生成usind @Html.TextBoxFor()）并构建相关隐藏输入的id以用作选择器，使用类名和相对选择器要容易得多。

您还需要从partial中删除脚本和css，并将其放在主视图（或其布局）中。除了内联脚本之外，您还可以为集合中的每个项目复制它。

你的部分需要

@using (Html.BeginCollectionItem("VoedingCollection"))
{
    <div class="form-horizontal">   
       <div class="form-group">
            @Html.LabelFor(model => model.fk_standaardVoedingId, "Voeding naam", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10 item"> // add class name
                @Html.HiddenFor(model => model.fk_standaardVoedingId)
                <input type="text" class="search" placeholder="Search for a product"/>
            </div>
       </div>
    </div>
}

请注意文本框的类名及其容器，其中还包含隐藏的输入。然后在主视图中，脚本将是

<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "AgendaApi" })';
    // Attach the script to all textboxes
    $('.search').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                data: { query: request.term },
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.standaardVoedingNaam,
                            value: item.standaardVoedingNaam, // this needs to be the name
                            id: item.standaardVoedingId // add property for the id
                        }
                    }));
                }
            })
        },
        select: function (event, ui) {
            // Get the associated hidden input
            var input = $(this).closest('.item').find('input[type="hidden"]');
            // Set the value of the id property
            input.val(ui.item.id);
        },
        minLength: 1
    });
</script>

根据您的评论，您不会动态添加或删除视图中的项目，因此额外开销或使用BeginCollectionItem()方法没有任何意义。将部分名称更改为standaardvoeding.cshtml（假设该类的名称）并将其移至/Views/Shared/EditorTemplates文件夹。

然后在主视图中，将<{1}}循环替换为

for

将为集合中的每个项生成正确的html。最后从模板中删除@Html.EditorFor(m => m.VoedingCollection)方法，使其只是

BeginCollectionItem()

MVC AutoComplete EditorFor使用Html.BeginCollectionItem

1 个答案: