Retrieve Values From Dynamically Appended MVC Partial View

In this blog, you will learn how to retrieve Values From Dynamically Appended MVC Partial View via javascript.

Please have a look at the post,  Dynamically append view with MVC Partial View, before you continue reading this post.

 

Since an employee can have one or more than one skillset, at first I create a model for employee and skillset respectively. 

 

EmployeeModel Class

public class EmployeeModel
   {
       public int EmpId { get; set; }

       public string EmpName { get; set; }

       public string Designation { get; set; }

       public string Gender { get; set; }
   }

SkillSet Class

public class SkillSet
   {
       public int EmpId { get; set; }

       public string Technology { get; set; }

       public int Expertise { get; set; }

       public string Remark { get; set; }
   }

The EmpId in Skillset class serves as a foreign key to link employee and his/her skillsets.

 

In the client side, the code of getting employee basic info is very straightforward:

function geEmployee() {
    var emp = {
        EmpName: $("#EditorForName").val(),
        Designation: $("#EditorForDesignation").val(),
        Gender: $("#DropDownForGender").val()
    };
    return emp;
}

 And the javascript code to get one or multiple value for skillsets:

function getSkillsets() {
           skillSets = [];


           const EditorTechnology = document.querySelectorAll('#EditorTechnology');
           const DropDownForExpertise = document.querySelectorAll('#DropDownForExpertise');
           const EditorFoRemark = document.querySelectorAll('#EditorFoRemark');



           for (var i = 0; i < EditorTechnology.length; i++) {
               if (EditorTechnology[i].value != '') {
                   skillSets.push({
                       Technology: EditorTechnology[i].value,
                       Expertise: DropDownForExpertise[i].value,
                       Remark: EditorFoRemark[i].value
                   });
               }
           }

           return skillSets;
       }

The document.querySelectorAll(“#id”) will get all the values from the html form element with that particular id. Since our html form element shares the same id, all those values will be stored into an array.

 

I have 3 html form elements (Technology, Expertise and Remark), so I need 3 arrays to store all of the values respectively. 

const EditorTechnology = document.querySelectorAll('#EditorTechnology');
const DropDownForExpertise = document.querySelectorAll('#DropDownForExpertise');
const EditorFoRemark = document.querySelectorAll('#EditorFoRemark');

Then, create a for loop to iterate all values inside the array. Since all arrays contain the same length, it doesn’t matter which array you choose as a for loop iteration. (Of course we better consider using ‘Technology’ array as a benchmark, because it is what skillsets are about and ‘Remark’ array can be blank.)

 

Inside the for loop, create a variable name “skillSets” and push those values to the attributes of the skillSets object respectively.

skillSets.push({
                       Technology: EditorTechnology[i].value,
                       Expertise: DropDownForExpertise[i].value,
                       Remark: EditorFoRemark[i].value
                   });

Please note that the object name skillSets and all its attribute names (Technology, Expertise, Remark) must tally with our skillSets class, otherwise we cannot pass the object with value to the controller.

 

Next, we pass 2 objects with name “emp” and “skillSets” to our controller action named "CreateEmployee". 

$(document).on('click', '#Btn_Create', function (e) {

           var emp =   geEmployee();
           var skillSets = getSkillsets();

           $.ajax({
               type: 'POST',
               data: {   emp, skillSets  },
               url: '/Employee/CreateEmployee',
               success: function () {
                  alert('Success!')
               }
           });
       });

C# code for CreateEmployee action,

public ActionResult CreateEmployee(EmployeeModel emp, List<SkillSet> skillSets)
      {
          //some function to create a unique Emp Id before storing it to database

          //store your data into the database here
          return View("Create");
      }

Please make sure that the parameters name of CreateEmployee also tally with the object name that passes via ajax.

 

Then we are done, we can add multiple skillsets and click submit button, we now will be able to retrieve multiple skillsets’ value.

 

 

 

 

 

 

As you can see, we have a List of skillSets object with count = 3

 

 

 

 

  

I will stop here and not complete the process of storing the data into the database. You may want to do it your own way.

 

The full source code can be downloaded via GitHub

 

Thanks for reading.