如何在 mvc 中处理 jquery 转发器 html

Posted 2023-05-09

【中文标题】如何在 mvc 中处理 jquery 转发器 html

【英文标题】：How to handle jquery repeater html in mvc

【发布时间】：2021-01-03 13:46:37

【问题描述】：

这是我的 .cshtml 页面代码，我使用 jquery 中继器在此代码中继器中工作正常，但我想在此中继器中添加一些修改，但我被困在这里。你可以看到我的代码。

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new  enctype = "multipart/form-data", @class = "repeater" ))

    <div data-repeater-list="">
        <div data-repeater-item="">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <input type="file" name="Docfiles" />
            </div>
        </div>
    </div>
    <input data-repeater-create type="button" value="Add" />
    <button>Save</button>

@section Scripts
    <!-- Import repeater js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
    <script>
        $(document).ready(function () 
            $('.repeater').repeater(
                // (Optional)
                // start with an empty list of repeaters. Set your first (and only)
                // "data-repeater-item" with style="display:none;" and pass the
                // following configuration flag
                initEmpty: true,

                // (Optional)
                // "show" is called just after an item is added.  The item is hidden
                // at this point.  If a show callback is not given the item will
                // have $(this).show() called on it.
                show: function () 
                    $(this).slideDown();
                ,
                // (Optional)
                // "hide" is called when a user clicks on a data-repeater-delete
                // element.  The item is still visible.  "hide" is passed a function
                // as its first argument which will properly remove the item.
                // "hide" allows for a confirmation step, to send a delete request
                // to the server, etc.  If a hide callback is not given the item
                // will be deleted.
                hide: function (deleteElement) 
                    if (confirm('Are you sure you want to delete this element?')) 
                        $(this).slideUp(deleteElement);
                    
                ,

                // (Optional)
                // Removes the delete button from the first list item,
                // defaults to false.
                isFirstItemUndeletable: true
            )
        );
    </script>

我想改变这种格式的 html，如下面的截图所示。

【参考方案1】：

首先，名称格式在jquery.repeater.js中设置，如果要更改，则需要更改jquery.repeater.js，这里有一个演示：

1.将jquery.repeater.js 添加到您的项目中。

我像这样将 js 复制到我的项目中：

2.在jquery中找到setIndexes，改成var newName = groupName + '[' + index + '][' + name + ']' +这样（你也可以改成你想要的其他格式）：

3.将您的脚本src从cdnjs更改为您自己的项目：

<script src="~/lib/jquery-repeater/jquery.repeater.js"></script>

4.结果：