Блог

• Создайте новый DTO

MySearchFilterDto.cs -> (в разделе Контракты приложений)

 public class MySearchFilterDto : PagedAndSortedResultRequestDto
{
   public string Filter { get; set; }
}
 

• Измените IBookAppService и BookAppService

IBookAppService.cs

 public interface IBookAppService :
        ICrudAppService< 
            BookDto, 
            Guid, 
            MySearchFilterDto, //Used for paging/sorting   filtering (we've defined)
            CreateUpdateBookDto> 
    {

    }
 

Обратите внимание, мы изменились PagedAndSortedResultRequestDto на MySearchFilterDto .

BookAppService.cs

 public class BookAppService :
        CrudAppService<
            Book, 
            BookDto,
            Guid, 
            MySearchFilterDto, //Used for paging/sorting   filtering (we've defined)
            CreateUpdateBookDto>, 
        IBookAppService 
    {
        public BookAppService(IRepository<Book, Guid> repository)
            : base(repository)
        {

        }

        //override the GetList method to enable searching (in here I only search by book name, you can also search by other props)
        public override async Task<PagedResultDto<BookDto>> GetListAsync(MySearchFilterDto input)
        {
            var queryable = await base.Repository.GetQueryableAsync();
            var query = queryable.WhereIf(!string.IsNullOrWhiteSpace(input.Filter), book => book.Name.ToLower()
                .Contains(input.Filter.ToLower()))
                .OrderBy(input.Sorting ?? nameof(Book.Name).ToLower())
                .PageBy(input);


            var count = await AsyncExecuter.CountAsync(query);
            var books = await AsyncExecuter.ToListAsync(query);

            var result = ObjectMapper.Map<List<Book>, List<BookDto>>(books);

            return new PagedResultDto<BookDto> { Items = result, TotalCount = count };
        }
    }
 

• Откройте свой Index.cshtml (в разделе Страницы -> Книги) и добавьте ввод для поиска.

Индекс.cshtml

 //...

<abp-card>
    <abp-card-header>
        <h2>@L["Books"]</h2>
    </abp-card-header>
    <abp-card-body>
        <abp-column size="_3">
           Search: 
            <input name="Search" /> @* add search input *@
        </abp-column>
        <abp-table striped-rows="true" id="BooksTable"></abp-table>
    </abp-card-body>
</abp-card>
 

• Откройте свой Index.js (в разделе Страницы -> Книги), получите значение ввода поиска и передайте его методу getList.

Index.js

 $(function () {

   //get the value of the search input
    var getFilter = function () {
        return {
            filter: $("input[name='Search'").val(),
        };
    };

    var dataTable = $('#BooksTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(myDemoTest4421.books.book.getList, getFilter), //pass the filter to the GetList method
            columnDefs: [
                {
                    title: 'Name',
                    data: "name"
                },
                {
                    title: 'Type',
                    data: "type",
                    render: function (data) {
                        return data;
                    }
                },
                {
                    title: 'PublishDate',
                    data: "publishDate",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString();
                    }
                },
                {
                    title: 'Price',
                    data: "price"
                },
                {
                    title: 'CreationTime', data: "creationTime",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                    }
                }
            ]
        })
    );
   
   //when search input changed (a new character typed) reload the datatable
   $("input[name='Search'").change(function () {
        dataTable.ajax.reload();
    });
});

 

Выполнив эти действия, вы сможете искать свои книги по названию.