在 Asp.net MVC 的 Post 方法中传递复杂模型

Question

在我的 Razor 视图中，我有候选人详细信息以及其他学位等。我必须附加候选人学位行。我已将学位视图作为局部视图。将由候选人根据他拥有的学位数量添加。我需要将学位的详细信息以及候选人的其他详细信息传递给控制器。我在此处附上了我的 UI 和详细信息：-

这是我的模特

 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; }

}

我需要通过他们的多重教育传递候选人详细信息。我在这里添加我的控制器

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

我的观点低于

/*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>

另外请找图也

Answer 1

我猜这就是你想要的

首先创建一个名为 CandidateModel 的模型 class，其中包含候选人模型和候选人教育详情列表。

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;}

}

现在在控制器中将教育详细信息对象和候选对象设置为候选模型的新实例，并将模型传递给视图。您还应该在视图中使用此 CandidateModel class

Answer 2

根据您在编辑前的最初问题，此基本设置应该有效：

型号：

在你的模型中使用 List 而不是 Collection 因为集合不能被索引检查 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; }
}

候选人获取操作方法：

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);
  }

索引视图：

@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" />

}

候选人Post操作方法：

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

        return View(data);
    }

添加导出 GET 操作方法：

    public PartialViewResult AddEduction(Canditate data)
    {

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

添加部分视图：

注意：从 here 安装 BeginCollectionItem HtmlHelper 以在 form 中具有唯一的 name 属性以绑定到您的模型属性。

 @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>

$(document).ready(function () {


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

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

    });
  });

})

</script>

在 Asp.net MVC 的 Post 方法中传递复杂模型

Pass Complex Model in Post Method of Asp.net MVC

c#

sql-server

asp.net-mvc

datamodel