Content Sharing using Google Drive ASP.NET MVC

Hi Guys,
I made a small content sharing portal using Google Drive and ASP.NET MVC Hope you like it.
Things you must do before starting, 

1) Register as a developer in google - https://developers.google.com/
2) Create API Key and Client AUTH ID - https://developers.google.com/drive/v3/web/enable-sdk
3) Upload content to your google drive and grant public access

4) Create an ASP.NET MVC web application using Visual Studio
5) Create Page to Select and Save the ID of the uploaded content - Store.cshtml

@model BE.Video 

<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    $(document).ready(function () {
        $("#gdriveSelect").click(function (event) {
            event.preventDefault();
            // do something
        });
    });


            function onApiLoad() {
                gapi.load('auth', { 'callback': onAuthApiLoad });
                gapi.load('picker');
            }
            function onAuthApiLoad() {
                window.gapi.auth.authorize({
                    'client_id': 'Your client ID',
                    'scope': ['https://www.googleapis.com/auth/drive']
                }, handleAuthResult);
            }
            var oauthToken;
            function handleAuthResult(authResult) {
                if (authResult && !authResult.error) {
                    oauthToken = authResult.access_token;
                    createPicker();
                }
            }
            function createPicker() {
                var picker = new google.picker.PickerBuilder()
                    //.addView(new google.picker.DocsUploadView())
                    .addView(new google.picker.DocsView())
                    .setOAuthToken(oauthToken)
                    //.setDeveloperKey('Your Key')
                    .setCallback(pickerCallback)
                    .build();
                picker.setVisible(true);
            }

            function prepareFrame(id) {
                
                var ifrm = document.createElement("iframe");
                ifrm.setAttribute("src", 'https://drive.google.com/file/d/' + id + '/preview');
                ifrm.style.width = "640px";
                ifrm.style.height = "480px";
                document.getElementById("iframDiv").appendChild(ifrm);
            }

            function pickerCallback(data) {
                var url = 'nothing';
                if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                    var doc = data[google.picker.Response.DOCUMENTS][0];
                    url = doc[google.picker.Document.URL];
                    document.getElementById('gdriveId').value = doc.id;
                    //prepareFrame(doc.id);
                }
                //var message = 'You picked: ' + url;
                
            }
</script>

    <div id="result"></div>
<div id="iframDiv"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
@*@using (Html.BeginForm("Store", "Business", FormMethod.Post))*@

@using (Ajax.BeginForm("Store", "Business", new AjaxOptions { HttpMethod = "POST" }))

{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Video</h4>
        <hr />

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)
        @Html.HiddenFor(model => model.CreatedBy)
        @Html.HiddenFor(model => model.DateCreated)
        <div class="form-group">
            @Html.LabelFor(model => model.GDriveID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                

                <div class="input-group">
                    
                       @Html.EditorFor(model => model.GDriveID, new { htmlAttributes = new { @class = "form-control", @id = "gdriveId" } })
                    @Html.ValidationMessageFor(model => model.GDriveID, "", new { @class = "text-danger" })
                        
                   
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="gdriveSelect" onclick="onApiLoad()">Select from G Drive</button>
                    </span>
                </div>


               
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </div>
        </div>

}

6) Create Page to View contents - Videos.cshtml

@model IEnumerable<BE.Video>

<script type="text/javascript">
    $(document).ready(function () {
        prepareFrame($("#hdFirstFileID").val());

    });

    function prepareFrame(id) {
        $("#iframDiv").html("");
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("src", 'https://drive.google.com/file/d/' + id + '/preview');
        ifrm.style.width = "640px";
        ifrm.style.height = "480px";
        document.getElementById("iframDiv").appendChild(ifrm);
    }
</script>
<div class="row">
    <div class="col-md-7">
        <div id="iframDiv"></div>
    </div>
    <div class="col-md-5">
        <div class="list-group">
            @foreach (var video in Model)
            {
                if (Model.First() == video)
                {
                    <input type="hidden" id="hdFirstFileID" value="@video.GDriveID" />
                }
                <a onclick="prepareFrame('@video.GDriveID')" class="list-group-item">
                    <h4 class="list-group-item-heading">@video.Name</h4>
                    <p class="list-group-item-text"> @video.Description </p>
                </a>
            }
            
           
        </div>
    </div>
</div>