HTTP GET Request from localhost to an external API

Question

I am new to C# and I'm building a Web App. I followed the tutorial on the Microsoft site for building Razor Pages. Now I want to add my own HTML code which makes a request to the GIT API and fetches data. This data I want to add to the MSSQL database.

Is it possible to make an HTTP GET from the web app on localhost to the GIT API? Where do I include the script in visual studio? Including it in any of the index.cshtml or validation.cshtml does not seem to work. Here is what I want to add:

<button id="java" class="btn btn-outline-dark">Java</button>
<button id="ios" class="btn btn-outline-dark">ios</button>
<button id="android" class="btn btn-outline-dark">android</button>
<button id="php" class="btn btn-outline-dark">php</button>
<button id="python" class="btn btn-outline-dark">python</button>
<table></table>
 <script type="text/javascript">
        var table = $('<table>').addClass('table '); 
        $('button').on('click', function() {
        $.ajax({
                headers:{
                          "Content-Type": "application/json",
                          "Accept": "application/json"
                       },
                type: 'GET',
                url: 'https://api.github.com/search/repositories?q=repos+topic:'+ $(this).attr('id') +'&sort=stars&order=desc&per_page=10',
                success: function(data){

                            table.empty();
                            table.append("<thead><tr><th>Avatar</th><th>Name</th><th>Score</th><th>URL</th><th>Updated at</th></tr></thead>");
                            $.each(data.items,function(i,object){
                                        var row = $('<tr>').addClass('table-primary');
                                        row.append('<td><img src='+object.owner.avatar_url+'height=50px width=50px/></td>')
                                        row.append('<td>'+object.name+'</td>'+'<td>'+object.score+'</td>'+'<td>'+object.url+'</td>'+'<td>'+object.updated_at+'</td>');      
                                        table.append(row);

                                    }); 
                                table.append('</table>');
                                $('table').replaceWith(table);
                        }   

  });

});
</script>

Where do I add the script in my project, how do I put the response I get to the database? I learnt about scaffolding in the tutorials, how do I link my response data to the database methods generated? Please point me in the right direction to learn. Thank you :-)

What is the error you are getting, do you see API call going in the network tab of the browser? — Ipsit Gaur
– Ipsit Gaur, Commented Jul 12, 2018 at 4:46
Have you tried attaching the debugger in the browser to see whether your function is getting called or not? — Ipsit Gaur
– Ipsit Gaur, Commented Jul 12, 2018 at 4:49
I assume that you have included jQuery inside your page correctly and you are also clicking on an HTML element button — Ipsit Gaur
– Ipsit Gaur, Commented Jul 12, 2018 at 5:01
I included the java script in the js file specified by visual studio,it works now.Why does adding the logic in index.html not work?Is this a error I could have made or is it true when using visual studio? — Abhilash Gopalakrishna
– Abhilash Gopalakrishna, Commented Jul 12, 2018 at 5:17

Yves Israel · Accepted Answer · 2018-07-12 05:13:42Z

as far as i know,

it is better to wrap your script in the window load function like this:

$(function(){ // your javascript code }).
In Asp.net core, you can put your script directly inside tags either at the bottom of your layout.cs file or in any view file (.cshtml file) but within a @section Scripts {} block. Make sure you have this line in the layout.cs file

@RenderSection("Scripts",required:false);

Preferably, you should put such logic in the server. I'm not sure the client app would be allowed to make a cross-domain request to github. I'd suggest you to make the http GET request in the server and send back json data to the client, where your script will kick in and update the table.

On the server, you can use the HttpClient class to make the GET request to your github endpoint, parse the response to Json if needed, then send that to the client.

On the client, all you need is to call your server endpoint instead of github directly.

Collectives™ on Stack Overflow

HTTP GET Request from localhost to an external API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related