public ClientsController(IClientAppService clientService)
    {
        _clientService = clientService;
    }

    public async Task<ViewResult> Index(GetAllClientsInput input)
    {
        var output = await _clientService.GetAll(input);
        var model = new Web.Models.Clients.IndexViewModel(output.Items);
        return View("Index", model);

    }

    public async Task Create(CreateClientInput input)
    {
        await _clientService.Create(input);
    }

    public async Task Delete(CreateClientInput input)
    {
        await _clientService.Create(input);
    }
}`

(function() {
    $(function() {

        var _clientService = abp.services.app.client;
        var _$modal = $('#ClientCreateModal');
        var _$form = _$modal.find('form');

        _$form.validate();

        _$form.find('button[type="submit"]').click(function (e) {
            e.preventDefault();

            if (!_$form.valid()) {
                return;
            }

            var client = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js

            abp.ui.setBusy(_$modal);
            _clientService.create(client).done(function () {
                _$modal.modal('hide');
                location.reload(true); //reload page to see new user!
            }).always(function () {
                abp.ui.clearBusy(_$modal);
            });
        });

        _$modal.on('shown.bs.modal', function () {
            _$modal.find('input:not([type=hidden]):first').focus();
        });
    });
})();

@section scripts
{
    <environment names="Development">
        <script src="~/js/views/clients/Index.js" asp-append-version="true"></script>
    </environment>

    <environment names="Staging,Production">
        <script src="~/js/views/clients/Index.min.js" asp-append-version="true"></script>
    </environment>
}
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    @L("Clients")
                </h2>
                <ul class="header-dropdown m-r--5">
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="javascript:void(0);" class=" waves-effect waves-block">Action</a></li>
                            <li><a href="javascript:void(0);" class=" waves-effect waves-block">Another action</a></li>
                            <li><a href="javascript:void(0);" class=" waves-effect waves-block">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="body table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>@L("UserName")</th>
                        <th>@L("FullName")</th>
                        <th>@L("EmailAddress")</th>
                        <th>@L("IsActive")</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var user in Model.Clients)
                    {
                        <tr>
                            <td>@user.FirstName</td>
                            <td>@user.LastName</td>
                            <td>@user.Email</td>
                            <td>@user.Mobile</td>
                        </tr>
                    }
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" data-toggle="modal" data-target="#ClientCreateModal">
                    <i class="material-icons">add</i>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ClientCreateModal" tabindex="-1" role="dialog" aria-labelledby="ClientCreateModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form name="userCreateForm" role="form" novalidate class="form-validation">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>@L("CreateNewClient")</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group form-float">
                        <div class="form-line">
                            <input class="form-control" type="text" name="FirstName" required maxlength="@AbpUserBase.MaxUserNameLength" minlength="2">
                            <label class="form-label">@L("FirstName")</label>
                        </div>
                    </div>
                    <div class="form-group form-float">
                        <div class="form-line">
                            <input type="text" name="LastName" class="form-control" required maxlength="@AbpUserBase.MaxNameLength">
                            <label class="form-label">@L("LastName")</label>
                        </div>
                    </div>
                    <div class="form-group form-float">
                        <div class="form-line">
                            <input type="text" name="Mobile" class="form-control" required maxlength="@AbpUserBase.MaxSurnameLength">
                            <label class="form-label">@L("Mobile")</label>
                        </div>
                    </div>
                    <div class="form-group form-float">
                        <div class="form-line">
                            <input type="email" name="Email" class="form-control" required maxlength="@AbpUserBase.MaxEmailAddressLength">
                            <label class="form-label">@L("Email")</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">@L("Cancel")</button>
                    <button type="submit" class="btn btn-primary waves-effect">@L("Save")</button>
                </div>
            </form>
        </div>
    </div>
</div>

[AbpAuthorize(PermissionNames.Pages_Tenants)]
public class ClientAppService : ApplicationService, IClientAppService
{
    private readonly IRepository<Client> _clientRepository;

    public ClientAppService(IRepository<Client> clientRepository)
    {
        _clientRepository = clientRepository;
    }

    public async Task<ListResultDto<ClientListDto>> GetAll(GetAllClientsInput input)
    {
        var clients = await _clientRepository
            .GetAll().ToListAsync<Client>();

        return new ListResultDto<ClientListDto>(
            ObjectMapper.Map<List<ClientListDto>>(clients));
    }

    public async Task Create(CreateClientInput input)
    {
        var task = ObjectMapper.Map<Client>(input);
        await _clientRepository.InsertAsync(task);
    }
}