diff --git a/docs/Tutorials/AspNetCore-Mvc/Part-I.md b/docs/Tutorials/AspNetCore-Mvc/Part-I.md index 236f87bdaa..464bfe1954 100644 --- a/docs/Tutorials/AspNetCore-Mvc/Part-I.md +++ b/docs/Tutorials/AspNetCore-Mvc/Part-I.md @@ -4,6 +4,11 @@ In this tutorial series, you will build an application that is used to manage a list of books & their authors. **Entity Framework Core** (EF Core) will be used as the ORM provider (as it comes pre-configured with the startup template). +This is the second part of the tutorial series. See other parts: + +- Part I (this tutorial) +- [Part II](Part-II.md) + You can download the **source code** of the application [from here](https://github.com/volosoft/abp/tree/master/samples/BookStore). ### Creating the Project @@ -302,4 +307,86 @@ When you click to the Books menu item, you are redirected to the new Books page. #### Book List -TODO... \ No newline at end of file +We will use the [Datatables.net](https://datatables.net/) JQuery plugin to show list of tables on the page. Datatables completely works via AJAX, so it is fast and provides a good user experience. Datatables plugin is configured in the startup template, so you can directly use it. + +##### Index.cshtml Changes + +Change the `Pages/Books/Index.cshtml` as following: + +````html +@page +@using Acme.BookStore.Pages.Books +@inherits Acme.BookStore.Pages.BookStorePageBase +@model IndexModel +@section scripts +{ + +} + + +

@L["Books"]

+ + + + + + @L["Name"] + @L["Type"] + @L["PublishDate"] + @L["Price"] + + + + + +```` + +* `abp-script` [tag helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro) is used to add external **scripts** to the page. It has many additional features compared to standard `script` tag. It handles **minification** and **versioning** for example. See the [bundling & minification document](../../AspNetCore/Bundling-Minification.md) for details. +* `abp-card` and `abp-table` are **tag helpers** for Twitter Bootstrap's [card component](http://getbootstrap.com/docs/4.1/components/card/). There are many tag helpers in ABP to easily use most of the [bootstrap](https://getbootstrap.com/) components. You can use regular HTML tags instead of these tag helpers, but using tag helpers reduces HTML code and prevents errors by the help of the intellisense. See the [tag helpers document](../../AspNetCore/Tag-Helpers.md). +* You can **localize** the column names in the localization file as you did for the menu items above. + +##### Add a Script File + +Create `index.js` JavaScript file under the `wwwroot/pages/books/` folder: + +![bookstore-index-js-file](../../images/bookstore-index-js-file.png) + +`index.js` content is shown below: + +````js +$(function() { + $('#BooksTable').DataTable({ + ajax: abp.libs.datatables.createAjax(acme.bookStore.book.getList), + columnDefs: [ + { + targets: 0, + data: "name" + }, + { + targets: 1, + data: "type" + }, + { + targets: 2, + data: "price" + }, + { + targets: 3, + data: "publishDate" + } + ] + }); +}); +```` + +* `abp.libs.datatables.createAjax` is a helper function to adapt ABP's dynamic JavaScript API proxies to Datatable's format. +* `acme.bookStore.book.getList` is the function to get list of books (you have seen it before). +* See [Datatable's documentation](https://datatables.net/manual/) for more configuration options. + +The final UI is shown below: + +![bookstore-book-list](../../images/bookstore-book-list.png) + +### Next Part + +See the [next part](Part-II.md) of this tutorial. \ No newline at end of file diff --git a/docs/Tutorials/AspNetCore-Mvc/Part-II.md b/docs/Tutorials/AspNetCore-Mvc/Part-II.md new file mode 100644 index 0000000000..053f1dfe5c --- /dev/null +++ b/docs/Tutorials/AspNetCore-Mvc/Part-II.md @@ -0,0 +1,16 @@ +## ASP.NET Core MVC Tutorial - Part II + +### About the Tutorial + +In this tutorial series, you will build an application that is used to manage a list of books & their authors. **Entity Framework Core** (EF Core) will be used as the ORM provider (as it comes pre-configured with the startup template). + +This is the second part of the tutorial series. See other parts: + +* [Part I](Part-I.md) +* Part II (this tutorial) + +You can download the **source code** of the application [from here](https://github.com/volosoft/abp/tree/master/samples/BookStore). + +### Creating a New Book + +TODO... \ No newline at end of file diff --git a/docs/images/bookstore-book-list.png b/docs/images/bookstore-book-list.png new file mode 100644 index 0000000000..34cec48c66 Binary files /dev/null and b/docs/images/bookstore-book-list.png differ diff --git a/docs/images/bookstore-index-js-file.png b/docs/images/bookstore-index-js-file.png new file mode 100644 index 0000000000..01505b96c8 Binary files /dev/null and b/docs/images/bookstore-index-js-file.png differ diff --git a/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/en.json b/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/en.json index d2d707699b..247976a232 100644 --- a/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/en.json +++ b/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/en.json @@ -5,6 +5,10 @@ "Menu:BookStore": "Book Store", "Menu:Books": "Books", "Welcome": "Welcome", - "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io." + "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.", + "Name": "Name", + "Type": "Type", + "PublishDate": "Publish Date", + "Price": "Price" } } \ No newline at end of file diff --git a/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/tr.json b/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/tr.json index 48e849953b..14a9939e3a 100644 --- a/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/tr.json +++ b/samples/BookStore/src/Acme.BookStore.Domain/Localization/BookStore/tr.json @@ -5,6 +5,10 @@ "Menu:BookStore": "Kitap Deposu", "Menu:Books": "Kitaplar", "Welcome": "Hoşgeldiniz", - "LongWelcomeMessage": "Uygulamaya hoşgeldiniz. Bu, ABP framework'ü üzerine bina edilmiş bir başlangıç projesidir. Daha fazla bilgi için abp.io adresini ziyaret edebilirsiniz." + "LongWelcomeMessage": "Uygulamaya hoşgeldiniz. Bu, ABP framework'ü üzerine bina edilmiş bir başlangıç projesidir. Daha fazla bilgi için abp.io adresini ziyaret edebilirsiniz.", + "Name": "İsim", + "Type": "Tür", + "PublishDate": "Yayınlanma Tarihi", + "Price": "Fiyat" } } \ No newline at end of file diff --git a/samples/BookStore/src/Acme.BookStore.Web/Pages/Books/Index.cshtml b/samples/BookStore/src/Acme.BookStore.Web/Pages/Books/Index.cshtml index 97f9e9b240..56dc8586d3 100644 --- a/samples/BookStore/src/Acme.BookStore.Web/Pages/Books/Index.cshtml +++ b/samples/BookStore/src/Acme.BookStore.Web/Pages/Books/Index.cshtml @@ -2,5 +2,24 @@ @using Acme.BookStore.Pages.Books @inherits Acme.BookStore.Pages.BookStorePageBase @model IndexModel - -

Books

\ No newline at end of file +@section scripts +{ + +} + + +

@L["Books"]

+ + + + + + @L["Name"] + @L["Type"] + @L["PublishDate"] + @L["Price"] + + + + + \ No newline at end of file diff --git a/samples/BookStore/src/Acme.BookStore.Web/wwwroot/pages/books/index.js b/samples/BookStore/src/Acme.BookStore.Web/wwwroot/pages/books/index.js new file mode 100644 index 0000000000..a2a20fad54 --- /dev/null +++ b/samples/BookStore/src/Acme.BookStore.Web/wwwroot/pages/books/index.js @@ -0,0 +1,23 @@ +$(function() { + $('#BooksTable').DataTable({ + ajax: abp.libs.datatables.createAjax(acme.bookStore.book.getList), + columnDefs: [ + { + targets: 0, + data: "name" + }, + { + targets: 1, + data: "type" + }, + { + targets: 2, + data: "price" + }, + { + targets: 3, + data: "publishDate" + } + ] + }); +}); \ No newline at end of file