How to connect ajax jQuery result to C# variable

Question

I'm new to C#, JS, jQuery, etc. For a schoolproject I'm building a cinema-website with ASP.NET and C#.
I have come to the point that I think I'm close to the answer, but I can't figure it out.

What is the problem?
At the Index-page of the website the customer can pick a movie to go to the next screen to buy the tickets. There he needs to pick a moment of the movie from a dropdownmenu. The dropdownmenu-code looks like this:

<div class="form-group" style="width: 30%">
   @Html.LabelFor(m => Model.Showtime, new { @class = "control-label col-md-2" })
   <div>
      @Html.DropDownListFor(m => Model.Showtime!.StartAt, new SelectList(Model.ShowList, "Value", "Text"), "Select show", new { @class = "form-control", id = "showList"  })
   </div>
</div>

I've created a jQuery function that gets the picked Showtime from the dropdownmenu.
This function looks like this:

<script>
$("#showList").change(function() {
    
    var selectedVal = $(this).val();
   
    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: '/Orders/GetPickedShowtime/',
        data: {showTimeId: selectedVal},
    
        success:
        function(response) {
            
            response = JSON.stringify(response)
            $('#testShowtime').text(response)
        },
    
        error:
        function(response) {
          console.log("ERROR: ", response)
        }
    });
})
</script>

In the controller I wrote a function to get the picked Showtime object from the database:

public ActionResult<Showtime> GetPickedShowtime(int showTimeId) {
        
   var show = _context.Showtime!
      .Where(s => s.Id == showTimeId);

   return Json(show);
}

I used this code: $('#testShowtime').text(response) in my jQuery to test the function in my View with: <h4 id="testShowtime"></h4>. It works. It gives a Array back to the View, like:

[{"id":6987,"startAt":"2022-03-13T18:00:00Z","hallId":3,"movieId":1,"hall":null,"movie":null}]

GREAT! The function seems to work. But what I want to do now is to get the Object from this Json-string into a C# variable. If the customer selects a showtime and some tickets, a button brings them to the next page where the seatselection begins. So the variable with the picked Showtime needs to go there by clicking a button.... And now I'm stuck.

Could someone help me out of this puzzle? I'll buy you a beer :P

Answer 1

You can use Session variable to store your StoreTime on the server itself. AJAX is used to update a portion of the page without reloading the entire page and in your case, you are unnecessarily complicating things. You can do the following:

In your method, define a Session variable which is always updated when the user selects from the dropdown:

public ActionResult<Showtime> GetPickedShowtime(int showTimeId) {
        
   var show = _context.Showtime!.Where(s => s.Id == showTimeId);

   if(show != null)
   {
     Session["myCurrentShow"] = show;
   }

   return Json(show);
}

Now once your Session is defined, you can access it on your next ActionMethod. I am giving an example how you would use this Session variable on your last step:

public ActionResult ConfirmShowTime() {

   if(Session["myCurrentShow"] != null)
   {
     Showtime showtime = new Showtime();
     //Cast your session here to get the values
     showtime = (Showtime)Session["myCurrentShow"];
   }  
   
   // Your logic
   return View();
}