Загрузка данных из базы данных с использованием веб-API

Кажется, наша база данных уже готова.

Загрузка данных из базы данных с использованием веб-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>
 
   }

<div id="myGrid"></div>

public List<tbl_Subscribers> getSubscribers()
        {
            try
            {
                using (var db = new SibeeshPassionEntities())
                {
                    Subscriber sb = new Subscriber();
                    return (sb.getSubcribers(db).ToList());
                }
                 
            }
            catch (Exception)
            {
 
                throw;
            }
        }

public List<tbl_Subscribers> getSubcribers(SibeeshPassionEntities sb)
       {
           try
           {
               if (sb != null)
               {
                   return sb.tbl_Subscribers.ToList();
               }
               return null;
           }
           catch (Exception)
           {
               throw;
           }
       }

INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (1, N'[email protected]', N'2015-10-30 00:00:00')
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (2, N'[email protected]', N'2015-10-29 00:00:00')
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

<style>
        table,tr,td,th {
            border:1px solid #ccc;
            border-radius:5px;
            padding:10px;
            margin:10px;
        }
 
    </style>