使用ajax回调到服务器

Question

I am trying to do a callback to the server to return a partial view to my modal when i click the "Add Role" button, but nothing happens when I click the button.

JavaScript:

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

View:

@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>

Controller:

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

Answer 1

Message attribute is mandatory for bootbox dialog

$(".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

I ended up using the basic bootstrap modal with a @html.RenderAction call in the modal body and a reference to the launch button. No JQuery used.

<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>