2013-06-03 48 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); 
    } 
}); 

}