Question

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

我有这些课程：

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

我想要做的是当我进入用户的编辑视图时，有一个按钮，允许我使用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中的用户添加到数据库中，我能够做到，但是当我尝试访问导航属性时，我无法列出电话或添加新电话。

我错过了什么？

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

Answer 2

var ph = {
        UserId: $('#UserId').val(),
        FirstName: $('#Phone').val(),
        LastName: $('#Mobile').val(),
    };

应改为

  var ph = {
            UserId: parseInt($('#UserId').val()),
            Phone: $('#Phone').val(),
            Mobile: $('#Mobile').val(),
        };

目前api调用中的手机类有空电话字符串（如果此对象甚至被转换为Phone类），如果您的视图有一个输入字段“#UserId”它应该通过，我会建议解析在发送数据之前，该值为整数，Mobile字段为Boolean .val（）返回true或false？

访问导航属性中的数据是另一回事，您应该检查它是否存在于相应的表中，如果是，它是否正确加载（某些数据访问框架要求您具体提及导航属性以加载它），例如它需要做一些像EntityFramework的配置：

User user = dbContext.Users.FirstOrDefault(u => u.Id == 1).Include("Phones");

其中“Phones”是列表的导航属性。

Answer 3

我最终使用Ajax.BeginForm以下列方式解决此问题：

    <div id ="userDetails">

@using (Ajax.BeginForm("AddPhone", null, new AjaxOptions()
    {
        HttpMethod = "Post",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "userDetails",           
    }, null))
    {
        @Html.Hidden("UserId", prod.UserId)
        string Phone = "";
        @Html.EditorFor(x=>Phone) 
        @Html.DropDownList("phoneType", ViewData["telType"] as SelectList)
        string phone1 = "";
        <button  type="submit" >AddPhone</button>
    }
    </div>

非常感谢@Barry的帮助。我最终通过ViewData将UserId发送到View for Ajax表单。

使用MVC进行AJAX / jQuery和CRUD操作

3 个答案: