c# - 使用 MVC 的 AJAX/jQuery 和 CRUD 操作

Question

所以我是一个非常新的 MVC 开发人员，我在使用特定功能时遇到了一些麻烦。

我有这些类(class):

public class User
{

    public int UserId{ get; set; }
    public string Email { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public bool LogicalDelete { get; set; }
    public virtual ICollection<Phone> Phone{ get; set; }
    public virtual ICollection<EventList> Event{ get; set; }
}

public class Phone
{
    public int PhoneId{ get; set; }
    public string Phone{ get; set; }
    public bool Mobile{ get; set; }
    public int UserId{ get; set; }
    public virtual UserClass User { get; set; }
}

我想做的是，当我转到用户的“编辑” View 时，有一个按钮可以让我使用 AJAX 帖子向该特定用户添加新电话或以逗号分隔的多个电话脚本。

到目前为止，我一直将其用于单一电话方法:

function Add() {
    var res = validate();
    if (res == false) {
        return false;
    }
    var ph = {
        UserId: $('#UserId').val(),
        FirstName: $('#Phone').val(),
        LastName: $('#Mobile').val(),
    };
    $.ajax({
        url: "/User/Edit",
        data: JSON.stringify(ph),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
           loadData();
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });

并且，在 UserController 中:

public JsonResult Add(Phone ph)
{
    return Json(myDb.Add(ph), JsonRequestBehavior.AllowGet);
}

我遇到的主要问题是我无法将特定的用户 ID 从编辑 View 模型传递到 Controller 。我通过将用户从 View 添加到数据库进行了一些测试，我能够做到，但是当我尝试访问导航属性时，我既无法列出电话，也无法添加新电话。

我错过了什么？

Answer 1

为什么不直接使用 Ajax 表单？

<div id="userDetails">
 @* All other user details *@
 @using (Ajax.BeginForm("AddPhone", null, new AjaxOptions()
    {
        HttpMethod = "Post",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "userDetails",           
    }, null))
    {
        @Html.HiddenFor(m => m.UserId)
        <input type="text" id="phone" />
        <select id="phoneType">
            <option value="home">Home</option>
            <option value="cell">Cell</option>
        </select>
        <button type="submit">Add Phone</button>
    }
</div>


[HttpPost]
public ActionResult AddPhone(int UserId, string phone, string phoneType)
{
//Add phone using userId, phone, & phoneType
...

//Return view with model (user object) to update page with added phone
return View("UserView", UserObject);
}