1

今天我有一个要求，我必须向数据库提交用户的教育详细信息。首先我将从实体解释，我在用户和教育表之间有一对多的关系，即一个用户可以有多个教育细节。

我的 EducationalBackground 模型看起来像这样

public class EducationalBackground
{
    public int EducationalBackgroundID { get; set; }

    public string UniversityOrCollege { get; set; }

    public string AreaOfStudy { get; set; }

    public string Degree { get; set; }

    public string YearReceived { get; set; }
}

作为我的主要模型的我的讲师模型看起来像这样，其中包含一个 EducationBackground 列表。

public class InstructorApplicationViewModel
    {
        public InstructorApplicationViewModel()
        {
            EducationalBackgrounds = new List<EducationalBackGround>
            {            
                new EducationalBackGround {
                AreaOfStudy = string.Empty,
                Degree = string.Empty,
                UniversityOrCollege = string.Empty,
                YearReceived = string.Empty
                }
            };
        }

        public IList<EducationalBackGround> EducationalBackgrounds { get; set; }

        public int CurrentUserId { get; set; } 

        [Required]
        public string Experience { get; set; }

        [Required]
        public bool WillingToTravel { get; set; }
    }

我的观点看起来像这样

@model PaulSchool.ViewModels.InstructorApplicationViewModel
@{
    ViewBag.Title = "ApplyToBecomeInstructor";
}
<h2>
    ApplyToBecomeInstructor</h2>
<script src="@Url.Content("~/Scripts/EducationalBackgroundListEditor.js")" type="text/javascript"> </script>
@using (Html.BeginForm())
{
    <fieldset>
        <legend>ApplyToBecomeInstructor</legend>
        <div class="editor-label">
            <p>
                Information from your user profile will be considered when applying to become an
                Instructor</p>
        </div>
        @Html.HiddenFor(model => model.CurrentUserId)
        <div class="editor-label">
            @Html.LabelFor(model => model.EducationalBackgrounds)
        </div>
        <div id="editorRows">
            @Html.EditorFor(model => model.EducationalBackgrounds)
        </div>
        @Html.ActionLink("Add additional educational background.", "EducationalBackground", null, new { id = "addItem" })
        <div class="editor-label">
            @Html.LabelFor(model => model.Experience)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Experience)
        </div>
        <div class="editor-label">
            Are you willing to travel?
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.WillingToTravel)
        </div>
        <p>
            <input type="submit" value="Create" id="btnSubmit" />
        </p>
        <div class="newRow" style="display: none;">
            <div class="editorRow">
                <p>
                    <label>
                        UniversityOrCollege</label>
                    <input class="university" type="text" value="" />
                </p>
                <p>
                    <label>
                        AreaOfStudy</label>
                    <input class="area" type="text" value="" />
                </p>
                <p>
                    <label>
                        Degree</label>
                    <input class="degree" type="text" value="" />
                </p>
                <p>
                    <label>
                        YearReceived</label>
                    <input class="year" type="text" value="" />
                </p>
                <div>
                    <a href="javascript:void(0);" class="deleteRow">Delete</a>
                </div>
            </div>
        </div>
    </fieldset>
}
<div>
    @Html.ActionLink("Back", "Index")
</div>

我在 Views/Shared/EditorTemplate 文件夹中包含了一个编辑器模板，以包含 Educationbackground 详细信息，它将作为部分视图以及 EditorTemplate

@model PaulSchool.ViewModels.EducationalBackGround
<div class="editorRow">
        <p>
            @Html.LabelFor(model => model.UniversityOrCollege)
            @Html.TextBoxFor(model => model.UniversityOrCollege, new { @class="university" })
        </p>
        <p>
            @Html.LabelFor(model => model.AreaOfStudy)
            @Html.TextBoxFor(model => model.AreaOfStudy, new { @class="area" })
        </p>
        <p>
            @Html.LabelFor(model => model.Degree)
            @Html.TextBoxFor(model => model.Degree, new { @class = "degree" })
        </p>
        <p>
            @Html.LabelFor(model => model.YearReceived)
            @Html.TextBoxFor(model => model.YearReceived, new { @class = "year" })
        </p>
    <div>
        <a href="javascript:void(0);" class="deleteRow">Delete</a>
    </div>
</div>

我编写了一个这样的 JQuery 脚本，将值发布到控制器，并且能够将所有内容发布到模型中，除了背景详细信息列表

<script type="text/javascript">
    $('#btnSubmit').click(function () {
        instructorUrl = '@Url.Action("ApplyToBecomeInstructor", "InstructorApplication")';
        var user = [];
        var educationList = [];
        var currentUser = '@Model.CurrentUserId';
        var experience = $('#Experience').val();
        var isWilling = $('#WillingToTravel').is(":checked");
        $('#editorRows .editorRow').each(function () {
            var education = {
                UniversityOrCollege: $(this).find('.university').val(),
                AreaOfStudy: $(this).find('.area').val(),
                Degree: $(this).find('.degree').val(),
                YearReceived: $(this).find('.year').val()
            }
            educationList.push(education);
        });
        var applicationFromView = {
            EducationalBackgrounds: educationList,
            CurrentUserId: currentUser,
            Experience: experience,
            WillingToTravel: isWilling
            }
    $.ajax({
        type: 'POST',
        url: instructorUrl,
        dataType: "json",
        data: applicationFromView,
        success: function (data) {
        },
        error: function (a, b, c) {
            alert('A problem ocurred');
        }
    });
});

</script>

我的控制器也看起来像这样

[HttpPost]
public ActionResult ApplyToBecomeInstructor(InstructorApplicationViewModel applicationFromView)
{
    Student thisStudent = this.db.Students.FirstOrDefault(o => o.StudentID == applicationFromView.CurrentUserId);
    var instructorApplication = new InstructorApplication
        {
            BasicInfoGatheredFromProfile = thisStudent, 
            EducationalBackground = applicationFromView.EducationalBackgrounds as ICollection<EducationalBackground>, 
            Experience = applicationFromView.Experience, 
            WillingToTravel = applicationFromView.WillingToTravel
        };
    this.db.InstructorApplication.Add(instructorApplication);
    this.db.SaveChanges();
    return this.Redirect("Index");
}

我知道问题出在我的 Jquery 脚本上，但我现在完全糊涂了，有人可以帮我看看吗？

4

1 回答 1

2

我在第一轮中注意到了两件事。

  • 您正在设置dataType: "json"，但dataType是您期望从服务器返回的数据类型，而不是您发送的数据类型。你需要设置contentType
  • 您需要JSON.stringify数据才能使模型绑定器满意。

基于以上两个，您的 ajax 调用应如下所示：

$.ajax({
        type: 'POST',
        url: instructorUrl,
        dataType: "json",
        data: JSON.stringify(applicationFromView),  //<-- JSON.stringify
        contentType: 'application/json; charset=utf-8', //<-- contentType
        success: function (data) {
        },
        error: function (a, b, c) {
            alert('A problem ocurred');
        }
    });
于 2012-06-09T13:07:59.260 回答