MVCでのAJAX/jQueryとCRUD操作

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

私が持っている主な問題は、私は合格can'tということです特定のユーザのIDを編集ビューモデルからコントローラに送信します。私は、ビューからデータベースにユーザーを追加してテストを行いましたが、それを行うことができましたが、ナビゲーションプロパティにアクセスしようとすると、電話を一覧表示することも、新しいものを追加することもできません。

私には何が欠けていますか？

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

が（このオブジェクトも電話でのクラスにキャストされている場合）あなたのビューが持っている場合は現在のAPIコールでお使いの携帯電話のクラスは、空の携帯電話の文字列を持っている

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

に変更する必要があります入力フィールドは "#UserId"で渡す必要があります、私は、データを送信する前に、整数値を解析することをアドバイスします。モバイルフィールドはブール値.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をAjaxフォームのビューに送信することになりました。