Question

我正在尝试将局部视图动态添加到主视图中。问题是，当我多次将其添加到主视图时，我无法在部分视图中获取div标签的动态ID。

由于我无法获取ID，因此无法隐藏基于div标签的局部视图。有人可以告诉我我错过了什么。在此先感谢您的帮助。以下是件代码：

部分视图：

<div id=@ViewBag.DivActionID>
    <div id="div_actionsbtns">
        <img src="~/Images/Trash.png" alt="Delete" class="editbtn" id="btn_actiondelete" />
        <img src="~/Images/Move.png" alt="Move" class="editbtn" id="btn_actionmove" />
    </div>

    <div id="div_editactions">
        ......
    </div>
</div>

<script>
    jQuery(document).ready(function ($) {
        $('#btn_actiondelete').on('click', function () {
            var divparent = $('#div_editactions').parent().attr('id');
            $('#divparent').hide()
        });
</script>

控制器代码：

public ActionResult CreateNewActions(string actionid)
{
    ViewBag.DivActionID = actionid;
    return PartialView("~/Views/Interp/_AddActions.cshtml");
}

主要观点：

<div>
     <div id="actions"></div>
</div>

<script type="text/javascript">
    var actionidcounter = 0;

    $("#btn_addactions").on('click', function () {                    
        actionid = "ActionID" + actionidcounter;

        $.ajax({
            async: false,
            data: { 'actionid': actionid },
            url: '/Home/CreateNewActions'
        }).success(function (partialView) {            
            actionidcounter++;                
            $('#actions').append(partialView);
        });
    });
</script>

Answer 1

您的局部视图不应具有硬编码的静态 id 值，因为当用户单击添加按钮时，您会反复渲染相同的局部视图。这将生成多个具有相同 id 值的元素，并且当您使用id选择器时，jQuery选择器将始终为您提供数组中的第一个项。 HTML中的重复ID也无效！

你应该做的是使用css类选择器并使用jQuery相对选择器。您可以使用jQuery closest方法来执行此操作。此外，您不需要在局部视图中使用删除按钮单击代码。您只需在主视图中包含一次。

更新部分视图内容以获取删除按钮的css类

<div class="action-item" id="@ViewBag.DivActionID">
    <div id="div_actionsbtns">
        <img src="~/Images/Trash.png" alt="Delete" class="editbtn delBtn"  />
        <img src="~/Images/Move.png" alt="Move" class="editbtn"  />
    </div>    
    <div id="div_editactions">
        <p>Currently showing actions for @ViewBag.DivActionID</p>
    </div>
</div>

现在在主视图中，使用css类click收听按钮的"delBtn"事件，并使用closest方法获取外部容器div并根据需要隐藏/删除

所以主视图中的代码将是

@section scripts
{
    <script>

        var actionidcounter = 0;
        $(function () {
            //Register the add button handler

            $("#btn_addactions").on('click', function () {
                actionid = "ActionID" + actionidcounter;

                $.ajax({                       
                    data: { 'actionid': actionid },
                    url: '@Url.Action("CreateNewActions")'
                }).then(function (partialView) {
                    actionidcounter++;
                    $('#actions').append(partialView);
                });
            });

            //Register the delete button handler 

            $(document).on("click", ".delBtn", function () {
                  $(this).closest(".action-item").remove();
            });
        });

    </script>
}

部分视图中div标签的动态ID

1 个答案: