如何将项目列表中的项目ID传递给模态,然后从模态传递给控制器​​?

时间:2018-01-25 09:18:20

标签: asp.net-mvc twitter-bootstrap-3 bootstrap-modal

所以我有一个网址网址列表,全部来自SQL并且有一个id,一个地址等。

我使用以下内容将它们列在表中:

<div>
    <div class="well" margin-left:20px; margin-right:20px">
        <h2 style="margin-left:20px; margin-top:10px">Control Added Links</h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>
                        Link Address
                    </th>
                    <th>
                        Check Interval
                    </th>
                    <th>
                        Status
                    </th>
                    <th>
                        #
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var i in links)
                {
                    <tr>
                        <td>
                            <a href="http://@i.Address" target="_blank">@i.Address</a>
                        </td>
                        <td>
                            @i.Interval
                        </td>
                        <td>
                            @if (i.Status)
                            { <text> ON </text>}
                            else
                            { <text> OFF </text>}
                        </td>
                        <td>
                            <a href="~/Control/Delete/@i.Id">
                                &#10006;
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

“链接”这里是链接模型列表:

@{
    var links = (List<Link>)ViewData["LinkInfos"];
}

现在,有一个X按钮,您可以通过使用项目“i”的i.Id单击以从数据库中删除链接。我想要做的是,要求使用模态进行确认,而不是直接删除。

我使用follownig删除了控制器内部功能的链接:

public ActionResult Delete(int Id)
{
    UserLinks links = new UserLinks();
    links.delete(Id, User.Identity.Name);

    return RedirectToAction("Index");
}

我更改了此代码,设法将数据从按钮传递到模态:

<a data-toggle="modal" data-id="@i.Id" data-request-url="@Url.Action("Delete", "Control")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
    &#10006;
</a>

<div id="deleteLink" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Test</h4>
            </div>
            <div class="modal-body">
                This will delete all records related to this link. Are you sure?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
                <button class="btn btn-warning" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

<script>
    var myLinkId
    var url
    $(document).on("click", ".delete-Link", function () {
        myLinkId = $(this).data('id');
        url = $(this).data('request-url');
        $(".modal-body #linkId").val(myLinkId);
        // As pointed out in comments,
        // it is superfluous to have to manually call the modal.
        // $('#addBookDialog').modal('show');
    });
    function deleteConfirm()
    {
        debugger;
        $.post(url), { Id: myLinkId };
    }
</script>

但现在的问题是将这些数据从模态传递给控制器​​。我写了“deleteConfirm”函数,但它似乎没有用,它没有去〜/ Control / Delete。

我的问题的第一部分实际上已经解决,我可以将id从按钮传递到模态,但我不确定它是否已正确解决所以我也要求它,我目前使用JavaScript传递id但是想知道我是否可以直接从按钮传递给模态本身。

我设法解决了我的问题,并通过为每个项目创建一个模态来正确删除...我认为这是一种草率的方式,当我喜欢时可能会出现问题,让我们说100个链接。

我想到的一个解决方案但不知道如何实施:

在视图中有一个“globalId”参数,当单击一个按钮时,i.Id被分配给globalId,然后打开模态,其中有globalId作为参数。就像使用,使用内部模态,通过删除按钮更改您单击。但问题是,不知道如何创建这个全局参数并通过单击按钮将i.Id分配给它。

我认为我可以实施可能的解决方案:

我想在视图中有一个变量,比如说int globalId。

假设我按下删除按钮id = 10,我想要发生的只是“global = id”所以我想将10分配给数字。如果按钮的id为12,我想再次发生“global = id”,这次将12分配给数字。

所以这样,modal将只使用globalId,所以我可以使它:

<a href="~/Control/Delete/@globalId">Yes</a>

这样,只会有一个模态,每个按钮都会打开相同的模态,而模态将使用相同的变量。分配给此模态的globalId的值只需单击按钮即可更改。

问题是,如何创建此局部变量,如何为该局部变量分配新值?

1 个答案:

答案 0 :(得分:1)

我在您的视图中进行了一些更改,使其可以正常工作。我在模型中添加了一个隐藏字段,并将id存储在模型的show事件中。确认id是从这个隐藏字段获取以构建帖子网址。

<a data-toggle="modal" data-id="@id" data-request-url="@Url.Action("Delete", "Home")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
    &#10006;
</a>

<div id="deleteLink" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <input type="hidden" id="linkId" />
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Test</h4>
            </div>
            <div class="modal-body">
                This will delete all records related to this link. Are you sure?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
                <button class="btn btn-warning" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#deleteLink').on('show.bs.modal', function (e) {
        $("#linkId").val($(e.relatedTarget).data('id'));
    });

    function deleteConfirm()
    {
        var url = "@Url.Action("Delete", "Control")/" + $("#linkId").val();
        $.post(url).success(function () {
            location.href = "@Url.Action("Index", "Control")";
    });
    }
</script>