从包含MVC4中的局部视图的视图传递Json数据对象

Question

我正在为人创建一个MVC4表单。 我有这些部分视图包含有关联系信息和邮政地址的信息。

ContactInfo.cshtml

@model Demo.Models.ContactInfo
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="~/Content/plugins/validationengine/css/validationEngine.jquery.css" />

    <h2>ContactInfo</h2>
    <div class="form-group">
        <label class="control-label col-lg-4">PhoneNumber</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.PhoneNumber)
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-4">CellNumber</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.CellNumber)
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-4">Email</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.Email)
        </div>
</div>

PostalAddress.cshtml

@model Demo.Models.PostalAddress
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="~/Content/plugins/validationengine/css/validationEngine.jquery.css" />
<h2>PostalAddress</h2>
<div class="form-group">
   <label class="control-label col-lg-4">CountryID</label>
   <div class="col-lg-4">
        @Html.EditorFor(model => model.CountryID)
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">CityID</label>
    <div class="col-lg-4">
        @Html.EditorFor(model => model.CityID)
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">ProvinceID</label>
    <div class="col-lg-4">
        @Html.EditorFor(model => model.ProvinceID)
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">ZipCode</label>
    <div class="col-lg-4">
         @Html.EditorFor(model => model.ZipCode)
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-4">StreetAddress</label>
    <div class="col-lg-4">
        @Html.EditorFor(model => model.StreetAddress)
    </div>
</div>

以下是人员，邮政地址和联系信息的模型类。

ContactInfo.cs

using System;
using System.Collections.Generic;

namespace Demo.Models
{
public partial class ContactInfo
{
    public ContactInfo()
    {
        this.Branches = new List<Branch>();
        this.People = new List<Person>();
    }

    public long ID { get; set; }
    public Nullable<int> PhoneNumber { get; set; }
    public Nullable<int> CellNumber { get; set; }
    public string Email { get; set; }
    public virtual ICollection<Branch> Branches { get; set; }
    public virtual ICollection<Person> People { get; set; }
}
}

这是 Person.cs

using System;
using System.Collections.Generic;

namespace Demo.Models
{
public partial class Person
{
    public Person()
    {
        this.Branches = new List<Branch>();
        this.Documents = new List<Document>();
        this.Faculties = new List<Faculty>();
        this.Institutes = new List<Institute>();
        this.Parents = new List<Parent>();
        this.Students = new List<Student>();
        this.StudentParents = new List<StudentParent>();
        this.StudentParents1 = new List<StudentParent>();
    }

    public long ID { get; set; }
    public string Name { get; set; }
    public Nullable<bool> Gender { get; set; }
    public Nullable<System.DateTime> DOB { get; set; }
    public string Photo { get; set; }
    public Nullable<long> ContactID { get; set; }
    public Nullable<byte> PersonTypeID { get; set; }
    public Nullable<long> PostalAddressID { get; set; }
    public Nullable<byte> ReligionID { get; set; }
    public virtual ICollection<Branch> Branches { get; set; }
    public virtual ContactInfo ContactInfo { get; set; }
    public virtual ICollection<Document> Documents { get; set; }
    public virtual ICollection<Faculty> Faculties { get; set; }
    public virtual ICollection<Institute> Institutes { get; set; }
    public virtual ICollection<Parent> Parents { get; set; }
    public virtual PersonType PersonType { get; set; }
    public virtual PostalAddress PostalAddress { get; set; }
    public virtual Religion Religion { get; set; }
    public virtual ICollection<Student> Students { get; set; }
    public virtual ICollection<StudentParent> StudentParents { get; set; }
    public virtual ICollection<StudentParent> StudentParents1 { get; set; }
}
}

PostalAddress.cs

using System;
using System.Collections.Generic;

namespace Demo.Models
{
public partial class PostalAddress
{
    public PostalAddress()
    {
        this.Branches = new List<Branch>();
        this.Papers = new List<Paper>();
        this.People = new List<Person>();
    }

    public long ID { get; set; }
    public Nullable<byte> CountryID { get; set; }
    public Nullable<int> CityID { get; set; }
    public Nullable<int> ProvinceID { get; set; }
    public string ZipCode { get; set; }
    public string StreetAddress { get; set; }
    public virtual ICollection<Branch> Branches { get; set; }
    public virtual city city { get; set; }
    public virtual country country { get; set; }
    public virtual ICollection<Paper> Papers { get; set; }
    public virtual ICollection<Person> People { get; set; }
    public virtual province province { get; set; }
}

}

这是Main Person.cshtml 我正在渲染上部的部分视图并发回 json 对象数据。

@model Demo.Models.Person
@{
 ViewBag.Title = "Person";
}

<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)    
    <legend>Person</legend>

    <div class="form-group">
        <label class="control-label col-lg-4">Name</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.Name)
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-4">Gender</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.Gender)
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-lg-4">DOB</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.DOB)
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-lg-4">Photo</label>
        <div class="col-lg-4">
            @Html.EditorFor(model => model.Photo)
        </div>
    </div>
    @Html.Partial("ContactInfo", new Demo.Models.ContactInfo())
    <div class="form-group">
        <label class="control-label col-lg-4">PersonTypeID</label>
        <div class="col-lg-4">
            @Html.DropDownList("PersonTypeID", String.Empty)
        </div>
    </div>

    @Html.Partial("PostalAddress", new Demo.Models.PostalAddress())

    <div class="form-group">
        <label class="control-label col-lg-4">ReligionID</label>
        <div class="col-lg-4">
            @Html.DropDownList("ReligionID", String.Empty)
        </div>
    </div>

    <p>
        <input id="submit" class="submit" type="submit" value="Create" />
    </p>
}

<script>
$('#submit').click(function (e) {
    e.preventDefault();
    //alert('hello');
    var person = {
        Name: $('#Name').val(),
        Gender: $('#Gender').val(),
        DOB: $('#DOB').val(),
        Photo: $('#Photo').val(),
        PersonTypeID: $('PersonTypeID').val(),
        ContactInfo: {
            PhoneNumber: $('#PhoneNumber').val(),
            CellNumber: $('#CellNumber').val(),
            Email: $('#Email').val()
        },
        PostalAddress: {
            CountryID: $('#CountryID').val(),
        CityID: $('#CityID').val(),
        ProvinceID: $('#ProvinceID').val(),
        ZipCode: $('#ZipCode').val(),
        StreetAddress: $('#StreetAddress').val(),
    },
    };

    var data = { jsonperson: person };
    //console.log(data);
    $.ajax({
        url: '/Person/Create',
        type: "post",
        data: JSON.stringify(data),

        success: function () {
            $('#message').html('person added').fadeIn();
        },
        error: function () {
            $('#message').html('person added').fadeIn();
        }
    });

但是当我将数据从表单发送到控制器时包含邮政地址和联系信息的数据是空的。

这是人员控制器

[HttpPost]
public JsonResult Create(Person jsonperson)
{
    if (ModelState.IsValid)
    {
        db.People.Add(jsonperson);
        db.SaveChanges();
        //   return RedirectToAction("Index");
    }

    ViewBag.ContactID = new SelectList(db.ContactInfoes, "ID", "Email", jsonperson.ContactID);
    ViewBag.PersonTypeID = new SelectList(db.PersonTypes, "ID", "Name", jsonperson.PersonTypeID);
    ViewBag.PostalAddressID = new SelectList(db.PostalAddresses, "ID", "ZipCode", jsonperson.PostalAddressID);
    ViewBag.ReligionID = new SelectList(db.Religions, "ID", "Name", jsonperson.ReligionID);
    // return View(jsonperson);
    JsonResult jr = new JsonResult();
    jr.Data = true;
    return jr;
}

数据即将发送到控制器，但联系信息详细信息和邮政地址为空。这让我发疯了。 提前谢谢。

Answer 1

提交表单后传递给控制器​​的序列化JSON数据，没有任何属性，如 ContactId 或 PersonTypeID 等

您的控制器将收到 PhoneNumber，CellNumber，Email，CountryID，CityID，ProvinceID，ZipCode，StreetAddress

因此，您的模型人应具有上述属性，因为它在您的部分视图模型中已命名，因此可以相应地将其读入人员模型。