title: How can I passing data from jquery codes to my project backend
body: <p>I did create a form and A submit button in my website</p>
  <p>but I do not know How can I passing data from javascript codes to My asp.net core codes</p>
  <p>My Html jquery css codes Here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      box-sizing: border-box;
  }
  body{
      padding:20px 25px 70px 25px;
  }
  #all-questions-preview&gt;.content{
      display: flex;
      flex-direction: column;
  }
  #all-questions-preview&gt;.content&gt;.question-container{
      width:100%;
      background: #fefefe;
      border-radius: 8px;
      box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
      padding:12px 18px 70px 18px;
      position: relative;
      margin-bottom:15px;
  }
  
  #all-questions-preview&gt;.content&gt;.question-container&gt;.question-title{
      color: #444;
      font-weight: bold;
  }
  #all-questions-preview&gt;.content&gt;.question-container&gt;.question-title::before{
      content: ":.";
  }
  
  #all-questions-preview&gt;.content&gt;.question-container&gt;.close{
      position:absolute;
      padding:5px;
      color: #f02f24;
      font-size: 1.3em;
      font-weight: bold;
      transform: rotate(45deg);
      top:10px;
      right:10px;
      background-color:#f6f6f6;
      border:none !important;
      outline: none !important;
      cursor:pointer;
      border-radius:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
  
  }
  #all-questions-preview&gt;.content&gt;.question-container input{
      background: none !important;
      outline: none !important;
      border:none;
      font-weight: bold;
  
  }
  #all-questions-preview&gt;.content&gt;.question-container .question-sentence{
      display:inline-block;
      width:100%;
      font-size:1.2em;
      padding:5px 10px;
      border-bottom:2px solid #71c9db;
      color: #61adbb;
  }
  #all-questions-preview&gt;.content&gt;.question-container .answer-span{
      display:inline-block;
      margin-right:20px;
      margin-top:20px;
      width:20%;
      min-width: 150px;
      position: relative;
      /*text-align: right;*/
      /*border:1px solid red;*/
  }
  #all-questions-preview&gt;.content&gt;.question-container .answer-input{
      display:inline-block;
      padding:5px 10px;
      border-bottom:2px solid #e171ae;
      color: #be3e89;
      width:calc(100% - 50px)
  }
  #all-questions-preview&gt;.content&gt;.question-container .answer-span .close{
      position:absolute;
      padding:5px;
      color: #f02f24;
      font-size: 1.2em;
      transform: rotate(45deg);
      top:15px;
      right:22px;
      background-color:transparent;
      border:none !important;
      outline: none !important;
      cursor:pointer;
      border-radius:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
  }
  
  #all-questions-preview&gt;.content&gt;.question-container .add-answer{
      display: inline-block;
      margin-top:15px;
      background-color: rgba(243, 200, 86, 0.48);
      border:2px solid rgb(221, 177, 84);
      color: rgb(153, 122, 58);
      padding:10px 20px;
      border-radius: 5px;
      cursor: pointer;
      position: absolute;
      right:15px;
      bottom:10px;
  }
  #all-questions-preview&gt; .add-question{
      display: inline-block;
      background-color: rgba(60, 243, 71, 0.48);
      border:2px solid rgb(69, 198, 59);
      color: rgb(32, 114, 31);
      padding:10px 20px;
      border-radius: 5px;
      cursor: pointer;
      position: absolute;
      margin-top: -62px;
      margin-left:10px;
      font-weight: bold;
  
  }
  #all-questions-preview&gt; .submit{
      display: block;
      width:90%;
      margin:15px auto 15px auto;
  
      background-color: rgba(74, 148, 243, 0.48);
      border:2px solid rgb(74, 148, 243);
      color: rgb(39, 77, 127);
      padding:15px 20px;
      font-weight: bold;
      box-shadow: 0 5px 5px 1px rgba(61, 122, 200, 0.5);
      border-radius: 5px;
      cursor: pointer;
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="content"&gt;
          &lt;form action="#" method="post" id="all-questions-preview"&gt;
              &lt;div class="content"&gt;
              &lt;/div&gt;
              &lt;button class="add-question" type="button"&gt;Add new question&lt;/button&gt;
              &lt;br&gt;
              &lt;button type="submit" class="submit"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;form action="test.php" id="all-questions-main" method="post" style="display: none"&gt;
              &lt;input type="hidden" name="data" id="questions-data"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script&gt;
          $(document).ready(function() {
              createQuestion($('#all-questions-preview')); //default one question added
              $('#all-questions-preview').on('submit', previewFormSubmit);
              $('#all-questions-preview .add-question').on('click', addQuestion);
  
          });
  
          function previewFormSubmit(ev) {
              ev.preventDefault();
              let data = [];
              getQuestions($(this)).each(function() {
                  let question = $(this);
                  let question_data = {};
                  question_data['question_sentence'] = question.find('.question-sentence').eq(0).val();
                  let question_answers = [];
                  getAnswers(question).each(function() {
                      let answer = $(this);
                      let answer_input = answer.find('.answer-input').val();
                      if (answer_input.trim() !== "") {
                          question_answers.push(answer_input)
                      }
                  });
                  question_data['question_answers'] = question_answers;
                  data.push(question_data);
              });
              $('#all-questions-main&gt;#questions-data').val(JSON.stringify(data));
              $('#all-questions-main')[0].submit();
          }
  
  
          function addAnswer(event) {
  
              let question_container = $(this).parents('.question-container').eq(0);
              createAnswer(question_container);
          }
  
          function createAnswer(question_container) {
              let answers = getAnswers(question_container);
              let answer_span = $("&lt;span&gt;").addClass('answer-span');
              let closeBtn = null;
              if (answers.length &gt; 0) {
                  closeBtn = $("&lt;button&gt;").attr({
                      type: 'button',
                      class: 'close'
                  }).text('+').on('click', deleteAnswer);
              }
              let answer_input = $("&lt;input&gt;").addClass('answer-input').attr({
                  type: 'text',
                  name: 'answer',
                  placeholder: 'answer' + (answers.length + 1)
              });
              if (answers.length === 0) {
                  answer_input.attr('required', 'required')
              }
              let container_answers = question_container.find('.answers-container').eq(0);
              answer_span.append(closeBtn, answer_input);
              container_answers.append(answer_span);
              return answer_span;
          }
  
          function getAnswers(question_container) {
              return (question_container.find(".answers-container .answer-span"));
  
          }
  
  
          function addQuestion(event) {
              let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
              createQuestion(all_questions_form);
          }
  
          function getQuestions(all_question_form) {
              return (all_question_form.find('.question-container'));
          }
  
          function createQuestion(all_questions_form) {
              let all_questions_form_content = all_questions_form.find("&gt;.content").eq(0);
              let questions = getQuestions(all_questions_form);
              let new_question = $("&lt;div&gt;").addClass('question-container');
              let question_title = $("&lt;h4&gt;").addClass('question-title').text('Question number' + (questions.length + 1));
              let closeBtn = null;
              if (questions.length &gt; 0) {
                  closeBtn = $("&lt;button&gt;").attr({
                      type: 'button',
                      class: 'close'
                  }).text('+').on('click', deleteQuestion);
              }
              let question_sentence = $("&lt;input&gt;").addClass('question-sentence').attr({
                  type: 'text',
                  name: 'question_sentence',
                  placeholder: 'question' + (questions.length + 1),
                  required: 'required'
              });
              let container_answers = $("&lt;div&gt;").addClass('answers-container');
              let add_answer_btn = $("&lt;button&gt;").addClass('add-answer').attr('type', 'button').text('Add answer').on('click', addAnswer);
  
              new_question.append(question_title, closeBtn, question_sentence, container_answers, add_answer_btn);
              all_questions_form_content.append(new_question);
              createAnswer(new_question);
              return new_question;
          }
  
  
          function deleteQuestion() {
              let question_container = $(this).parents('.question-container').eq(0);
              let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
              let questions = getQuestions(all_questions_form);
              if (questions.index(question_container) !== 0) {
                  question_container.fadeOut(200, function() {
                      $(this).remove();
                  })
              }
          }
  
          function deleteAnswer() {
              let question_container = $(this).parents('.question-container').eq(0);
              let answer_span = $(this).parents('.answer-span').eq(0);
              let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
              let answers = getAnswers(question_container);
              if (answers.index(answer_span) !== 0) {
                  answer_span.fadeOut(200, function() {
                      $(this).remove();
                  })
              }
          }
      &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In fact I want when The user clicks submit button The Data passes To Asp.net core codes</p>
  <p>Please help me, I have been involved in this issue for several days</p>
  <p>Thanks</p>