MVC + efcore project practice – data warehouse management system 7 – data source management – new data source


In the first part, we completed the data source list display function (not yet tested).

In this article, we will add new data sources and view the list display function.



2、 Development of data source management function

2. New data source

We use modal dialog box to add data source, and the effect is as follows:

We will explain it in two parts: presentation and logic.



The front-end UI we use is based on bootstrap, so all components in bootstrap can also work normally.

Go to the official website of bootstrap to find the modal dialog box, paste the relevant UI, and make some modifications.

The basic HTML structure is as follows.

Trigger the dialog box through the button:



Click the button to add a data sourceàOpen modal dialogàFill out the form

àClick test connectionàSave into database (to meet the condition: test connection OK)


We complete the click test connection function after filling out the form, which is divided into three steps.

Step 1: the front end gets the form information and submits it through Ajax

Referring to the above figure, SQL Server database connection related fields include: database address host, port number, database name, user name, password.

The code for submission is as follows:




Step 2: create a new web API in the back end to process the submitted request

Instead of creating a new web API project, we can directly create a new web API controller in the controller.

For the sake of distinguishing, we add the prefix API to the name

In addition, we annotate the route [route (“API / [controller]) above the class, and specify the route in each action. In addition, we add a constructor to complete the preparation of database connection.


Create a new action, and we will parse the received object in JSON format.

Initialize a SqlConnection object with the parsed string as the connection string. Then we open the connection object. If the open state is normal, we think it is connected.


Step 3: return the results

If the connection is successful, we return a successful connection message for the front-end display.

Display effect:

After the connection test is successful, the function of the Save button is completed. The process is similar. The following two differences are mentioned, and others will not be discussed in detail.

1. Each field is transferred separately in the data object passed by the front end, which is convenient for parsing and storage.

2. After the back-end connection is successful, the corresponding data source object is constructed and stored.


After saving, we can see that the new data source has been saved.




3、 Summary

This time we have completed the data source saving function.

From the perspective of use, there are many obvious aspects of the code that need to be improved. For example, there is code redundancy between the test data source connection and the save data source connection; there is a lack of some necessary anti foolproof measures, so the Save button is not available at the beginning, and can be used after the test connection is successful.

These problems will not affect the use of the main functions. We will not modify them first, and then iterate to repay these “technical debts” after the final core functions are completed. We take the development speed as the first priority, and carry out the next development after each function reaches the minimum available.


Welcome to leave me a message


Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]