ReSQL.ru
     
powered by simpleCommunicator - 2.0.51     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / MVC; WEB API; AngularJS
25 сообщений из 33, страница 1 из 2
  1  все
MVC; WEB API; AngularJS
    #39774211
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 08:44
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774212
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Админ, удалите плиз дубль.
...
Рейтинг: 0 / 0
15.02.2019, 08:45
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774218
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
vadipok,

Почему запросы на разные порты?
...
Рейтинг: 0 / 0
15.02.2019, 09:00
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774235
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 09:46
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774248
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
vadipokНу у Web API свой порт стартует во время запуска приложения.я спросил зачем? Вы не ответили.
Это не приветствуется по архитектуре и безопасности.
Вот тоже web api:
https://www.sql.ru:8080/myWebApi/get-users
...
Рейтинг: 0 / 0
15.02.2019, 10:09
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774252
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
vadipok,
Стандатно это все запросы клиента напр. Ангуляра к одному домену и порту.
Так у вас?
...
Рейтинг: 0 / 0
15.02.2019, 10:13
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774259
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
vadipok,

1. Зачем ты вывалил шарповский код, если у тебя ошибки в консоли браузера?
2. Почему ты не показал AJS код, тем более, что у тебя ошибки в консоли браузера?
3. http://localhost:59216/ - ты реально считаешь, что твоё приложение хостится у всех здесь присутствующих на локалхосте?? ))))
4. $http.get(...).success - это что еще за синтаксис??
...
Рейтинг: 0 / 0
15.02.2019, 10:23
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774260
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 10:23
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774273
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
vadipokВесь код для ангуляра выглядит так:по коду клиена нее подскажу. Это в ветку JS.
Меня интересовало отсутствие кроссдоменных запросов, если это твой случай.
...
Рейтинг: 0 / 0
15.02.2019, 10:39
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774275
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 10:42
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774282
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
vadipok,

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

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


vadipokПеределал согласно тынц :
Я не врубаюсь, откуда в демке кросс запросы?
...
Рейтинг: 0 / 0
15.02.2019, 10:53
| Ответить | Цитировать | Написать  
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
15.02.2019, 10:58
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774307
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Агнец за бортомvadipok,

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

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

Спасибо, но вылезла другая ошибка.
...
Рейтинг: 0 / 0
15.02.2019, 11:12
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774308
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 11:13
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774314
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Агнец за бортом,
Тебе. Ты же шаришь в ангуляре.
Там пример не должен делать кросс запрос, но ниже текст: "запускаем.... Ошибка".
Разве в демке и тут есть кросс запрос?
...
Рейтинг: 0 / 0
15.02.2019, 11:17
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774316
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
vadipok,
Дай вкладку Сеть скрин в отладчике
...
Рейтинг: 0 / 0
15.02.2019, 11:18
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774325
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Petro123vadipok,
Дай вкладку Сеть скрин в отладчике
...
Рейтинг: 0 / 0
15.02.2019, 11:23
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774338
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
Petro123Там пример не должен делать кросс запрос

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

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

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

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

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

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

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

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

Включение запросов о происхождении в ASP.NET Web API 2
...
Рейтинг: 0 / 0
15.02.2019, 12:02
| Ответить | Цитировать | Написать  
MVC; WEB API; AngularJS
    #39774394
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
15.02.2019, 12:41
| Ответить | Цитировать | Написать  
25 сообщений из 33, страница 1 из 2
  1  все
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / MVC; WEB API; AngularJS
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=18&msg=39774260&tid=1355041]:
 0ms
get settings:
 8ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 129ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 58ms
get tp. blocked users:
 1ms
others: 242ms
total:  472ms
созд. / загр.: 472ms
x
x
Закрыть


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