How do I pass the value of the Tumb variable to my controller?

Question

How do I pass the value of the Thumb variable to my controller? The two input fields then pass normally, but the Tumb variable has to pass the video Image Url.

Controller

  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult SalvarItens(string titulo, string video_url, 
   string thumb) 
    {
        var item = new Dados_Video() 
        {
            Titulo = titulo,
            Thumb = thumb,
            UrlVideo = video_url
        };

            db.Dados_Video.Add(item);
            db.SaveChanges();

        return RedirectToAction("Index");
    }

My View

  @using (Html.BeginForm("SalvarItens", "Home", FormMethod.Post, new { 
    @class ="form-horizontal", role = "form" }))
        {
            @Html.AntiForgeryToken()
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger"})

           <input type="text" id="titulo" name="titulo"/>
           <input type="url" id="video-url" name="video_url"/>
           <input type="hidden" id="thumb" name="thumb"  />

           <input type="submit" value="Cadastrar" />
        }

js function

   function generateCode(url) {
        var video_id = url.split('v=')[1];
        var ampersandPosition = video_id.indexOf('&');
        if (ampersandPosition != -1) {
            video_id = video_id.substring(0, ampersandPosition);
        }
        return video_id
    }

    function generateThumb(code) {
        return 'https://img.youtube.com/vi/' + code + '/1.jpg';
    }


     var thumb = generateThumb(generateCode(video_url));

Ajax Post

   jQuery(document).ready(function () {

        $("#bt").on("click", function (event) {
            debugger;
            if (grecaptcha.getResponse().length !== 0) {

                var video_url = $('#video-url').val();
                var thumb = generateThumb(generateCode(video_url));
                var titulo = $('#titulo').val();

                $.ajax({
                    url: "/Home/SalvarItens",
                    data: { titulo: titulo, video_url: video_url, thumb: 
  thumb },
                    type: "POST",
                    datatype: "Json",
                    success: function (data) {
                        if (data.Resultado > 0) {

                        }
                    }
                });

                alert("Td certo");
            }
            else
                alert("Voce é um robo?");

        });


    });

Answer 1

Post via Ajax poulando the expected object, or add an Hidden field that will store the value of Thumb and popule via JS

View

   @using (Html.BeginForm("SalvarItenss", "Home", FormMethod.Post, new { 
   @class ="form-horizontal", role = "form" }))
    {
        @Html.AntiForgeryToken()
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger"})

       <input type="text" id="titulo" name="titulo"/>
       <input type="url" id="video-url" name="video_url"/>

       <input type="hidden" id="thumb" name="thumb" />

       <input type="submit" value="Cadastrar" />
    }

Js function

var thumb = generateThumb(generateCode(video_url));
document.getElementById("thumb").value = thumb;