Pass Complex Model in Post Method of Asp.net MVC

Question

In my Razor View, I have candidate details along with other Degrees etc. I have to append row of Candidate's degree. I have taken Degree View as a partial view. Which will be added by candidate according to the number of degree he has. I need to pass detail of degree along with other details of Candidate to controller. I have attached my UI and details here:-

Here is my Model

 public class Candidate:BaseEntity
{
    public Candidate()
    {         

        CandidateDegreeMap = new HashSet<CandidateDegreeMap>();                  
    }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNo { get; set; }
    public string Email { get; set; }
    public string Status { get; set; }
    public string Gender { get; set; }
    public DateTime Dob { get; set; }
    public DateTime DateCreated { get; set; }
    public int CreatedBy { get; set; }
    public DateTime? DateModified { get; set; }
    public int? ModifiedBy { get; set; }
    public bool IsDeleted { get; set; }   

    public ICollection<CandidateDegreeMap> CandidateDegreeMap { get; set; }

}

I need to pass candidate details with their multiple Education. Here I am Adding my controller

[HttpPost]
    public async Task<IActionResult> AddEdit([FromBody]CandidateModel model, 
string returnUrl = null)
    {
        return await Task.Run(()=>View("AddCandidate",model));
    }

My View is below

/*Dashboard Page Ends*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AddCandidate - CVManagement</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href=/css/select2.min.css />
    <link rel="stylesheet" href=/css/style.css />
    <link rel="stylesheet" href=/css/responsive.css />
</head>
<body class="dashboard-body">
    <nav class="dashboard-nav">
        <div class="container">
            <div class="nav-wrapper">
                <a class="brand-logo" href="/Home/Index"><img src="/images/login/logo.png"></a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li>
                        <a href="/Home/Index"><img src="/images/dashboard/search.png"></a>
                    </li>
                    <li>
                        <a href="/Home/Index"><img src="/images/dashboard/notification.png"></a>
                    </li>
                    <li>
                        <a class='dropdown-button' data-activates='dropdownUser' href="/Home/Index"><img src="/images/dashboard/myaccount.png" width="40"> <mp>John Doe</mp> <span class="material-icons">arrow_drop_down</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="sub-menu">
        <div class="container">
            <div class="row">
                <div class="col l2">
                    <a href="#!" class="active"><img src="/images/dashboard/dashboard_icon.png"> Dashboard</a>
                </div>
                <div class="col l2">
                    <a href="#!"><img src="/images/dashboard/candidates_normal.png"> Candidates</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">

<div class="dashboard-breadcrumb-menu">
    <a href="#!" class="breadcrumb breadcrumb-slash dashboard-breadcrumb">Dashboard</a>
    <a href="#!" class="breadcrumb breadcrumb-slash dashboard-breadcrumb second">Openings</a>
    <a class="breadcrumb dashboard-breadcrumb-active">Add Candidate</a>
</div>
<h5 class="title">Candidate Details</h5>
<form method="post" class="col s12 m12 l12 xl12" action="/Candidate/AddEdit">
    <div class="add-cnd-div form-div">
        <h5 class="details-title">Personal</h5>
        <div class="row">
            <div class="input-field col s12 m4">
                <input id="first_name" type="text" name="FirstName" value="">
                <label class="active" for="FirstName">First Name</label>
            </div>
            <div class="input-field col s12 m4">
                <input id="last_name" type="text" name="LastName" value="">
                <label for="last_name">Last Name</label>
            </div>
            <div class="input-field col s12 m4">
                <input id="Dob" class="cv-date-picker" type="text" data-val="true" data-val-required="The Dob field is required." name="Dob" value="">
                <label for="Dob">Date of Birth</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12 m4 gender-div">
                <img id="maleGenImg" data-gender="Male" src="/images/add_candidate/male_select.png">
                <img id="femaleGenImg" data-gender="Female" src="/images/add_candidate/female_deselect.png">
                <input id="Gender" type="text" disabled="disabled" name="Gender" value="">
                <label id="genderLbl" for="Gender">Gender</label>
            </div>
            <div class="input-field col s12 m4">
                <input id="phone_number" type="text" name="PhoneNo" value="">
                <label for="PhoneNo">Phone Number</label>
            </div>
            <div class="input-field col s12 m4">
                <input id="email" type="email" name="Email" value="">
                <label for="Email">Email</label>
            </div>
        </div>

    </div>

    <div class="add-cnd-div form-div">
        <h5 class="details-title">Education</h5>
        <div id="education_container">

<div class="row education-div">
    <div class="input-field col s12 m4">
        <input type="text" id="DegreeName" name="DegreeName" value="">
        <label for="DegreeName">Degree</label>
    </div>
    <div class="input-field col s12 m4">
        <input type="text" id="InstituteName" name="InstituteName" value="">
        <label for="InstituteName">Institute</label>
    </div>
    <div class="input-field col s12 m4">
        <input class="cv-date-picker" type="text" id="YearOfPassing" name="YearOfPassing" value="">
        <label for="YearOfPassing">Year Of Passing</label>
    </div>
</div>


        </div>
        <div class="right-align">
            <a class="add-more" href="#!" id="add_more_education">+ <span>Add more</span></a>
        </div>
    </div>

    <div class="add-cnd-div form-div">
        <h5 class="details-title">Proffessional</h5>

        <div class="row">
            <div class="input-field col s12 m6">
                <input id="tot_exp" type="text">
                <label for="tot_exp">Total Experience</label>
            </div>
            <div class="input-field col s12 m6">
                <input id="rel_exp" type="text">
                <label for="rel_exp">Relevant Experience</label>
            </div>
        </div>

        <div class="row">
            <a href="javascript:;" class="add-work" id="add_work"><img class="plus-img modal-trigger" data-target="modalCO" src="img/candicate_listing/plus.png"> <span>Add Wrok Experience</span></a>
        </div>
    </div>

    <div id="job_container">
        <div class="add-cnd-div form-div job-div">
            <div class="row">
                <div class="col s12 m6">
                    <input type="checkbox" class="filled-in" id="currentJob_1" />
                    <label for="currentJob_1">Current Job</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m4 gender-div">
                    <input id="employer_1" type="text">
                    <label for="employer_1">Employer</label>
                </div>
                <div class="input-field col s12 m4">
                    <input id="job_role_1" type="text">
                    <label for="job_role_1">Job Role</label>
                </div>
                <div class="input-field col s12 m4 multisel-div">
                    <select id="it_skills_1" class="material-select">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                    <label>IT Skills</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m4 gender-div">
                    <div class="col s6 div-from">
                        <input type="text" placeholder="Start" class="cv-date-picker">
                    </div>
                    <div class="col s6 div-to">
                        <input type="text" placeholder="End" class="cv-date-picker">
                    </div>
                    <label class="date-range-lbl">Date Range</label>
                </div>
                <div class="input-field col s12 m4">
                    <input id="current_ctc_1" type="text">
                    <label for="current_ctc_1">Current CTC</label>
                </div>
                <div class="input-field col s12 m4 multisel-div">
                    <input id="expected_ctc_1" type="text">
                    <label for="expected_ctc_1">Expected CTC</label>
                </div>
            </div>
            <a href="#!" class="tooltipped del-a" data-position="bottom" data-delay="30" data-tooltip="Delete"><i class="material-icons del-img">clear</i></a>
        </div>

        <div class="add-cnd-div form-div job-div">
            <div class="row">
                <div class="col s12 m6">
                    <input type="checkbox" class="filled-in" id="currentJob_2" />
                    <label for="currentJob_2">Current Job</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m4 gender-div">
                    <input id="employer_2" type="text">
                    <label for="employer_2">Employer</label>
                </div>
                <div class="input-field col s12 m4">
                    <input id="job_role_2" type="text">
                    <label for="job_role_2">Job Role</label>
                </div>
                <div class="input-field col s12 m4 multisel-div">
                    <select id="it_skills_2" class="material-select">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                    <label>IT Skills</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m4 gender-div">
                    <div class="col s6 div-from">
                        <input type="text" placeholder="Start" class="cv-date-picker">
                    </div>
                    <div class="col s6 div-to">
                        <input type="text" placeholder="End" class="cv-date-picker">
                    </div>
                    <label class="date-range-lbl">Date Range</label>
                </div>
                <div class="input-field col s12 m4">
                    <input id="current_ctc_2" type="text">
                    <label for="current_ctc_2">Current CTC</label>
                </div>
                <div class="input-field col s12 m4 multisel-div">
                    <input id="expected_ctc_2" type="text">
                    <label for="expected_ctc_2">Expected CTC</label>
                </div>
            </div>
            <a href="#!" class="tooltipped del-a" data-position="bottom" data-delay="30" data-tooltip="Delete"><i class="material-icons del-img">clear</i></a>
        </div>
    </div>

    <div class="add-cnd-div form-div">
        <div class="row">
            <div class="input-field col s12 multisel-div">
                <select id="capability" class="material-select">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Capability</label>
            </div>
        </div>
    </div>

    <div class="row comment-row">
        <div class="col s12 m6 add-cnd-div form-div cr-1">
            <h5 class="details-title">Recruiter Comment</h5>
            <div class="comment-btn-div">
                <span class="comment-btn">Good</span>
                <span class="comment-btn">Bad Communication</span>
            </div>
            <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea"></textarea>
                <label for="textarea1">Comment</label>
            </div>
        </div>
        <div class="col s12 m6 add-cnd-div form-div cr-2">
            <h5 class="details-title">Hiring Manager Comment</h5>
            <div class="comment-btn-div">
                <span class="comment-btn">Good</span>
                <span class="comment-btn">Bad Communication</span>
            </div>
            <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea"></textarea>
                <label for="textarea1">Comment</label>
            </div>
        </div>
    </div>

    <div class="add-cnd-div form-div">
        <div class="row">
            <div class="input-field col s12 m4">
                <select class="material-select">
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Capability</label>
            </div>
            <div class="input-field col s12 m4">
                <select class="material-select">
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Opening</label>
            </div>
            <div class="input-field col s12 m4 sc-btn-container">
                <button class="btn btn-cre-opn waves-effect active">Save</button>
                <button class="btn btn-cre-opn waves-effect">Cancel</button>
            </div>
        </div>
    </div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8K7NtNmNf5lJsh806e0aRPmUONXIh2RLjJ1oH6KtOEdcIrE95C_Obn7dzp3LNYv2Eof0VGrWukRpqxXnYDAJGverd0YJjhOSXeUEJZFmHpAnjwlJMAoTnrYn2ILawiFAHDDU6_ujcJ-blB1IsoYXRzk" /></form>

        <footer>
            <p>&copy; 2017 - Azilen Technology Pvt. Ltd</p>
        </footer>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="/js/select2.full.min.js?v=FcVIknBiVRk5KLQeIBb9VQdtFRMqwffXyZ-D8q0gQro"></script>
    <script src="/js/main.js?v=so9tT4PzF8oB51eAj1XS9fKQucf_89tcPE9-sQ8bpns"></script>


</body>
</html>

Moreover Please find Image also

you want to add candidate details and education details along with this model. Is this what u want. — Nayas Subramanian, Dec 06 '17 at 04:19
Suggest you start by studying the code in [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , Dec 06 '17 at 04:22
I don't see anything about your `HttpPost` action method, please include action method & view code. — Tetsuya Yamamoto, Dec 06 '17 at 04:30
@StephenMuecke the code which you have given me is not useful for my side,I am adding here Multiple education.I don't know how many education user is going to add — MayankGaur, Dec 06 '17 at 05:12
I gave you that so that at least you might make the effort to understand some fundamental basics - how to bind to collection properties. This is not a code writing service, but look at [this answer](http://stackoverflow.com/questions/40539321/partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for dynamically adding collection items (and what on earth do you think all that css has to do with your question) — , Dec 06 '17 at 05:15
May be you are new to `stackoverflow` then please read [this](https://stackoverflow.com/help) and follow the guidelines before asking. Please don't add unnecessary css or codes which are not required , this makes others very hard to read your post and resulting to down votes. — Shaiju T, Dec 06 '17 at 06:45
@stom yes I am actually new over here, thanks for your valuable suggestion. — MayankGaur, Dec 06 '17 at 06:50
@StephenMuecke , Thanks for introducing me to `BeginCollectionItem Html Helper` but is there solution by just using `Javascript` to generate unique `name` attributes in client for binding to model so that we can avoid request to server. — Shaiju T, Dec 06 '17 at 06:50
@stom Yes, refer [option 2 of this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308). It certainly improves performance but get a lot harder to maintain — , Dec 06 '17 at 06:53
@stom, Refer also [this answer](https://stackoverflow.com/questions/29837547/set-class-validation-for-dynamic-textbox-in-a-table/29838689#29838689) to show the process you need to ensure the 'template' is generated correctly (and any change at all in the model, e.g. adding a validation attribute) means you need to also update the template. However it does solve one major issue with `BeginCollectionItem` which is that if `ModelState` is invalid, and the view is returned, the correct error messages will not be displayed — , Dec 06 '17 at 06:58
@stom. I recently put [this project](https://github.com/stephenmuecke/mvc-tablehelper) on GitHub which solves it all and requires only that you use `@Html.TableEditFor(m => m.SomeCollectionProperty)` to generate all the correct html to add and delete collection items. I'll get around to writing the docs early next year. — , Dec 06 '17 at 07:02

score 1 · Accepted Answer · answered Dec 06 '17 at 06:40

According to your initial question before edits , this basic setup should work:

Model:

Use List instead of Collection in your Model because Collections cannot be Indexed check this.

public class Canditate
{

    public Canditate()
    {

        CandidateCompanyMap = new List<CandidateCompanyMap>();
        CandidateDegreeMap = new List<CandidateDegreeMap>();
        CandidateDocumentMap = new List<CandidateDocumentMap>();
        CandidateTagsMap = new List<CandidateTagsMap>();
        EducationDetails = new List<EducationDetails>();

    }

    public string FirstName { get; set; }
    public string Email { get; set; }

    public List<CandidateCompanyMap> CandidateCompanyMap { get; set; }
    public List<CandidateDegreeMap> CandidateDegreeMap { get; set; }
    public List<CandidateDocumentMap> CandidateDocumentMap { get; set; }
    public List<CandidateTagsMap> CandidateTagsMap { get; set; }
    public List<EducationDetails> EducationDetails { get; set; }
}

Candidate Get Action Method:

public ActionResult Index()
{
  // Populating some dummy data

  //TODO populate canditate list from your data repository
  Canditate canditate = new Canditate();
  canditate.FirstName = "Example Name";
  canditate.Email = "example@example.org";

  List<CandidateCompanyMap> candidateCompanyList = new List<CandidateCompanyMap>();
  List<CandidateDegreeMap> candidateeDegreeList = new List<CandidateDegreeMap>();
  List<CandidateDocumentMap> candidateDocumentList = new List<CandidateDocumentMap>();
  List<CandidateTagsMap> candidateTagsList = new List<CandidateTagsMap>();

  CandidateCompanyMap candidateCompany = new CandidateCompanyMap();
  candidateCompany.CompanyName = "Example Company";
  candidateCompanyList.Add(candidateCompany);

  CandidateDegreeMap candidateDegree = new CandidateDegreeMap();
  candidateDegree.DegreeName = "Example Degree";
  candidateeDegreeList.Add(candidateDegree);

  CandidateDocumentMap candidateDocument = new CandidateDocumentMap();
  candidateDocument.DocumentName = "Example Document";
  candidateDocumentList.Add(candidateDocument);

  CandidateTagsMap candidateTags = new CandidateTagsMap();
  candidateTags.TagsName = "Example Tags";
  candidateTagsList.Add(candidateTags);

  CandidateTagsMap candidateTags2 = new CandidateTagsMap();
  candidateTags2.TagsName = "Example Tags 2";
  candidateTagsList.Add(candidateTags2);


  canditate.CandidateCompanyMap = candidateCompanyList;
  canditate.CandidateDegreeMap = candidateeDegreeList;
  canditate.CandidateDocumentMap = candidateDocumentList;
  canditate.CandidateTagsMap = candidateTagsList;

  return View(canditate);
  }

Index View:

@model Demo.Models.Canditate


@using (Html.BeginForm("Candidate", "Home", FormMethod.Post))
{

<label>Candidate First Name</label>
@Html.TextBoxFor(m => m.FirstName);

<br />

<label>Candidate Email</label>
@Html.TextBoxFor(m => m.Email);

<br />


<label>Education Details</label>


<div id="educationDetails">

    @foreach (var education in Model.EducationDetails)
    {
        @Html.Partial("_EducationalDetailsPartials", education)
    }

    <button type="button" id="addEducation">Add</button>
</div>

<label>Candidate Company</label>

for (int i = 0; i < Model.CandidateCompanyMap.Count; i++)
{

    @Html.TextBoxFor(m => m.CandidateCompanyMap[i].CompanyName);
}

<br />

<label>Candidate Degree</label>


for (int i = 0; i < Model.CandidateDegreeMap.Count; i++)
{

    @Html.TextBoxFor(m => m.CandidateDegreeMap[i].DegreeName);
}

<br />

<label>Candidate Document</label>

for (int i = 0; i < Model.CandidateDocumentMap.Count; i++)
{

    @Html.TextBoxFor(m => m.CandidateDocumentMap[i].DocumentName);
}

<br />

<label>Candidate Tags</label>

for (int i = 0; i < Model.CandidateTagsMap.Count; i++)
{

    @Html.TextBoxFor(m => m.CandidateTagsMap[i].TagsName);


    <br />
}

<input type="submit" value="Submit" />

}

Candidate Post Action Method:

    [HttpPost]
    public ActionResult Candidate(Canditate data)
    {
       // TODO Save data

        return View(data);
    }

Add Eduction GET Action Method:

    public PartialViewResult AddEduction(Canditate data)
    {

        return PartialView("_EducationalDetailsPartials", new EducationDetails());
    }

Add Eduction Partial View:

Note: Install BeginCollectionItem HtmlHelper from here to have unique name attributes in form to bind to your model properties.

 @model Demo.Models.EducationDetails
 @using HtmlHelpers.BeginCollectionItem


 @using (Html.BeginCollectionItem("educationDetails"))
 {


 @Html.LabelFor(model => model.Degree)

 @Html.EditorFor(model => model.Degree)
 @Html.ValidationMessageFor(model => model.Degree)

 @Html.LabelFor(model => model.Institute)

 @Html.EditorFor(model => model.Institute)
 @Html.ValidationMessageFor(model => model.Institute)

 <button type="button" value="Delete" class="btn btn-default">Delete</button>

<br />

}

Script to Add New Education:

<script>

$(document).ready(function () {


var url = '@Url.Action("AddEduction","Home")';

var educationDetails = $('#educationDetails');
$('#addEducation').click(function () {
   $.get(url, function (response) {
      educationDetails.append(response);

    });
  });

})

</script>

Welcome, Sharing is learning , but you have marked the answer very fast ,did you find the solution before my post ? — Shaiju T, Dec 06 '17 at 06:52
Great thought, Yes I did from my side, actually I am using .netCore2.0, so 'HtmlHelpers.BeginCollectionItem' will not support me — MayankGaur, Dec 06 '17 at 09:36
[Here](https://stackoverflow.com/questions/38864912/using-begincollectionitem-in-asp-net-core) is .net Core version of it, may help in future. — Shaiju T, Dec 06 '17 at 09:40

Nayas Subramanian · Answer 2 · 2017-12-06T05:31:02.823

0

I think this is what you want i guess

First create a a model class name CandidateModel, which has candidate model and list of education details of candidates.

public class CandidateModel {

  public CandidateModel(){
    this.CandidateEducationDetails = new HashSet<CandidateEducationDetails >(); 
    this.Candidate = new Candidate();
  }

 public Candidate Candidate { get; set;}
 public  List<CandidateEducationDetails> CandidateEducationDetails { get; set;}

}

Now in controller set education details object and candidate object to new instance of candidate model and pass the model to the view. You should use this CandidateModel class in view also

edited Dec 06 '17 at 05:31

answered Dec 06 '17 at 05:23

Nayas Subramanian

2,269
21
28

Hi Nayas thanks, but I am already doing that, my issue is in my view I am having partial view of education. when I am post to education.it shows null in model – MayankGaur Dec 06 '17 at 05:32
did u initialize educational details list – Nayas Subramanian Dec 06 '17 at 05:35
Yes, before this can you please help me out, that how can I post my view over here, as it convert it to HTML. – MayankGaur Dec 06 '17 at 05:37
before that are you getting able to get model of partial view result in main view. – Nayas Subramanian Dec 06 '17 at 05:41
Not able to understand what do you want to say. – MayankGaur Dec 06 '17 at 06:11

Pass Complex Model in Post Method of Asp.net MVC

2 Answers2