simpledeveloper Ответов: 2

React.js первое применение С.Объем сердечника 2.0


Привет

Я работаю над этим react.js пытаясь сначала понять базовое приложение, вот ссылка, по которой я следую:

Учебник (ASP.NET ядро) | ReactJS.NET[^]

Я действительно задал вопрос под статьей, но еще не получил его, но я тоже испытываю свою удачу здесь, если кто - то уже решил его-любая помощь была бы очень полезна.

Я пересек все ступени, но меня поразило сообщение Hello World, которое не отображается, я использовал ASP.Net ядро 2.0 и выбрал шаблон как react.js приложение, у меня не было папки js, созданной под моей папкой wwwroot, поэтому я создал ее и добавил файл Tutorial.jsx, это мне не помогает, приложение работает без ошибок (небольшая ошибка, которую он показывает в crossorigin, говоря, что значение атрибута отсутствует), но оно вообще не показывает сообщение Hello World.

В браузере он выдает мне сообщение об ошибке: не удалось загрузить ресурс: сервер ответил со статусом 500 (Внутренняя ошибка сервера) XXXX.jsx


Любая помощь была бы очень полезна, так как я новичок в мире javscript library world - спасибо.

Что я уже пробовал:

Другие веб-сайты, google и другие поисковые системы и коллеги и т. д

2 Ответов

Рейтинг:
10

mehr.ah

Попробовать это:
перейдите по ссылке : Views > Shared > _Layout.cshtml
затем найдите ссылки на jQuery и bootstrap
изменить целостность="" > удалить маркер целостности
--------------------------------------------------


simpledeveloper

Привет,

У меня есть следующий код в файле Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - App1</title>
    <base href="~/" />

    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
    <environment exclude="Development">
        <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
    </environment>
</head>
<body>
    @RenderBody()

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Не могли бы вы дать мне знать, что я могу удалить из Layout.cshtml, я очень новичок в мире библиотек JavaScript, я попытался закомментировать весь раздел тегов и запустил приложение, все еще не в состоянии увидеть какое-либо приветственное сообщение или что-либо связанное с кодом react, который я написал, не могли бы вы дать мне знать, почему я должен удалить его также? Большое спасибо, мой друг - я думал, что вообще не получу никакого ответа. Еще раз большое вам спасибо.

mehr.ah

Я видел выше, так что проект не использовал cdn, но локальный тогда :
ты сказал, что использовал аспида. Net Core 2.0 but above layout-это шаблон по умолчанию для стандартного веб-приложения .NET .
Внимание в .Объем ядра вы должны знать пакеты и установить их вручную с помощью NuGet.
так что я думаю, что некоторые из вас думали неправильно ,
вы должны добавить пакет скриптов в вышеприведенный макет , добавить ссылки на ваш jQuery и ... после @renderbody().

mehr.ah

Если вы используете неправильное имя помощника, попробуйте заменить вызов компонента на это.
{{> React component=HeaderHelper}}
ссылка:
https://stackoverflow.com/questions/51233621/react-component-argument-missing-error

simpledeveloper

Я добился некоторого прогресса, я смог вызвать методы Get, но не смог вызвать методы Put и Post.
Мои методы веб-Api следующие, по какой-то причине я не могу вызвать эти методы веб-Api, я делаю что-то неправильно эти методы, пожалуйста, дайте мне знать:

    [Produces("application/json")]
    [Route("api/Employee")]    
    public class EmployeeController : Controller
    {
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

        [HttpGet("[action]")]
        //[Route("api/Employee/Index")]
        public IEnumerable<TblEmployee> Index()
        {
            return objemployee.GetAllEmployees();
        }

        [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

        [HttpGet("{id}")]
        //[HttpGet("{id}", Name = "Details")]
        public TblEmployee Details(int id)
        {
            return objemployee.GetEmployeeData(id);
        }
        
        [HttpPut("{id}")]
        public int Edit(int id, TblEmployee employee)
        {
            return objemployee.UpdateEmployee(employee);
        }

        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

        [HttpGet("[action]")]
        public IEnumerable<TblCities> GetCityList()
        {
            return objemployee.GetCities();
        }
    }

Я пытаюсь вызвать этот метод с помощью компонента reactjs, я не могу вызвать этот метод, не могли бы вы помочь мне, где я делаю ошибку
Вот мой компонент рендеринга таблицы:
    private renderEmployeeTable(empList: EmployeeData[]) {
        return <table className='table'>
            <thead>
                <tr>
                    <th></th>
                    <th>EmployeeId</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Department</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                {empList.map(emp =>
                    <tr key={emp.employeeId}>
                        <td></td>
                        <td>{emp.employeeId}</td>
                        <td>{emp.name}</td>
                        <td>{emp.gender}</td>
                        <td>{emp.department}</td>
                        <td>{emp.city}</td>
                        <td>
                            <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                            <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>;
    }

Теперь я призываю его, как показано ниже метод редактирования, как показано ниже
    private handleEdit(id: number) {       
        this.props.history.push("api/employee/edit/" + id);
    }

И у меня есть метод Delete Web Api, который тоже не вызывается из приведенного выше файла скрипта ts
        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

И у меня есть метод Create который должен быть вызван ts файлом в момент нажатия кнопки save который также не вызывается:
 [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

Сценарий ts для вызова create выглядит следующим образом при нажатии кнопки save:
import * as React from 'react';
import { RouteComponentProps

Рейтинг:
1

mehr.ah

1)в соответствии с концепцией api вы должны отправить весь ваш запрос на url > api/Employee без параметра маршрутизации в api
отправьте их с помощью ajax например:
var id = ваш желаемый идентификатор;
$.Аякс({
заголовки: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
тип: "поставить",
кроссдомен: правда,
url: домен или ваш адрес разработки(localhost:port) + "api/Employee" + id,
успех: функция (данные) { },
функция ошибок () {} });
--------------
или
2)javascript - React: Fetch DELETE and PUT requests - переполнение стека[^]