再次更新模型后将模型数据传递到局部视图

时间:2016-11-10 06:17:08

标签: javascript ajax asp.net-mvc razor partial-views

我有一个主视图和几个部分视图。

主视图显示注册用户列表,如下所示: enter image description here

主视图代码:

@model WebApplication9.Models.User

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link ref="~/Styles/UserManagement.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <p>
        <button type="submit" name="btnDefineTraj" onclick="AddUserBtnClick()" id="button1">Create New User</button>
    </p>

    <div hidden id="divAddUser" title="Add new user" style="border-radius: 7px">
        @Html.Partial("~/Views/UserManagement/CreateUser.cshtml")
    </div>

        <div hidden id="divEditUser" title="Edit user" style="border-radius: 7px">
        @Html.Partial("~/Views/UserManagement/EditUser.cshtml", Model)
    </div>

    <table>
        <tr>
            <th>UserID
            </th>
            <th>Username
            </th>
            <th>Password
            </th>
            <th>FirstName
            </th>
            <th>LastName
            </th>
            <th>DisplayName
            </th>
            <th>Email
            </th>
            <th>Pref. Language
            </th>
            <th>CreatedBy
            </th>
            <th>CreatedTime
            </th>
            <th>ModifiedTime
            </th>
            <th>IsAdmin
            </th>
            <th>IsActive
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model.usersList)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.userId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.userName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.password)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.firstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.lastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.displayName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.languagePreference)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.createdBy)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.createdTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.modifiedTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.isAdmin)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.isActive)
                </td>
                <td>
                    <button type="submit" name="btnEditUser" onclick="EditUserBtnClick(@item.userId)" id="buttonEdit">
                        <img src="~/Images/edit-icon.png" width="20" height="20" />
                    </button>
                </td>
                <td>
                    <button type="submit" name="btnDeleteUser" onclick="DeleteUserBtnClick(@item.userId)" id="buttonDelete">
                        <img src="~/Images/delete-icon.png" width="20" height="20" /></button>
                    @*                @Html.ActionLink("Edit", "EditUser", new { id=item.userId } ) |
                @Html.ActionLink("Delete", "DeleteUser", new { id=item.userId })*@
                </td>
            </tr>
        }

    </table>
</body>
</html>

我的模型类User代码是:

public class User
{
    public int UserId { get; set; }
    public string userName { get; set; }
    public string passWord { get; set; }
    public string firstName { get; set; }
    public string lastName { get; set; }
    public string displayName { get; set; }
    public string emailID { get; set; }
    public string languagePreference { get; set; }
    public bool isAdministrator { get; set; }
    public bool isActive { get; set; }
    public IEnumerable<usermaster> usersList{ get; set; }
    public usermaster EditUserData { get; set; }
}

如您所见,该表是从模型中的usersList加载的。 现在我正在尝试实现编辑用户功能。当用户点击编辑按钮时,我打开了部分视图:

<div hidden id="divEditUser" title="Edit user" style="border-radius: 7px">
@Html.Partial("~/Views/UserManagement/EditUser.cshtml", Model)
</div>

将id传递给控制器​​并获取用户数据,以便可以在新的局部视图中显示

function EditUserBtnClick(userid) {
$.ajax({
    type: "POST",
    url: "/UserManagement/EditUser",
    data: JSON.stringify({ userID: userid }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (edituserDataObj) {
        if (msg != null) {
            $("#divEditUser").dialog({ width: 350 });
        }
        else {
            $('#lblResult').val("Failed to delete user.");
        }
    },
    error: function () {
        return "error";
    }
});

我在这里正确地获得了edituserDataObj。但我不确定如何将其传递给部分视图EditUser.cshtml。我尝试通过将新的编辑用户数据添加到模型类属性public usermaster EditUserData { get; set; }来编辑模型。但是当我从部分视图中访问它时,数据为空。

[HttpPost]
public JsonResult EditUser(int userID)
{
    var user = DBManager.Instance.GetUserData(userID);
    return Json(user);
}

有没有办法将编辑用户数据传递给局部视图?

0 个答案:

没有答案