javascript - 如何使用 Bootstrap 将数据传递到模态

标签 javascript jquery html asp.net twitter-bootstrap

我试图弄清楚如何将变量传递给模型。例如,我有一个包含学生列表的表。我想单击其中一个,然后出现一个与该学生匹配的模式弹出窗口。所以我显然需要将表中的 id 传递给模型。这都是在 Asp.net 中使用 razor 实现的。然后在弹出该模型后,我想编辑并重新提交,然后刷新表格。也许甚至有成功的消息。我正在使用 Bootstrap ,所以我正在考虑使用警报来表示已成功更新!或者其他的东西。 这是代码。请帮我解决这个问题。

<body>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>

    <div class="box-content">
        <table class="table table-striped table-bordered bootstrap-datatable datatable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>DNIS </th>
                    <th>Created by</th>
                    <th>Created Date</th>
                    <th>Actions</th>

                </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {

                    <tr>
                        <td> @Html.DisplayFor(modelItem => item.service_name)</td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.dnis)</td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.created_by) </td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.date_time)</td>

                        <td class="center">
                            <a class="btn btn-success" href="~/Service/AssignSkillGroup/@item.service_name">
                                Add/Del SkillGroup
                            </a>

                            <a class="btn btn-info" href="~/Service/Edit/@item.service_name">
                                <i class="icon-edit icon-white"></i>
                                Edit
                            </a>

                            <a  class="btn btn-danger" data-toggle="modal" data-id="@item.service_name" data-target="#myModal" >
                                <i class="icon-trash icon-white"></i>
                                Delete                          
                            </a>
                        </td>
                    </tr>                  
                }
            </tbody>
        </table>
    </div>

    <span class="modal" id="myModal" role="dialog" style="height: 175px">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Are you sure to want to delete this service ? </h4>
            </div>
            <div class="modal-body">
                <p>If you delete the service, Wrap-up codes will not appear for this service</p>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" href="/Service/Delete/">
                    Delete
                    <a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
                </a>
            </div>
        </div>
    </span>


</body>

最佳答案

您可以使用 Bootstrap 对话框事件来实现您想要的:

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {

  //get id attribute of the clicked element (delete button)
  var id = $(e.relatedTarget).data('id');
  // do what you want with the id ..
});

关于javascript - 如何使用 Bootstrap 将数据传递到模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36083427/

相关文章:

javascript - 当组的所有 ul>li 不包含过滤词时隐藏 <h3>

javascript - 如何创建 3 个位置的切换?

javascript - addEventListener on clicked li - 如果单击 li 内的链接,则可防止出现此情况

javascript - 变量可以包含功能开关吗?

javascript - 遍历 JSON 对象并只获取最后一条记录

用于显示/隐藏 DIV 的 Javascript 循环

javascript - 是否有任何编辑器像 jsfiddle 可用于本地机器

html - 如何在较短的 div 底部围绕较短的 div 制作一个较高的 div?

html - <img> 顶部的 CSS 背景图片

javascript - 无法使用 Rails 应用程序获得弹出模式对话框