Question

我有一个视图，显示使用局部视图显示的一些用户信息。我必须包括用弹出窗口更新该信息的可能性。我也想让我的弹出窗口使用局部视图。

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

我尝试使用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 });

}

Answer 1

原来如此！经过几个小时的挣扎，这是我的解决方案！不确定它是否是正确的方式，但它确实是我想要的！

在主视图中，不是将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（）函数，以便仅在modelstate有效时关闭弹出窗口并添加ajax请求来刷新UserInfo局部视图：

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

}

在telerik窗口中编辑数据时如何显示验证错误？

1 个答案: