As mentioned before, all we need is a simple site inspired by Stack Overflow where we use some of the features provided by SignalR. Next, replace the example controller with a new one that allows adding new questions and answers, as well as voting on them.
A simple in-memory storage will be enough for the purposes of this article, but feel free to replace this with a different storage approach if you are so inclined to. This is a fairly straightforward controller managing a list of questions kept in memory, where every question has a list of answers and a score. The API allows questions to be voted a similar endpoint for down voting can be easily implemented.
If you want, you can check out the source in GitHub as well as adding new questions and answers. To do so, we need to update the Startup class.
Add the following line to the ConfigureServices method:. Finally add the following line to the Configure method, before the UseMvc call, so we allow any CORS request coming from our frontend, with a fairly broad set of permissions.
In a real application, you might want to be more restrictive with the methods and headers you allow. It also hardcodes the address of the frontend, which you might want to store as part of your configuration:.
You should see a JSON file with the list of questions, containing the one initialized in our in-memory collection. Our next task is to create a Vue project that provides the user interface of our minimalistic Stack Overflow site, and uses the backend we just finished in the earlier section. We will use the Vue CLI 3 , which you can install as a global npm package. Leave Babel and Linter selected, then select Router option with the space bar before pressing enter.
Check the screenshot for the remaining options, but feel free to use your preferred ones as long as you add the router. Figure 3, creating the client project with the Vue CLI 3. If you have version 2 of the cli, you should be able to follow along, use vue init to create the project and npm run dev to run it.
We will complete the setup by installing a few extra libraries that will help us build a not so barebones frontend:. Open a terminal in the client folder or cd into it. Then install them all with a single command:. If you would rather use different libraries or none at all and build the simplest frontend possible, you can still do so and follow along.
In order to run the frontend, you just need to open a terminal, navigate to the client folder and run the command npm run serve. This will start a webpack dev server with auto reload, so as soon as you change your code, the frontend is refreshed.
Nothing extraordinary, we are just importing the extra libraries we have installed and performing any initialization required with Vue.
Next update the contents of App. This looks complicated but it is a basic navbar using bootstrap styling. It simply retrieves a list of question previews from our backend API and renders them in a list, as well as provides a button and a modal to create a new question. The component data contains a list of questions which is initially empty and is updated with the list retrieved from the backend as soon as the component gets added to the page.
As you can see, it uses two components:. Start by adding a new file add-question-modal. This component provides a bootstrap-vue modal component and some form controls to enter the title and body of a new question.
When the user submits the form, the question is sent to the server and an event is emitted with the response from the server so it can be added to the list of previews displayed in the home. Next add a new file question-preview. This is a simple component that renders a bootstrap card with the question preview. Whenever the user clicks on the question, it will navigate to the question details page which we will add in a minute. Continue adding the question-score.
We have some bootstrap styling to render the question score along with the voting buttons. When the buttons are clicked, a request is sent to the server and the question preview is updated with the server response. The finished site should be reloaded automatically if not, manually reload. You should see the list of questions and will be able to add new ones:. Figure 5, our site now lists questions and allows users to create them. The recommended choice in the second step of the project creation wizard is Web Application Model-View-Controller which will generate a simple sample app.
They derive from the Controller base class. Their methods are called action methods and serve as entry points handling the requests:. By convention, they are placed in a subfolder matching the name of the controller which will be using them. Their name matches the action methods they will be used in.
Index action method. They are typically instantiated in action methods and are usually wrappers or data transfer objects with minimal business logic.
Most of the business logic in an ASP. NET Core application is typically implemented in services which can be registered in the ConfigureServices method of the Startup class.
This way they can be injected in the controller classes which need them using the built-in dependency injection functionality. By default, requests invoke a specific action method based on the routing convention specified in the Configure method of the Startup class:. The first URL component determines the controller HomeController if not specified , the second URL component determines the action method in that controller Index if not specified , and the third URL component is passed into the action method as a parameter named id.
Of course, the routing configuration can be customized as needed. Internally, each incoming request is processed by a pipeline of components which can do some work before passing on the request to the next component in the pipeline and after receiving the response back from it. The components in the pipeline are named middleware.
Many of them are built into the framework and provide what one could consider standard web application functionalities like routing, serving static files, authentication, exception handling, HTTPS redirection, CORS Cross-Origin Resource Sharing configuration, etc.
The framework makes it easy to develop custom middleware as well. It can also target. NET framework versions that implement. NET Standard 2. NET framework 4. This can be useful if the application depends on Windows-specific. NET Core. NET Core hosted applications. Also, the upcoming ASP. NET Core 3. NET framework anymore. Editorial Update:. NET Core 3 have been released.
Read more here www. All of this makes targeting the. NET framework only as a temporary solution until the old Windows dependencies can be replaced with. NET Core based alternatives. With the upcoming improvements to interop in. NET Core if you decide to host your app on Windows. It runs on top of the. NET framework with no support for. NET Core and is not actively developed anymore. Applications written in ASP. NET Core should be used instead on top of.
NET Core if possible, or. NET framework if necessary. On the surface, ASP. The project structure contains the same three core folders:. However, there is only limited built-in support for dependency injection with no implementation provided out-of-the-box. Save Article. Improve Article. Like Article. Welcome to GeeksforGeeks. Recommended Articles. How to create previous and next button and non-working on end position using JavaScript?
Article Contributed By :. Easy Normal Medium Hard Expert. Writing code in comment? Web Components. JavaScript Show sub menu. JavaScript Answers. JavaScript Basics. JavaScript Best Practices. JavaScript Design Patterns. Object-Oriented JavaScript. Functional Javascript. JavaScript Tips.
React Show sub menu. React Answers. React Projects. React Native. NativeScript React. React Tips. React D3. React Ionic. React Bootstrap. React Hooks. Material UI. Storybook for React. Top React Libraries. Shards React. Cross-Platform Development with Qt 6 and NET Core and Vue. Keycloak - Identity and Access Management React 17 Design Patterns and Best Practices Machine Learning for Algorithmic Trading Learning C by Developing Games with Unity Free eBooks - access now.
0コメント