0

我有一个视图显示使用部分视图显示的一些用户信息。我必须包括使用弹出窗口更新该信息的可能性。我还希望我的弹出窗口使用部分视图。

如果保存时一切正常，我希望刷新用户信息，或者我希望弹出窗口显示验证错误（如果有）。

我尝试在弹出窗口中使用 Telerik 窗口。

发生验证错误时，一切正常。在这种情况下，版本部分视图不会保留为弹出窗口，而是填充到目标 div 中，用我的版本视图替换我的用户信息。

我应该如何解决这个问题？

这是主要观点：

@model Models.UserModel

@* Div Containing the user info partial view that needs to be refreshed*@
<div id="UserInfo">
    @{Html.RenderAction("_DisplayUserInfo", new { UserToDisplayId = Model.UserId }); }
</div>

@* link to open the edition popup *@    
<p>
    @Ajax.ActionLink("Edit","_EditUser",new { UserToEditId = Model.UserId}, new AjaxOptions { UpdateTargetId = "EditUser",
                                                                                   InsertionMode = InsertionMode.Replace,
                                                                                   OnSuccess= "openPopup()",
                                                                                   HttpMethod = "GET"}
    )
</p> 

@* Telerik window used as popup to display the edit partial view *@
@{  Html.Telerik().Window()
        .Name("EditWindow")
        .Title("Edit Controller info")
        .Content(@<text>
            @using (Ajax.BeginForm("_EditUser", new AjaxOptions { HttpMethod = "Post"
                                                                          ,UpdateTargetId = "UserInfo"                                                                          
                                                                          ,OnSuccess = "closePopup()"}))
            {                                  
                <div id="EditUser">

                </div>                                              
            }
            </text>)
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
} 

<script type="text/javascript">

    function openPopup() {        
        $('#EditWindow').data('tWindow').center().open();
    }

    function closePopup() {
        var window = $("#EditWindow").data("tWindow");
        window.close();
    }

</script>

这是显示用户信息的局部视图：

@model Models.UserModel

<div>
    <h2>@Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName) </h2> 
    @Html.DisplayFor(model => model.JobTitle)
    <br />@Html.DisplayFor(model => model.Email)
</div>

这是用于版本的部分视图：

@model Models.UserModel

<fieldset>
    <legend></legend>

    @Html.HiddenFor(model => model.UserId)

    <div id="1" class="control-group">
        @Html.LabelFor(model => model.Email)
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>

    <div id="2" class="control-group">
        @Html.LabelFor(model => model.JobTitle)
        @Html.EditorFor(model => model.JobTitle)
        @Html.ValidationMessageFor(model => model.JobTitle)
    </div>

    <p id="5" class="form-actions">
        <input type="submit" value="Save"  />       
        <input type="button" value="Cancel" onclick="closePopup()" />     
    </p>  

</fieldset>

这是我的控制器

public ActionResult _DisplayUserInfo(decimal UserToDisplayId)
{
    // here i build my model 
    //....
    // and send it back to the partial view
    return PartialView(MyUserToDisplay);
}

[HttpGet]
public ActionResult _EditUser(decimal UserToEditId)
{
    // here i build my model 
    //....
    // and send it back to the partial view
    return PartialView(MyUserToEdit);
}

[HttpPost]
public ActionResult _EditUser(UserModel UserToEdit)
{
    if (!ModelState.IsValid)
    {
    //Im guessing this is where I am doing it wrong
        return PartialView(CToEdit);
    }

    //here i save
    //...
    //and redirect
    return RedirectToAction("_DisplayUserInfo", new { UserToDisplayId = CToEdit.UserId });

}
4

1 回答 1

0

所以！经过数小时的在这里挣扎是我的解决方案！不知道这是否是正确的方式，但它确实是我想要的！

在主视图中，我没有将 ajax 表单结果重定向到第一个部分视图（显示用户信息的视图），而是将其重定向到包含弹出窗口的 div（我知道，第一步很明显，但我花了几个小时弄明白...）

所以这里是“UpdateTargetId”的变化：

@* Telerik window used as popup to display the edit partial view *@
@{  Html.Telerik().Window()
        .Name("EditWindow")
        .Title("Edit Controller info")
        .Content(@<text>
            @using (Ajax.BeginForm("_EditUser", new AjaxOptions { HttpMethod = "Post"
                                                                          ,UpdateTargetId = "EditUser"                                                                          
                                                                          ,OnSuccess = "closePopup()"}))
            {                                  
                <div id="EditUser">

                </div>                                              
            }
            </text>)
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
}

然后我修改了弹出部分视图以添加一个隐藏输入，其中包含模型状态是否有效： 

@Html.Hidden("MytestField",ViewData.ModelState.IsValid)

最后我修改了 ClosePopup() 函数，以便仅在模型状态有效时关闭弹出窗口，并添加了一个 ajax 请求来刷新 UserInfo 部分视图：

函数 ManagePopup() {

if ($('MytestField').val() == 'True') {
    var window = $('#EditWindow').data('tWindow');
    window.close();
}

$.ajax({
    type: 'GET',
    url: '/UserController/_DisplayUserInfo',
    data: { UserToDisplayId : '@Model.UserId' },
    cache: false,
    success: function (result) {
        $('#UserInfo').html(result);
    }
});

}

于 2013-06-04T13:36:26.193 回答