How would I go about displaying data from one view in another view

Question

Sorry for the confusing title, i'm having trouble trying to explain what I am trying to achieve. I have a view, that currently displays 'Trips' from my database (Destination, Type, Price etc). I have used an actionlink and my aim is to be able to select a trip, click the actionlink and be taken to a 'booking' page. The booking page will display the information for the actionlink selected, and I will add a drop down list to select the number of people going on the trip.

What is the best way to achieve this? Would a session be viable here? I'm completely new to MVC and am still trying to wrap my head around the way it works! Thanks in advance to anyone who reads this!

TripController code -

namespace WebApplication5.Controllers
{
public class TripController : Controller
{
    // GET: Trip
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult List()
    {
        List<Trips> trips = new List<Trips>();
        using (SampleModel dc = new SampleModel())
        {
            trips = dc.Trips.ToList();
        }
            return View(trips);
    }
    public ViewResult Booking()
    {

        return View();
    }
}
}

TripsModel code -

[Table("Trips")]
public partial class Trips
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.None)]
    public int TripID { get; set; }

    [StringLength(50)]
    public string Destination { get; set; }

    [StringLength(50)]
    public string Type { get; set; }

    public int? Price { get; set; }
}

Trip ListView code -

@model List<WebApplication5.Models.DB.Trips>

@{
ViewBag.Title = "List of trips";
var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.All);
}

<h2>List of Trips</h2>

<div id="content">
@grid.GetHtml(
            tableStyle: "webgrid-table",
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-row",
            rowStyle: "webgrid-row-style",
            columns: grid.Columns(
                grid.Column(columnName: "TripID", header: "TripID"),
                grid.Column(columnName: "Destination", header:     "Destination"),
                grid.Column(columnName: "Type", header: "Type"),
                grid.Column(columnName: "Price", header: "Price"),               
                grid.Column(columnName: "Book", format: (item) =>     Html.ActionLink("Book", "Booking", new { id = item.TripID }))
                ))

</div>

TripBookingView code -

@model WebApplication5.Models.DB.Trips

Answer 1

so the simplest idea is to write a script function like

 @section scripts{
<script>
$(function(){
$('#book').on('click',function(){
 windows.location.href('@url.ActionLink('Booking','Trip',new{price = price}))
})
})
<script>
}

and in the Controller side

public Task ActionResult Booking(int price)
{
//Do your stuff
}

Answer 2

Instead of giving Button outside you can render the button/ link in each row of the grid as below

@grid.GetHtml(columns: new [] {
grid.Column(
"",
header: "Actions",
format: @<text>@Html.ActionLink("Book", "Book", new { id=item.TripID})</text> ) });

and in controller change your controller to

public ActionResult Book(int TripID)
{
  //bring required data from DB for the TripID you received
}