[FIXED] How to use ASP.Net MVC Child Actions with VS 2017 C# and MVC 5

Issue

I have a scenario but do not know if it is possible to do this with child actions.

I do not have any code to show. Basically, there would be a simple list on the left side of a view containing summary data. On each line of the list there would also be a 'view details' link or button. So, I want the user to click that link/button, and then on the right side I want more details about the particular selected item to be displayed. The user could then click on the view details for another item and view those details etc.

How is this best achieved in ASP.Net MVC?

Thanks in advance.

Solution

This is an example for the OP, this may or may not be the best way, but it will work:

So your left panel has buttons or links, if the text of your button/link is enough to pull back the relevant data from the server, just pass that to the server via Ajax, else if you wanted to use ids or some unique identifier, you could append that to the id property of your buttons/links and then pass that to the server, I will let you decide which you want to use:

//Example HTML
<div id="panelLeft">
   <button id="btnOne" class="btnInfo">Info on Cats</button>
   <br/>
   <button id="btnTwo" class="btnInfo">Info on Dogs</button>
</div>

//Assuming you are using JQuery
//Either in your page add a script tag with this code, or add a script file
//to your project and import it into your page (View)
$(function(){
      //Add click events to all your buttons by using the common className btnInfo
      $('.btnInfo').on('click', function(){
            const serverSideData = $(this).text(); //If you are using the text
            //of the button to find the info server side
            $.ajax({
                  url: "yourUrlToServerSideMethod",
                  type: "POST",
                  data: { yourServerSideParameter: serverSideData },
                  success: function(data){
                      //Successfully posted to server and got response
                      //If data is in JSON format, you can parse it with JSON.parse()

                      //Clear your div on the right which displays the item data
                      $('#divRightPanelInfo).html('');
                      $('#divRightPanelInfo).append(data); //If this is just a string
                      //Or create some pretty element(s) and append that to div

                  },
                  error: function(jqXHR, exception){
                      //Handle error, show error label or something
                  }
              });
       });
 });

Answered By - Ryan Wilson

Answer Checked By - Robin (PHPFixing Admin)