Core 2 Razor Page - AJAX and Partial Views

Question

I have a Core 2 MVC web app which I am trying to add some Ajax into.

I have a Create view which loads a standard web form. What makes this a bit different to what I have learned/done so far is that I would like to add some semi-dynamic content to the page.

The ViewModel for the page is a bunch of simple properties, but part of it is also a nested collection.

I am trying to dynamically add values into the nested collection via a modal, and then reload the partial view to reflect what I have added without causing a page reload - I only want to reload the partial view and close the Modal.

I can see the JS is actioning the request and firing the call to the controller and getting a 200 response but it is not closing the modal or reloading the partial view with the data from the Modal.

There is something I am definitely not getting here. Can anyone advise?

ViewModel

public class RaceViewModel
    {
        public Race RaceData { get; set; }
        public ObservableCollection Currencies { get; set; }
        public CurrencyDetails BaseCurrency { get; set; }
        public CurrencyDetails RaceCurrency { get; set; }
        public ObservableCollection RaceOptionData { get; set; }
        [DisplayFormat(DataFormatString = "{0:0.00")]
        public decimal BaseFee { get; set; }
    }

Main view (Irrelevant sections omitted)

    @using TechsportiseOnline.Helpers
    @model TechsportiseOnline.ViewModels.RaceViewModel

    @{
        ViewData["Title"] = "Create";
    }

    Create a new race

    
        

            
                

                    
                    New Race Option
                
                
                    
                        
                            
                                Option Name
                                
The name of this Race Option
                                
                                @**@
                            
                        
                        
                            
                                Distance
                                
Choose a race distance, used for Age Grading 

                                

                                @**@
                            
                        
                        
                            
                                Maximum Entries
                                
The maximum capacity of the race


                                
                                @**@
                            
                        
                    

                             
                        
                            
                                Race Start Time
                                
Start time in HH:MM
                                
                                @**@
                            
                        
                        
                            
                                Entry Price
                                
The price of the normal race entry
                                
                                @**@
                            
                        

                        
                            
                                Affiliation Discount
                                
Value of discount for being an affiliated runner
                                
                                @**@
                            
                                       
                    






                    
                        
                            
                            
                        
                    
                
    









    
        
                
                        Race Options
                        
                            
                                Create your different Race Options here, if you want to have more than one distance/race in the same event. You must have at least 1 Race Option.
                                
                                    @{Html.RenderPartial("RaceOptions", Model);}
                                
                                
                            
                        
                    


                

                    
                
            

        
        
            
        
    






    
        Back to List
    

    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
        

    }

Partial View

    @model TechsportiseOnline.ViewModels.RaceViewModel
    
            @if (Model.RaceOptionData != null)
            {
                foreach (var option in Model.RaceOptionData)
                {
                
                }
            }
        
        
            
                Name
            
        
        
                    @option.Name

Controller Method

[HttpPost]
public async Task GetRaceOptions(RaceViewModel race)
   {
       var viewModel = race;
       return PartialView("RaceOptions", viewModel);
   }

Danilo Mikovic · Accepted Answer

You are calling ajax without data: parameter. So you are not posting data to your controller. Than controller is trying to return the partial view with empty viewModel. If you want to save newly added options you will need to do something like this.

create data object and send it as data parameter in ajax.

modify the controller to save new options and return old + new options

[HttpPost]
public async Task GetRaceOptions(RaceViewModel race)
{
   //save options from RaceViewModel

   //get old options + newly added options

   var viewModel = old + newly added data
   return PartialView("RaceOptions", viewModel);
}

You need to close modal in the success part of ajax

success: function(data) {
                if (data) {  // check if data is defined
                    $("#dvRaceOptionsResults").html(data);
                    $('#modalId').modal('hide');
                }

Core 2 Razor Page - AJAX and Partial Views

Answers (2)

Related Questions