2013-06-03 19 views
0

我有一个视图显示了使用局部视图显示的一些用户信息。 我必须包括用弹出窗口更新信息的可能性。 我也想我的弹出使用部分视图。如何在编辑telerik窗口中的数据时显示验证错误?

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

我试图用弹出窗口的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 }); 

} 

回答

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

然后我修改了弹出局部视图中添加含有是否ModelState中隐藏的输入有效与否:

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

最后我修改ClosePopup()函数,以便当ModelState中才有效关闭弹出,并增加了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); 
    } 
}); 

}