В этой статье мы узнаем о загрузке данных из базы данных в MVC с помощью веб-API. Мы будем использовать Visual Studio 2015 для создания веб-API и выполнения операций. В этом проекте мы собираемся создать базу данных и таблицу с именем tbl_Subcribers, которая фактически содержит список данных. Мы будем использовать наш обычный jQuery ajax для вызова Web API, как только данные будут готовы, мы отформатируем их в HTML-таблице. Я надеюсь, вам понравится это.
Фон
Что такое веб-API?
Web API — это своего рода платформа, которая делает создание HTTP-сервисов проще, чем когда-либо. Он может использоваться практически везде, включая широкий спектр клиентов, мобильных устройств, браузеров и т. Д. Он содержит обычные функции MVC, такие как модель, контроллер, действия, маршрутизация и т. Д. Он поддерживает все HTTP-глаголы, такие как POST, GET, DELETE, PUT.
Почему веб-API
Изображение предоставлено: blogs.msdn.com
Почему веб-API
Изображение предоставлено: forums.asp.net
Использование кода
Мы создадим наш проект в Visual Studio 2015. Чтобы создать проект, нажмите Файл-> Создать-> Проект.
CRUD_in_MVC_Using_Web_API
CRUD_in_MVC_Using_Web_API
Создать элемент управления
Теперь мы создадим контроль в нашем проекте.
CRUD_in_MVC_Using_Web_API_Adding_Control
Выберите пустой API-контроллер в качестве шаблона.
CRUD_in_MVC_Using_Web_API_Select_APIControl
Как видите, мы выбрали пустой API-контроллер вместо обычного контроллера. Есть несколько различий между нашим обычным контроллером и пустым контроллером API.
Контроллер против Пустого Контроллера API
Контроллер обычно отображает ваши взгляды. Но контроллер API возвращает данные, которые уже сериализованы. Действие контроллера возвращает JSON () путем преобразования данных. Вы можете избавиться от этого с помощью контроллера API.
Узнайте больше: Controller VS API Controller
Создать модель
Как вы все знаете, мы пишем логику в классе под названием модель в MVC. Поэтому следующий шаг, который нам нужно сделать, это создать модель.
Щелкните правой кнопкой мыши на Model и выберите Add new Items, а затем Class. Назовите это подписчиками. Мы собираемся обработать список подписчиков, которые все подписаны на ваш сайт.
Теперь мы создадим базу данных для нашего приложения.
Создать базу данных
CRUD_in_MVC_Using_Web_API_Create_Database
Создав базу данных, вы можете увидеть ее в папке App_Data.
CRUD_in_MVC_Using_Web_API_Created_DB
Теперь добавим новую таблицу в нашу базу данных.
CRUD_in_MVC_Using_Web_API_Adding_Table
CREATE TABLE [dbo].[Table]
(
[SubscriberID] INT NOT NULL PRIMARY KEY,
[MailID] NVARCHAR(50) NOT NULL,
[SubscribedDate] DATETIME2 NOT NULL
)Кажется, наша база данных уже готова.
Загрузка данных из базы данных с использованием веб-API
Следующее, что нам нужно сделать, — это создать модель данных сущности ADO.NET. Так что мы будем делать это? Щелкните правой кнопкой мыши по вашей модели и нажмите на добавление нового элемента, в появившемся диалоговом окне выберите ADO.NET Entity Data Model. Назовите этот файл, здесь я дал имя SP. И на следующих шагах выберите таблицы, хранимые процедуры и представления, которые вы хотите.
Загрузка данных из базы данных с использованием веб-API
Таким образом, новый файл будет создан в папке вашей модели.
Теперь мы создадим вызов ajax, чтобы вы могли вызывать веб-API. Мы будем использовать обычный Ajax с типом GET, так как нам нужно просто получить данные.
Элемент управления веб-API не возвращает ни результата действия, ни результата json, поэтому мы должны сделать это вручную. Мы будем использовать файл index.cshtml в качестве нашего представления
Мы будем называть наш веб-API следующим образом из представления Index.cshtml.
@section scripts
{
<script>
$(document).ready(function () {
$.ajax(
{
type: 'GET',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
url: 'http://localhost:3064/api/Subscribers',
success: function (data) {
try {
debugger;
var html = '<table><thead><th>Mail ID</th><th>Subscription ID</th><th>Subscription Date</th></thead><tbody>';
$.each(data, function (key, val) {
debugger;
html += '<tr><td>'
+ '<a ' + 'href="mailto:' + val.MailID + '">' + val.MailID + '</a>' +
'</td><td>' + val.SubscriberID + '</td><td>' + val.SubscribedDate + '</td></tr>';
});
html += '</tbody></table>';
$('#myGrid').html(html);
} catch (e) {
console.log('Error while formatting the data : ' + e.message)
}
},
error: function (xhrequest, error, thrownError) {
console.log('Error while ajax call: ' + error)
}
}
);
});
</script>
}Как только мы получим данные в успешной части вызова ajax, мы формулируем данные в таблице HTML и привязываем отформатированный html к элементу myGrid.
<div id="myGrid"></div>Пожалуйста, обратите внимание, что URL-адрес, который вы даете, должен быть правильным, иначе у вас будут некоторые ошибки. Ваши действия не будут работать
Таким образом, мы называем наш веб-интерфейс API как http: // localhost: 3064 / api / Подписчики. Вы помните, что мы уже создали контроллер? Теперь мы вернемся к этому. Поэтому нам нужно создать действие, которое возвращает общий список подписчиков из базы данных, поэтому для этого мы напишем несколько строк кода следующим образом.
public List<tbl_Subscribers> getSubscribers()
{
try
{
using (var db = new SibeeshPassionEntities())
{
Subscriber sb = new Subscriber();
return (sb.getSubcribers(db).ToList());
}
}
catch (Exception)
{
throw;
}
}Здесь Subscriber — это наш класс модели. Чтобы получить ссылку на класс вашей модели в контроллере, вам необходимо включить пространство имен модели. Мы получаем список данных в типе tbl_Subcribers. Теперь сосредоточимся на модельном классе.
Вы можете увидеть коды действий модели здесь.
public List<tbl_Subscribers> getSubcribers(SibeeshPassionEntities sb)
{
try
{
if (sb != null)
{
return sb.tbl_Subscribers.ToList();
}
return null;
}
catch (Exception)
{
throw;
}
}Это вернет данные, которые доступны в таблице tbl_Subcribers в БД SibeeshPassion. Кажется, все установлено. Теперь, что еще нам нужно сделать? Да, нам нужно создать несколько записей в таблице. Пожалуйста, смотрите запрос вставки здесь.
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (1, N'sibikv4u@gmail.com', N'2015-10-30 00:00:00')
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (2, N'sibeesh.venu@gmail.com', N'2015-10-29 00:00:00')
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]Итак, данные вставлены. Не так ли?
Загрузка данных из базы данных с использованием веб-API
Ты знаешь?
Как у нас есть RouteConfig.cs в MVC, у нас есть другой файл класса с именем WebApiConfig.cs в Web API, который фактически устанавливает маршруты.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);Итак, запустим ли мы наш проект и увидим ли выход? Прежде чем приступить к запуску, я предлагаю вам стилизовать таблицу HTML, применив несколько CSS следующим образом.
<style>
table,tr,td,th {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
margin:10px;
}
</style>Если все пойдет хорошо, вы получите вывод следующим образом.
Загрузка данных из базы данных с использованием веб-API
Вот и все. Мы сделали это. Удачного кодирования!
Вывод
Я что-то упустил, что вы думаете, что нужно? Вы уже пробовали Web API? Вы когда-нибудь хотели выполнить это требование? Не могли бы вы найти этот пост полезным? Надеюсь, вам понравилась эта статья. Пожалуйста, поделитесь своими ценными предложениями и отзывами.