title: update fields and table from database based on drop down menu selection on asp.new MVC without refreshing the page
body: <p>I am trying to update my student details based on the ID that is selected from the drop-down menu. I am using ASP.net MVC.  I am very new to MVC and coding so please dumb down your answer as much as possible :)</p>
  
  <p>I think ajax is involved someone but I would really appreciate if someone could give me some provide some example code so I know how to get started If someone could help that would be very much  appreciated -  </p>
  
  <p><a href="https://i.stack.imgur.com/SsjHz.png" rel="nofollow noreferrer">This is a screen shot of the page I am creating </a>
  <strong>Index Code Below</strong></p>
  
  <p><code>@model ResultModel
  @using WebApplication3.Models</code></p>
  
  <p><code>@{
      Layout = null;
  }</code></p>
  
  <p></p>
  
  <pre><code>            &lt;div class="container"&gt;
                  &lt;div id="flashMessage"&gt;
                     New Student Details!
                  &lt;/div&gt;
                  &lt;form&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="exampleFormControlSelect1"&gt;Please Choose Student&lt;/label&gt;
                          &lt;select class="form-control" id="StudentName"&gt;
  
                              &lt;!--Drop down menu--&gt;
  
                              @foreach (var item in Model.Student)
                              {
                              &lt;option&gt;@item.StudentNumber&lt;/option&gt; }
  
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;/form&gt;
                      &lt;!----------------&gt;
  
  
  
                  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
  
                  &lt;!--   Student information form      --&gt;
                  &lt;h4 &gt;Student information&lt;/h4&gt;
                  &lt;p id="cat"&gt;This will display the students information based on what is selected from the drop down menu&lt;/p&gt;
                  &lt;code&gt;SELECT `title`,`first name`,`surname` FROM `STUDENT REGISTER` WHERE `Student number` = 'OPTION SELECTED' &lt;/code&gt;
                  &lt;form method="post"&gt;
  
                      &lt;div class="form-row"&gt;
                          &lt;label for="exampleInputEmail1"&gt;Title&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="title" aria-describedby="emailHelp" placeholder="Person n"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="form-row"&gt;
                          &lt;label for="exampleInputEmail1"&gt;Name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="firstname" aria-describedby="emailHelp" placeholder="student Name"&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="form-row"&gt;
                          &lt;label for="exampleInputEmail1"&gt;Surname&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="surname" aria-describedby="emailHelp" placeholder="Surname"&gt;
  
                      &lt;/div&gt;
  
                      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
  
                      &lt;!--   Student notes      --&gt;
                      &lt;h4 id="test"&gt;Student Notes&lt;/h4&gt;
                      &lt;p&gt;This will display all the notes for that studend - these need to have edit button within the table to edit the fields but also have option for drop&lt;/p&gt;
                     &lt;code&gt;SELECT `Date of note`,`Staff Member`,`notes` FROM `student Notes` WHERE `Student number` = option selected &lt;/code&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;table class="table table-striped" id="myTable"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th scope="col"&gt;date&lt;/th&gt;
                                  &lt;th scope="col"&gt;Note ID&lt;/th&gt;
                                  &lt;th scope="col"&gt;Notes&lt;/th&gt;
                                  &lt;th scope="col"&gt;Staff ID&lt;/th&gt;
  
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
  
  
  
  
                                  @foreach (var item in Model.Notes)
                                  {
                                  &lt;tr&gt;
  
  
                                    &lt;td&gt;@item.User&lt;/td&gt;
                                      &lt;td&gt; @item.Notes&lt;/td&gt;
                                      &lt;td&gt; @item.Id&lt;/td&gt;
  
                                      &lt;td&gt; @item.Staff&lt;/td&gt;
  
                                  &lt;/tr&gt;
                                  }
  
  
                              &lt;/tbody&gt;
  
                          &lt;/table&gt;
  
                      &lt;br /&gt;  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
                      &lt;input class="btn btn-primary btn-lg" type="submit" value="Delete Student"&gt;
                      &lt;input class="btn btn-primary btn-lg" type="submit" value="Edit Student"&gt;
  
                  &lt;/form&gt;
  
  
     &lt;/div&gt;     
  
  
  
      &lt;div&gt;&lt;/div&gt;
  
  
  
  
      &lt;!--   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;--&gt;
  
  
      &lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  
  
  
  
      &lt;script type="text/javascript"&gt;
          $("#flashMessage").hide();
  
  
  
  
  
  
          $(document).ready(function () {
              $("#StudentName").change(function () {
  
  
  
  
                  const sSname = document.getElementById("StudentName").value
  
                  $('#title').val("Should Display title");
                  $('#firstname').val("Should Display first Name");
                  $('#surname').val("Should display last name");
  
  
  
  
  
                    //testing jquery - no longer in use just keeping for refrence.
                    // $("#test").text("Hello world!"); //   alert("Selected value is : " + document.getElementById("StudentName").value);     // $("#test").hide();
                    // $("#flashMessage").slideDown(1000).delay(2000).slideUp(1000);
  
                });
  
  
  
          });
  
  
  
  
          //change date to sort by dd/mm/YYYY
          jQuery.extend(jQuery.fn.dataTableExt.oSort, {
              "date-uk-pre": function (a) {
                  if (a == null || a == "") {
                      return 0;
                  }
                  var ukDatea = a.split('/');
                  return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
              },
  
              "date-uk-asc": function (a, b) {
                  return ((a &lt; b) ? -1 : ((a &gt; b) ? 1 : 0));
              },
  
              "date-uk-desc": function (a, b) {
                  return ((a &lt; b) ? 1 : ((a &gt; b) ? -1 : 0));
              }
          });
  
          //select the the tabe and field where the formating is allplied
          $('#myTable').dataTable({
              columnDefs: [
                  { type: 'date-uk', targets: 0 }
              ]
          });
  
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>