Question

当我点击“添加角色”按钮时，我正在尝试回调服务器以将部分视图返回到我的模态，但是当我单击按钮时没有任何反应。

JavaScript的：

$(".addRole").on("click", function(){
  bootbox.dialog({
    title: "Create new role",
    callback: function () {
      $.ajax({
        url: "/Uam/CreateRole/",
        method: "POST",
        success: function(){}
      });
    }
  });
});

查看：

@model List<Vidly.Models.AvailableRole>

@{
 ViewBag.Title = "CreateRole";
 Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Available Roles</h2>

<div id="addRoleForm">
  <button class="btn btn-success pull-right addRole"  type="button" data-toggle="modal">New Role</button>
</div>

控制器：

public ActionResult CreateRole(int? id){
  if (id == null){
    var menuViewModel = new RoleMenuViewModel{
      Menus = GetMultiselectItems()
    };
  return View("SaveRole", menuViewModel);
  }

Answer 1

消息属性对于bootbox对话框是必需的

$(".addRole").on("click", function(){
  bootbox.dialog({
   message: '<p class="text-center">Please wait while Createing new role...</p>',
    title: "Create new role",
    callback: function () {
      $.ajax({
        url: "/Uam/CreateRole/",
        method: "POST",
        success: function(){}
      });
    }
  });
});

http://bootboxjs.com/examples.html#bb-custom-dialog

Answer 2

我最终使用了基本的bootstrap模式，在模态体中使用了@ html.RenderAction调用，并且引用了启动按钮。没有使用JQuery。

<button id="addRole-btn" class="btn btn-success pull-right btn-lg" data-toggle="modal" data-target="#modal-container">New Role</button>


<div id="modal-container" class="modal fade" role="dialog" width="500px">
<div id="role-container"></div>
<div class="modal-content">
    <div class="modal-body">
        @if (true)
        {
            Html.RenderAction("CreateRole", "Uam");
        }
    </div>
</div>

使用ajax回调服务器

2 个答案: