Вступление
В этой статье мы узнаем, как добавить текстовое поле автозаполнения в ReactJS. В этой демонстрации мы используем компонент автозаполнения пользовательского интерфейса.
Предпосылки
- Мы должны иметь базовые знания о React.js и веб-API.
- Visual Studio и Visual Studio Code IDE должны быть установлены в вашей системе.
- SQL Server Management Studio.
- Пользовательский интерфейс материала установлен.
Вам также может понравиться: Угловое автозаполнение из интерфейса в БД
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «Автозаполнение» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа «Tblcountry».
Джава
1
CREATE TABLE [dbo].[TblCountry](
2
[Id] [int] IDENTITY(1,1) NOT NULL,
3
[Name] [nvarchar](50) NULL,
4
CONSTRAINT [PK_TblCountry] PRIMARY KEY CLUSTERED
5
(
6
[Id] ASC
7
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
8
) ON [PRIMARY]
9
GO
Теперь добавьте некоторые демонстрационные данные в эту таблицу.
Создать новый проект веб-API
Откройте Visual Studio и создайте новый проект.
Измените имя на Автозаполнение.
Выберите шаблон в качестве веб-API .
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные».
Нажмите на «ADO.NET Entity Data Model» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имена баз данных на следующей странице и нажмите OK.
Проверьте флажок «Таблица». Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово»
Теперь наша модель данных успешно создана.
Щелкните правой кнопкой мыши папку «Контроллер» и добавьте новый контроллер. Назовите его «контроллер автозаполнения» и добавьте следующее пространство имен в контроллер автозаполнения.
C #
1
using AutoComplete.Models;
Теперь добавьте метод для извлечения данных из базы данных.
Джава
xxxxxxxxxx
1
public object Getrecord()
2
{
3
var data= DB.TblCountries.ToList();
4
return data;
5
}
Полный код автозаполнения контроллера
C #
xxxxxxxxxx
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Net;
5
using System.Net.Http;
6
using System.Web.Http;
7
using AutoComplete.Models;
8
namespace AutoComplete.Controllers
9
{
10
[RoutePrefix("Api/autoComplete")]
11
public class AutoCompleteController : ApiController
12
{
13
AutoCompleteEntities2 DB = new AutoCompleteEntities2();
14
[HttpGet]
15
[Route("Countrylist")]
16
public object Getrecord()
17
{
18
var data= DB.TblCountries.ToList();
19
return data;
20
}
21
}
22
}
Теперь давайте включим CORS. Зайдите в Инструменты, откройте диспетчер пакетов NuGet, найдите CORS и установите пакет «Microsoft.Asp.Net.WebApi.Cors». Откройте Webapiconfig.cs и добавьте следующие строки.
Джава
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Создать проект ReactJS
Теперь давайте сначала создадим приложение React с помощью следующей команды.
C #
xxxxxxxxxx
1
npx create-react-app autocomplete
Откройте вновь созданный проект в коде Visual Studio и установите Material-UI .
Установить Material-UI
Теперь установите Material-UI с помощью следующей команды
JavaScript
xxxxxxxxxx
1
npm install @material-ui/core --save
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios .
Джава
xxxxxxxxxx
1
npm install --save axios
Теперь перейдите в папку src и добавьте новые компоненты.
Autocomplete.js
Теперь откройте компонент Autocomplete.js и импортируйте необходимую ссылку.
JavaScript
xxxxxxxxxx
1
import Autocomplete from '@material-ui/lab/Autocomplete';
2
import AppBar from '@material-ui/core/AppBar';
3
import Toolbar from '@material-ui/core/Toolbar';
Следующий код в этом компоненте.
Джава
xxxxxxxxxx
1
import React, { Component } from 'react';
2
import TextField from '@material-ui/core/TextField';
3
import Autocomplete from '@material-ui/lab/Autocomplete';
4
import AppBar from '@material-ui/core/AppBar';
5
import Toolbar from '@material-ui/core/Toolbar';
6
import './App.css';
7
import axios from 'axios';
8
export class Autocom extends Component {
9
constructor(props) {
10
super(props)
11
this.state = {
12
ProductData: []
13
14
}
15
}
16
componentDidMount() {
17
axios.get('http://localhost:51983/Api/autoComplete/Countrylist').then(response => {
18
console.log(response.data);
19
this.setState({
20
ProductData: response.data
21
});
22
});
23
}
24
render() {
25
26
return (
27
<div>
28
<AppBar className="mrg" position="static">
29
<Toolbar >
30
Auto Complete
31
</Toolbar>
32
</AppBar>
33
<Autocomplete className="pding"
34
id="combo-box-demo"
35
options={this.state.ProductData}
36
getOptionLabel={option => option.Name}
37
style={{ width: 300 }}
38
renderInput={params => (
39
<TextField {...params} label="Auto Complete" variant="outlined" fullWidth />
40
)}
41
/>
42
</div>
43
)
44
}
45
46
}
47
export default Autocom
Теперь откройте файл app.cs и добавьте следующий код.
Джава
xxxxxxxxxx
1
2
.mrg{
3
margin-top: 20px;
4
margin-bottom: 20px;
5
}
6
.pding
7
{
8
padding-left: 500px;
9
}
Теперь откройте файл app.js и добавьте следующий код.
Джава
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import Form from './Form'
5
import Autocom from './Autoc'
6
function App() {
7
return (
8
<div className="App">
9
<Autocom/>
10
</div>
11
);
12
}
13
14
export default App;
Теперь запустите проект, используя ‘npm start’,
Считаете ли вы эту статью полезной? Дайте нам знать об этом в комментариях!
Дальнейшее чтение
Создание элемента управления автозаполнением ASP.NET MVC, часть 1