Question: How do you add an action to a Navigation Property Picker / Modal Ui #192

3 Answer(s)

• 

  0

  alper created 4 years ago

  Support Team Director

  MVC / Angular?

  Save Cancel
• 

  0

  sean.alford created 4 years ago

  @alper, MVC

  Save Cancel
• 

  0

  cotur created 4 years ago

  Hi @sean.alford,

  You can use abp.ModalManager javascript library to open a new modal easily.

  Consider that, I want to place a button on my Index.cshtml Razor Page.

  <button id="MyBtn">My Action</button> <!-- Place this button wherever you want at your page -->
  

  And my javascript codes

  // abp.appPath + "Test/CreateModal" => TestApp.Web / Pages / Test / CreateModal.cshtml
  
  var createModal = new abp.ModalManager(abp.appPath + "Test/CreateModal");
      
  $('#MyBtn').click(function (e) {
          ... // your codes
          
          createModal.open(); // Without parameters
      });
  

  and if you want to send parameters while opening modal, just send a javascript object as a parameter of open function.

      createModal.open({ name: "John Doe" }); // With parameters
  

  ---

  For second question, I think you use DataTables, and it is really easy to show different values on table.

  For example; I have an endpoint that retuns ContactDto list. ContactDto contains Name, surname, Phone etc.

  ContactDto

  public class ContactDto : FullAuditedEntityDto<Guid>
      {
          public string Name { get; set; }
  
          public string Surname { get; set; }
  
          public string CellPhone { get; set; }
  
          public string Phone { get; set; }
  
          public string Email { get; set; }
  
          public string Title { get; set; }
  
          public string Note { get; set; }
  
          public Guid AccountId { get; set; }
          
          public AccountDto Account { get; set; } // This Dto has Name property
      }
  

  My table:

  <abp-table striped-rows="true" id="ContactsTable">
              <thead>
                  <tr>
                      <th>@L["Actions"]</th>
                      <th>@L["Name"]</th>
                      <th>@L["Surname"]</th>
                      <th>@L["CellPhone"]</th>
                      <th>@L["Phone"]</th>
                      <th>@L["Email"]</th>
                      <th>@L["Title"]</th>
                      <th>@L["Note"]</th>
                      <th>@L["AccountName"]</th>
                  </tr>
              </thead>
          </abp-table>
  

  And my javascript codes,

   var dataTable = $("#ContactsTable").DataTable(abp.libs.datatables.normalizeConfiguration({
          processing: true,
          serverSide: true,
          paging: true,
          ajax: abp.libs.datatables.createAjax(window.volo.easyCrm.contacts.contact.getList), // .getList is auto generated javascript proxy of my AppService
          columnDefs: [
              {
                  rowAction: {
                      items:
                          [
                              {
                                  text: l("Edit")
                              },
                              {
                                  text: l("Delete")
                              }
                          ]
                  }
              },
  			{ data: "name" },
  			{ data: "surname" },
  			{ data: "cellPhone" },
  			{ data: "phone" },
  			{ data: "email" },
  			{ data: "title" },
  			{ data: "note" },
              { data: "account.name" }
          ]
      }));
  

  I hope this will help you. But I suggest you to check EasyCRM sample that created to show ABP and ABP Commercial features.

  Save Cancel