javascript - 使用 Html.BeginCollectionItem 时 MVC AutoComplete EditorFor

Question

我正在尝试创建一个自动完成文本框，同时使用 EditorTemplate。我面临的问题是，通过使用 Html.BeginCollectionItem() 扩展解决方案 ( https://www.nuget.org/packages/BeginCollectionItem/ )，EditorFor() 和 TextBoxFor( ) 方法得到动态设置，这会破坏我的 javascript。除此之外，我什至不知道这是否可能(如果可能，如何实现。您将在下面找到我已经走了多远)。

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

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

局部 View 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 属性被设置。然后，在提交整个表单后， Controller 收到 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 值(假设使用 @Html.TextBoxFor() 正确生成)并构建关联的隐藏输入的 id 用作选择器，使用类名和相关选择器要容易得多。

您还需要从部分中删除您的脚本和 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>

---

根据您的评论，您没有在 View 中动态添加或删除项目，那么额外开销或使用 BeginCollectionItem() 方法没有意义。将您的部分名称更改为 standaardvoeding.cshtml(假设这是类的名称)并将其移动到 /Views/Shared/EditorTemplates 文件夹。

然后在主视图中，将 for 循环替换为

@Html.EditorFor(m => m.VoedingCollection)

这将为集合中的每个项目生成正确的 html。最后从模板中删除 BeginCollectionItem() 方法，这样它就可以了

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