ASP.NET MVC 4 在编辑视图中保存模型列表项

Question

我正在尝试保存下面的项目模型

public partial class Project: BaseModel
{
    public Project()
    {
        ProjectUsers = new List<ProjUser>();
    }

    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    [Display(Name="Project ID")]
    public int ProjectID { get; set; }

    [Required]
    public string Title { get; set; }
    [Display(Name = "Users")]
    public virtual List<ProjUser> ProjectUsers { get; set; }
}

ProjUser 模型

public partial class ProjUser: BaseModel
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int ProjUserID { get; set; }

    public int UserID { get; set; }

    public int ProjectID { get; set; }
    [ForeignKey("ProjectID")]
    public virtual Project Project { get; set; }

    public bool? Signatories { get; set; }

}

用户通过单独的数据库填充，项目和用户之间的链接通过 ProjUser 模型、UserID 值维护。

public partial class User : BaseModel
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int UserID { get; set; }
    [Required]
    [Display(Name = "dispUserName" , ResourceType = typeof(Resource))]
    public string UserName { get; set; }
}

在视图中，我将用户列表填充为可选 (JqueryUI) 并选择项目中可用的用户。

@model Impetro.Models.Project
@{
    ViewBag.Title = "ProjectSettings";
}

<h2>@ViewBag.Title</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Project Settings</legend>
        @Html.HiddenFor(model => model.ProjectID)
        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
            </div>
        </div>
    </fieldset>
<p>
    <input type="submit" value="Save" />
</p>
}
<h3>@Html.DisplayNameFor(model => model.ProjectUsers)</h3>
@{
    var pojectUserIDs = from pu in Model.ProjectUsers
                        select new { pu.UserID };

    String userIDstr = "";
    foreach (var user in pojectUserIDs)
    {
        userIDstr = userIDstr + "#" + user.UserID.ToString() + ";";
    }
}
@Html.Hidden("userValues", userIDstr, "id='userValues'")
<table data-impetro-uitype="selectable" data-impetro-selectorvalues="#userValues" id="projUserGrd">
    @foreach (var user in ViewBag.Users as IEnumerable<Impetro.Models.Global.User>)
    {
        <tr id="@user.UserID" class="ui-widget-content"><td>@user.UserName</td> <td>@Html.CheckBox("chk" + @user.UserID) @Html.Label("chk" + @user.UserID, "PO Signatory")</td></tr>
    }
</table>

将上表转换为可选的JS并选择已经添加的用户。

$(function () {
    $("[data-impetro-uitype='selectable']").bind("mousedown", function (e) {
        e.metaKey = true;
    })
    .selectable({
        filter: "tr",
        create: function (event, ui) {
            var selectable = $(this);
            var valueEle = selectable.attr("data-impetro-selectorvalues");
            var valArr = $(valueEle).val().split(";");
            for (var i = 0; i < valArr.length; i++) {
                if (valArr[i] == "") {
                    continue;
                }
                var id = valArr[i];
                selectable.find(id).addClass("ui-selected");
            }
        }
    });
});

如何在模型中捕获对 projusers 列表的更改？ 顺便说一句：有没有更简单的方法来选择初始加载本身的值，它支持跟踪 projUser 列表的变化

提前致谢

根据 lnanikian 的要求，这里是控制器的 GET 操作。我仍然没有为此编写 POST 操作，因为我仍然对如何继续将详细信息保存到列表中存有疑问。

public ActionResult ProjectSettings(int id)
    {
        ViewBag.Users = userRepository.All;
        return View(projectRepository.All
               .Where(p => p.ProjectID == id).SingleOrDefault());
    }

Answer 1

如果我理解得很好。假设当您单击用户的复选框时，他必须更新到项目？您还可以创建一个 Action 来为项目保存您的用户。

[HttpPost]
public ActionResult AddUserToProj(int userId){
 //retreive the User by the Id with a Linq query or
 //just add to ProjUsers the Id of the UserId with other importants informations you can
 //pass via th eparameters 
}

然后在您看来，在您的 JS function 中将调用一个 Ajax 方法，假设如果您的用户被检查，那么您调用 Action

$(function () {
   $("[data-impetro-uitype='selectable']").bind("mousedown", function (e) {
    e.metaKey = true;
    })
    .selectable({
    filter: "tr",
    create: function (event, ui) {
        var selectable = $(this);
        var valueEle = selectable.attr("data-impetro-selectorvalues");
        var valArr = $(valueEle).val().split(";");
        for (var i = 0; i < valArr.length; i++) {
            if (valArr[i] == "") {
                continue;
            }
            var id = valArr[i];
            selectable.find(id).addClass("ui-selected");
        }
    }
});

$('#check').bind('change', function () {

   if($(this).is(':checked'))
    {//You can ask a question here by a popup
     var userID= $("userId") //You retreive userId in the line by wise selection

     $.ajax({
        url: "@Url.Action("AddUserToProj","ControllerName")",
        type: 'POST',
        dataType: 'json',
        data: {id = $userID },
        async: false,
        success: function (result) {
            //  process the results from the server
            alert('done')

            });

        },
        error: function (errorThrown) {
            alert('error');
        }
    });
  }
 else
  {
    // unchecked, You can call a Deletion Method if you create another Action to do that
  }
  });
});