Question

looking for a bit of Ajax help here…

I have quite a complex view which is built on quite a complex ViewModel.

On the page I have 3 columns where each column represents a full journey which then breaks down to show the individual flights.

Each flight is represented by a box containing details (start and end locations, departure time, arrival time, operator etc)
The box also contains a dropdown list of all other possible flights that could be taken from this location (e.g. you might want to hang around the airport for an additional 6 hours, so you could choose a later flight!)

Anyway, by changing one possible flight, I’m going to have to update the entire column, because taking a later flight will mean subsequent flights might not be possible anymore.

Which leads to my question – is it possible for me to pass a complex viewmodel back to the controller via jQuery? Can it be done using partial views that are nested inside foreach loops?
All I want to do is update the column via ajax, but I can’t see how to pass the viewmodel back. I’m trying to avoid doing a full page reload because it will be quite a cumbersome search so ajax updates would be ideal

Here is some cut-down code for the process:

Code for View (index.cshtml) – the jQuery is found here within the main view

@foreach (var item in Model)
{
    <div id="column-@groupCount">
        @Html.Partial("_JourneyColumnPartial", item)
    </div>
}

<script type="text/javascript">
    $(".flightItem").change(function (event) {
        alert(event.target.id);
        var cSelected = $(this).val();
        alert(cSelected);
        $.ajax({
            url: "/Search/GetChangeInfo",
            contentType: "application/json",
            type: "POST",
            dataType: "json",
            data: ({ cID: cSelected }),
            success: function (display) {
            }
        });
    });
</script>

Code for first partial view (_JourneyColumnPartial.cshtml)

<div class="routeContainer">
    @Html.Partial("_ColumnItemPartial", Model)
</div>  

Code for child partial view (_ColumnItemPartial.cshtml)

@{
    int journeyNumber = 1;
}
@foreach (var journey in Model.SelectedJourneys)
{
    List<JourneyDetails> list = Model.Journeys.Where(j => j.JourneyDateAndTimeID != journey && j.DepartureID == hub.DepartureID && j.ArrivalID == hub.ArrivalID).OrderBy(j => j.JourneyDateAndTime).ToList();
    <div class="box">
        <div class="journeytimes">
            <b>Depart</b> @hub.DepartureDate<br />
            <b>Arrive</b> @hub.ArrivalDate<br />
        </div>
        <div class="boxcontrols">
            <select class="flightItem" id="flightItem_@{<text>@Model.ColumnNumber</text><text>_</text><text>@journeyNumber</text>}">
                @foreach (var flight in list)
                {
                    <option value="@flight.JourneyID">@flight.ProviderName - @flight.JourneyDateAndTime</option>                                                    
                }                                            
            </select>

        </div>
        <!-- end of box -->
    </div>
    journeyNumber++;    
    <!-- end of box wrap -->
}

I know I’ve not included details about the ViewModel, but it is quite complex and includes generic lists of other classes so it is quite large. The trigger for the ajax/jQuery is the change event of the dropdown list.

If this makes absolutely no sense, feel free to say and I’ll try and clarify what I’m looking for!

Thanks

Answer 1

It is possible by sending your data as json in your jquery call.

You can achieve this by simply create a javascript object like your ViewModel, and convert that javascript object to string by Json.Stringify method and set the string value to the data in the ajax call.