Rückruf zum Server mit Ajax

Question

Ich versuche, einen Rückruf an den Server zu tun, um eine Teilansicht zu meinem Modal zurückzukehren, wenn ich auf die Schaltfläche "Add Role" klicken, aber nichts geschieht, wenn ich auf die Schaltfläche klicke.

JavaScript:

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

Ausblick:

@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

Nachricht Attribut ist obligatorisch für 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

endete ich mit einem @ Html.RenderAction Anruf im Modal Körper und einem Verweis auf die Start-Taste mit der grundlegenden Bootstrap-modal oben. Keine JQuery verwendet.

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