powered by simpleCommunicator - 2.0.51     © 2025 Programmizd 02
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / MVC; WEB API; AngularJS
33 сообщений из 33, показаны все 2 страниц
MVC; WEB API; AngularJS
    #39774211
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Добрый день, коллеги!

Помогите плиз.

WEB API:
HomeController

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
using System;
using System.Collections.Generic;
using System.Linq;
using WebApi.Models;
using System.Web.Http;


namespace WebApi.Controllers
{
    public class HomeController : ApiController
    {
        // GET api/values
        public IEnumerable<StudentModel> Get()
        {
            List<StudentModel> list = new List<StudentModel>();
            for (int i = 0; i < 10; i++)
            {
                StudentModel stu = new StudentModel();
                stu.StudentId = i;
                stu.StuName = "stu" + i;
                list.Add(stu);
            }
            return list;
        }
    }
}




WebApiConfig.cs

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace WebApi
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Конфигурация и службы веб-API

            // Маршруты веб-API
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}




URL: http://localhost:59216/

MVC:
HomeController.cs:

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Http;
using System.Configuration;
using System.Net.Http.Headers;
using WebApi.Models;
using Newtonsoft.Json;
using System.Threading.Tasks;

namespace MvcApp.Controllers
{
    public class HomeController : Controller
    {
        string apiUrl = ConfigurationManager.AppSettings["baseurl"] + "/api/home/";
        HttpClient client;
        public HomeController()
        {
            client = new HttpClient();
            client.BaseAddress = new Uri(apiUrl);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        }

        public async Task<ActionResult> Student_Detail()
        {
            List<StudentModel> emp = new List<StudentModel>();
            HttpResponseMessage responseMessage = await client.GetAsync(apiUrl);
            if (responseMessage.IsSuccessStatusCode)
            {
                var responseData = responseMessage.Content.ReadAsStringAsync().Result;
                emp = JsonConvert.DeserializeObject<List<StudentModel>>(responseData);
            }
            return View(emp);
        }

    }
}




Student_Detail.cshtml

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
@model IEnumerable<WebApi.Models.StudentModel>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StudentId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StuName)
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.StudentId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.StuName)
            </td>
        </tr>
    }
</table>


<body ng-app="StudentApp">
    <h1>StudentList</h1>
    <div ng-controller="HomeController">
        <table ng-repeat="student in students" border="1">
            <tr>
                <td>StudentId</td>
                <td>StuName</td>
            </tr>
        </table>
    </div>
</body>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script>
    var app = angular.module("StudentApp", []);
    app.controller("HomeController", function ($scope, $http) {
        $http.get('http://localhost:59216/api/home/').
            success(function (data, status, headers, config) {
                $scope.students = data;

            }).
            error(function (data, status, headers, config) {
                alert("erro");
            });
    });
</script>





Обычный доступ получил, но не могу извлечь данные через AngularJS. (видно из скриншота)
Помогите плиз.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774212
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Админ, удалите плиз дубль.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774218
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

Почему запросы на разные порты?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774235
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123vadipok,

Почему запросы на разные порты?

Ну у Web API свой порт стартует во время запуска приложения.
Я проверял ссылку, он рабочий. (корректно отображается при простом переходе)
Тем более, что в Web.config из MVC содержит следующую строку:
Код: html
1.
<add key="baseurl" value="http://localhost:59216" />


В контроллере MVC приложения есть следующая строка:
Код: c#
1.
string apiUrl = ConfigurationManager.AppSettings["baseurl"] + "/api/home/";
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774248
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipokНу у Web API свой порт стартует во время запуска приложения.я спросил зачем? Вы не ответили.
Это не приветствуется по архитектуре и безопасности.
Вот тоже web api:
https://www.sql.ru:8080/myWebApi/get-users
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774252
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,
Стандатно это все запросы клиента напр. Ангуляра к одному домену и порту.
Так у вас?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774259
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

1. Зачем ты вывалил шарповский код, если у тебя ошибки в консоли браузера?
2. Почему ты не показал AJS код, тем более, что у тебя ошибки в консоли браузера?
3. http://localhost:59216/ - ты реально считаешь, что твоё приложение хостится у всех здесь присутствующих на локалхосте?? ))))
4. $http.get(...).success - это что еще за синтаксис??
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774260
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123vadipok,
Стандатно это все запросы клиента напр. Ангуляра к одному домену и порту.
Так у вас?

Я не понял вопроса.
Весь код для ангуляра выглядит так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<body ng-app="StudentApp">
    <h1>StudentList</h1>
    <div ng-controller="HomeController">
        <table ng-repeat="student in students" border="1">
            <tr>
                <td>StudentId</td>
                <td>StuName</td>
            </tr>
        </table>
    </div>
</body>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script>
    var app = angular.module("StudentApp", []);
    app.controller("HomeController", function ($scope, $http) {
        $http.get('http://localhost:59216/api/home/').
            success(function (data, status, headers, config) {
                $scope.students = data;

            }).
            error(function (data, status, headers, config) {
                alert("erro");
            });
    });
</script>



Больше я ничего не сделал.
Но ссылка http://localhost:59216/api/home/ рабочая.
По идее он должен работать, если нет ошибок в кодах ангуляра.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774273
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipokВесь код для ангуляра выглядит так:по коду клиена нее подскажу. Это в ветку JS.
Меня интересовало отсутствие кроссдоменных запросов, если это твой случай.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774275
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Переделал согласно тынц :
Ошибка повторяется, ничего не поменялось.
employeeController.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
//The below code will fetch the data from EmployeeService and will pass to the $scope variable 

employeeAppModule.controller('EmployeeCtrl', function ($scope, EmployeeService) //injected the EmployeeService factory
{
    getEmployeeRecords(); //call the function

    function getEmployeeRecords() {
        EmployeeService.getEmployees() //invoking the getEmployees() method of the EmployeeService factory

            .success(function (data) { // case when records found successfully
                console.log(data); //just for display in the console
                $scope.employees = data;
            })

            .error(function (data, status) { // if something goes wrong
                console.error('failure loading the employee record', status, data);
                $scope.employees = {}; //return blank record if something goes wrong
            });
    }
});



employeeModule.js
Код: javascript
1.
2.
//creating an application module
var employeeAppModule = angular.module("employeeApp", []);



employeeService.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
employeeAppModule.factory('EmployeeService', ['$http', function ($http) {

    var employeeService = {};

    var urlBase = 'http://localhost:59216/api'; //the base for the Employee Resources

    //invoke the service
    employeeService.getEmployees = function () {
        return $http.get(urlBase + '/home');
    };

    //returns the record obtained from the service
    return employeeService;
}]);



Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<body ng-app="employeeApp">
    <div align="center"><b><u><font size="8px">Employee Records</font></u></b></div>
    <div ng-controller="EmployeeCtrl" align="center">
        <table border="1">
            <tr bgcolor="gray">

                <td>Employee ID</td>
                <td>Employee Name</td>
            </tr>
            <tr ng-repeat="employee in employees">
                <td><span>{{employee.StudentId}}</span></td>
                <td><span>{{employee.StuName}}</span></td>
            </tr>
        </table>
    </div>
</body>


<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Models/employeeModule.js"></script>
<script src="~/Models/employeeController.js"></script>
<script src="~/Models/employeeService.js"></script>

...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774282
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

Замени success на then , а error на catch .

Это работало до AJS 1.4.3
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774286
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Агнец за бортом,


vadipokПеределал согласно тынц :
Я не врубаюсь, откуда в демке кросс запросы?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774290
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123,

Это мне вопрос?

CORS allows servers to specify certain trusted 'origins' they are willing to permit requests from. Origins are defined as the combination of protocol (http or https), host (a domain like www.example.com or an IP address) and port .

Порт другой - включается CORS.

По быстрому - пускай в заголовке на серваке разрешит всё и всем - всё прокатит.

Access-Control-Allow-Origin * (это надо добавить в заголовок ответа)

И вся недолга
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774307
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Агнец за бортомvadipok,

Замени success на then , а error на catch .

Это работало до AJS 1.4.3

Спасибо, но вылезла другая ошибка.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774308
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Агнец за бортомPetro123,

Это мне вопрос?

CORS allows servers to specify certain trusted 'origins' they are willing to permit requests from. Origins are defined as the combination of protocol (http or https), host (a domain like www.example.com or an IP address) and port .

Порт другой - включается CORS.

По быстрому - пускай в заголовке на серваке разрешит всё и всем - всё прокатит.

Access-Control-Allow-Origin * (это надо добавить в заголовок ответа)

И вся недолга

Можно подробнее, я ничего не понял что нужно конкретно сделать.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774314
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Агнец за бортом,
Тебе. Ты же шаришь в ангуляре.
Там пример не должен делать кросс запрос, но ниже текст: "запускаем.... Ошибка".
Разве в демке и тут есть кросс запрос?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774316
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,
Дай вкладку Сеть скрин в отладчике
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774325
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123vadipok,
Дай вкладку Сеть скрин в отладчике
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774338
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123Там пример не должен делать кросс запрос

Кому не должен?

Что вы вообще несете?

ТС, вызывай $http.get('/api/home/'). и не пудри людям мозги с кросс-запросами
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774340
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

.. уберите разные порты, для CORS - это different origin ... потом сможете разрулить это либо в прокси, либо еще как .. если бы это было .Net Core, то там можно было бы прямо в Program.cs services.AddCors() .. в MVC не уверен, можно ли ...
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774343
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Агнец за бортомКому не должен?

Что вы вообще несете?
Значит ты не в теме.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774356
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotikvadipok,

.. уберите разные порты, для CORS - это different origin ... потом сможете разрулить это либо в прокси, либо еще как .. если бы это было .Net Core, то там можно было бы прямо в Program.cs services.AddCors() .. в MVC не уверен, можно ли ...

Мне что в свойствах приложений поставить одинаковые порты?
Конфликта не будет?
А да пофигу, попробую.
Если не взлетит обратно поменяю, спасибо.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774369
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ошибка ((((((
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774370
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

..я погуглил, в обычном ASP.NET (не Core) тоже можно EnableCors, только пакет надо добавить ..

Включение запросов о происхождении в ASP.NET Web API 2
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774394
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipokМне что в свойствах приложений поставить одинаковые порты?
По умолчанию, нужно делать первый вариант, а не второй.
Вот из ссылки carrotik
авторЭти два URL-адреса у того же происхождения:
http://example.com/foo.html
http://example.com/bar.html
Эти URL-адреса имеют различное происхождение по сравнению с предыдущим два:
http://example.net -Другой домен
http://example.com:9000/foo.html -Другой порт
https://example.com/foo.html -Другую схему
http://www.example.com/foo.html -Другой поддомен
Тогда и разговора о кроссдоменных вообще не будет.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774429
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,

.. ну и кстати, если, как я понимаю, проект в стадии "попробовать", то почему бы сразу не поднять серверное приложение на .net Core, где этот CORS уже "в коробке" (ну и стильно-модно-молодёжно .. :) ) ..?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774467
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotikCORSдумаю ему не CORS нужен. Хотя согласен про core. WebAPI Там новый пошел.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774480
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123carrotikCORSдумаю ему не CORS нужен. Хотя согласен про core. WebAPI Там новый пошел.
..ну, как минимум убрать этот красный цвет из консоли, а там уж смотреть, какой JSON приходит-уходит в ангулар ... У меня, например, WebAPI на Core крутится под линуксом, и там удобнее (мне) запускать пул приложений на разных портах, а доступ разруливать через nginx-proxy ....
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774501
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotik,
Дак ты объясни, почему в демке два запроса на разные порты?
Сайт на одном и api на втором?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774513
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123carrotik,
Дак ты объясни, почему в демке два запроса на разные порты?
Сайт на одном и api на втором?

Абсолютно верно.
Проект один, там есть два приложения.
Приложение MVC создал первым, поэтому его стартовая страничка отображается при запуске.
Каждое приложение стартует по своим портом.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774540
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipokАбсолютно верно.не люблю когда в демке мешают все в кучу

vadipokПриложение MVC создал первым, поэтому его стартовая страничка отображается при запуске.
Каждое приложение стартует по своим портом.
Занафига?
Можно разделять портами, но ИМЕНЕМ ВЕБ ПРИЛОЖЕНИЯ будет профессиональнее.
То есть на порту 8080 сидят 50 веб приложений и никакого CORS.
?
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774662
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123vadipokАбсолютно верно.не люблю когда в демке мешают все в кучу

vadipokПриложение MVC создал первым, поэтому его стартовая страничка отображается при запуске.
Каждое приложение стартует по своим портом.
Занафига?
Можно разделять портами, но ИМЕНЕМ ВЕБ ПРИЛОЖЕНИЯ будет профессиональнее.
То есть на порту 8080 сидят 50 веб приложений и никакого CORS.
?

Ну что значит занафига?
Идет процесс познания.
Тут в любом случаи будут ошибки.
...
Рейтинг: 0 / 0
MVC; WEB API; AngularJS
    #39774681
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vadipok,
Не.
Hello world это всегда одна технология и ничего лишнего.
Междоменные это 8 класс в школе.
А ангуляр - Привет мир! это второй класс третья четверть.
Нельзя смешивать.
...
Рейтинг: 0 / 0
33 сообщений из 33, показаны все 2 страниц
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / MVC; WEB API; AngularJS
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]