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

时间:2014-03-31 14:14:58

标签: c# asp.net-mvc-4 jquery-ui-selectable

我试图保存以下项目模型

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 Model

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列表的更改? 顺便说一句:有没有更简单的方法来选择初始加载本身的值,这支持跟踪项目列表更改

先谢谢

正如lnanikian所要求的那样是控制器的GET动作。我仍然没有为此编写POST动作,因为我仍然对如何继续将详细信息保存到列表中表示怀疑。

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

1 个答案:

答案 0 :(得分:0)

如果我理解得很好。让我们说当你点击用户的复选框时,他必须更新到项目?您还可以创建一个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
  }
  });
});