Post
Ask Question

Dynamically Append View With MVC Partial View

I'm using MVC partial view to dynamically create append/delete view.
 
Suppose you are creating a employee register page and letting users keep adding to their skillsets, which generally looks like the this:
(or you may visit https://gifyu.com/image/ZcIS to view the animated gif) 
 
Dynamically append view with MVC Partial View
 

Add View

 
The workaround is very simple, first we create our partial view for skillset that's going to keep appending in our index page every time the ‘Add Skill’ button is clicked.
 
This is the code for the partial view _SkillSet.cshtml, just a simple html markup
  1. @{  
  2. }  
  3. <div id="SkillSetDiv" class="row">  
  4.    
  5.     <div class="action-item col-sm-3 target">  
  6.         <div class="form-group">  
  7.    
  8.             Technology :  
  9.    
  10.             <input class="form-control text-box single-line" data-val="true" id="EditorTechnology" type="text" autocomplete="off">  
  11.         </div>  
  12.    
  13.     </div>  
  14.     <div class="col-sm-3 target">  
  15.         <div class="form-group">  
  16.    
  17.             Expertise  :  
  18.    
  19.    
  20.             <select class="form-control " id="DropDownForExpertise"  style="width:100%">  
  21.                 <option value="-1">--- Please Select ---</option>  
  22.                 <option value="0">Beginer</option>  
  23.                 <option value="1">Intermediate </option>  
  24.                 <option value="2">Expert</option>  
  25.    
  26.             </select>  
  27.         </div>  
  28.    
  29.     </div>  
  30.    
  31.     <div class="col-sm-5 target">  
  32.         <div class="form-group">  
  33.    
  34.             Remark :  
  35.    
  36.             <input class="form-control text-box single-line" data-val="true" id="EditorFoRemark" type="text" autocomplete="off">  
  37.         </div>  
  38.     </div>  
  39.     <div class="col-sm-1 target">  
  40.         
  41.             <a style="visibility:hidden"> Delete :</a>   @*just to make the button align *@  
  42.             <button id="Btn_DeleteSkillset" type="submit" style="height: 36px; width: 36px;  background-image: url('../Content/Images/close.png'); background-size:100%">  
  43.             </button>  
  44.            
  45.     </div>  
  46. </div>  
Then, include our partial view in our main index page.
 
Please take note that the partial view is under a div element with class name “SkillSetHeaderClass“, later we will need this to tell the computer keep appending partial view under this div . 
  1. <div class="SkillSetHeaderClass">  
  2.     <partial name="_SkillSet.cshtml">  
  3. </div>  
The button ‘Add Skill’ will trigger the append partial view function, so I created an action method “DisplayNewSkillSet” in controller, and it will be called for every time the button is being clicked. I’m using ajax to fire the event. 
  1. $(document).on('click', '#Btn_AddSkillSet', function (e) {  
  2.        $.ajax({  
  3.            url: '/Employee/DisplayNewSkillSet',  
  4.            success: function (partialView) {  
  5.                $('.SkillSetHeaderClass').append(partialView);  
  6.            }  
  7.        });  
  8.    });  
 In the controller, the action DisplayNewSkillSet will return the view of the partial view _SkillSet.cshtml
  1. public ActionResult DisplayNewSkillSet()  
  2.       {  
  3.           return PartialView("_SkillSet");  
  4.       }  
As we can tell from the ajax function, once the event is fired successfully, it will return a view of _SkillSet.cshtml , and we will append it into the Div element with class name “.SkillSetHeaderClass”
  1. success: function (partialView) {  
  2.                    $('.SkillSetHeaderClass').append(partialView);  
Done.
 
Now you can have a dynamically generated view by using MVC partial view.
 

Delete View 

 
You may also want to delete a particular row of a skillset, so I have added an ‘X’ button for the deletion. The javascript code for delete row is also very simple, just one line
  1. $(this).parent().remove();  
If you check out my code, you may find that my remove javascript code is $(this).parent().parent().remove(); , which have two parent(). This is because my delete button is located nested inside 2 Div , so, in order to delete all skillset elements, I need to go up to two level by using .parent().parent() (you may need 3 level .parent().parent().parent() if you want to delete something on higher level and so on) 
 
Dynamically append view with MVC Partial View
  
I will include in my next post how we can capture the values from dynamically generated partial view so that we can store it to the database.
 
Full source code can be download from GitHub.