Click here to Skip to main content
14,300,422 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi I have a employee profile section just like linkedIN where they ask user to enter education , I also want to give one button to allow user to add any number of education as he want , just click on the button should create the same form again and user can enter multiple education records.
Is there any related example kindly share so that i can check it out ! I have seen how to create a dynamic control but i am looking for a method is there any resource available which shows the entire form creation rather than creating control one by one and also how to save them using .net MVC as model binder not using javascript.
thanks

What I have tried:

I have tried to create a new control at run time but i am looking to create the complete div all elements inside that div with same design .
thanks
Posted
Updated 11-Sep-19 20:41pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I can give you some idea how I've achieved similar requirement with server side postbacks to make Master Details work

ViewModel
public class ProfileViewModel 
{
  public string Name {get;set;}
  public List<Education> EducationList {get;set;}
}

Controller
[HttpGet]
public async Task<ActionResult> AddProfile()
{
  return View(new ProfileViewModel());
}

[HttpPost]
public async Task<ActionResult> AddProfile(ProfileViewModel viewModel)
{
   // stuff to save in db
}

[HttpPost]
public async Task<ActionResult> AddEducation(ProfileViewModel viewModel)
{
    // So here you add new items in the list send it back to Add Profile View
    // there you can render the list of Education 

    viewModel.EducationList.Add(new Education(){});   

    return View("AddProfile", viewModel);
}

View
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "yourform" }))
{
  @Html.EditorFor(model => model.Name, new { htmlAttributes=new { @class="control" }})
  <input type="button" value="Add Education" id="@("add_education")" />
  <table>
    @for (int i = 0; i < options.Count(); i++)

    {

      <tr>
       <td>@Html.EditorFor(model => options[i].DegreeName ,null,"DegreeName")</td>
       <td>@Html.EditorFor(model => options[i].YearCompleted ,null, "YearCompleted")</td>
       </tr>
    }
  </table>
  <input type="button" value="Add Profile" id="@("add_profile")" />
}

Scripts
$(document).ready(function () {
    $("#@("add_education")").click(function (e) {
       $("#yourformId").attr("action", '@Url.Action("AddEducation", "UserProfile")');
       $("#yourformId").submit();
    });
    $("#@("add_profile")").click(function (e) {
       $("#yourformId").attr("action", '@Url.Action("AddProfile", "UserProfile")');
       $("#yourformId").submit();
    });
});


So the main idea is to post back to a separate action on Add Education button but return the same viewModel after adding one more record in the list and return to Add Profile view with updated viewModel
   
Comments
Malikdanish 12-Sep-19 2:55am
   
can you share a running code sample , I have created the dynamic controls but right now i am not able to submit all form values to controller how to do that , My input control is having this mark up

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100