Question

正在使用示例MVC 4（Razor for Views）应用程序，也使用BootStrap和Bootbox.js（用于显示编程对话框）。

我的视图页面（.cshtml）的底部是下面提到的用于显示模型弹出窗口的脚本（我从http://bootboxjs.com/复制了这个示例脚本:) :)

@section scripts 
{
 <script>
 function confirmBox() {
 $("#myModal").on("show", function () {    // wire up the OK button to dismiss the    modal when shown
 $("#myModal a.btn").on("click", function (e) {
 console.log("button pressed");   // just as an example...
 $("#myModal").modal('hide');     // dismiss the dialog
 });
 });

 $("#myModal").on("hide", function () {    // remove the event listeners when the dialog is dismissed
 $("#myModal a.btn").off("click");
 });

 $("#myModal").on("hidden", function () {  // remove the actual elements from the DOM when fully hidden
 $("#myModal").remove();
 });

  $("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
  "backdrop": "static",
  "keyboard": true,
  "show": true                     // ensure the modal is shown immediately
  });
  }

 </script>

 }

以下是HTML，它也是视图的一部分，用于显示模型对话框

 <!-- set up the modal to start hidden and fade in and out -->
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <!-- dialog body -->
 <div class="modal-body">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 Hello world!
 </div>
  <!-- dialog buttons -->
  <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button>        </div>
 </div>
 </div>
 </div>

案例1 。我的观点还有下面提到的代码，它显示了所有品牌详情。如果你观察到我已经将DeleteBox（）发送到Delete Link

的点击事件

@foreach (var item in Model)
{
 <tr>
 <td>@Html.DisplayFor(model => item.BRAND_NAME)</td>
 <td>@Html.DisplayFor(model => item.BRAND_DESCRIPTION)</td>
 <td>@Html.ActionLink("Edit", "edit", new { id = item.PK_BRAND_ID } )</td>
 <td>@Html.ActionLink("Delete" , "delete" , new { id = item.PK_BRAND_ID } , new { onclick="return confirmBox();"})</td>
 </tr>
}

案例2。我的视图还有一个静态HTML代码

<a href="#"onclick="return confirmBox();" > Click Me </a>

现在面临的问题是，在CASE 2中，模型窗口显示在CASE 1中，而不显示。

请告诉我正在做的错误？

Answer 1

以下是确认bootBox对话框的示例：

首先，你需要获取“编辑”的动作和“删除”的ovverid Post动作。

查看：

@foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(model => item.BRAND_NAME)</td>
            <td>@Html.DisplayFor(model => item.BRAND_DESCRIPTION)</td>
            <td>@Html.ActionLink("Edit", "Management", new { id = item.PK_BRAND_ID })</td>
            <td>
                @using (Html.BeginForm("Delete", "Management", new { id = item.PK_BRAND_ID }, FormMethod.Post, new { id = "myForm" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.HttpMethodOverride(HttpVerbs.Delete)
                    <a title="Delete" id="btnDelete">Delete</a>
                }

            </td>
        </tr>
    }

<强> JavaScript的：

<script>
    $(function () {
        $('#btnDelete').click(function () {
            bootbox.dialog({
                message: "Do you want to continue ?", title: "Management",
                buttons: {
                    main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
                    success: { label: "Continuo", className: "btn btn-default", callback: function () { $('#myForm').submit(); } }
                }
            });
        });
    });
</script>

控制器：

 public class ManagementController : Controller
    {
   // GET: /Management/Edit/5
        public ActionResult Edit(long? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Brand brand = db.Brands.Find(id.Value);
            if (brand == null)
            {
                return HttpNotFound();
            }
            return View(brand);
        }

        [HttpDelete]
        [ValidateAntiForgeryToken]
        public ActionResult Delete(long? id)
        {
            Brand brand = db.Brands.Find(id.Value);
            db.Brands.Remove(person);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    }

在MVC 4中使用BootStrap和Bootbox.js

1 个答案: