0

部分ビューを使用して表示されるいくつかのユーザー情報を示すビューがあります。ポップアップ ウィンドウでその情報を更新する可能性を含める必要があります。また、ポップアップで部分ビューを使用したいと思います。

保存時にすべてがうまくいった場合にユーザー情報を更新するか、ポップアップに検証エラーがあれば表示するようにします。

ポップアップにテレリックウィンドウを使用してそうしようとしました。

検証エラーが発生した場合を除いて、すべて正常に機能します。その場合、ポップアップとして残る代わりに、エディションの部分ビューがターゲット 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>

Edition で使用される部分ビューを次に示します。

@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() 関数を変更し、UserInfo 部分ビューを更新する ajax 要求を追加しました。

関数 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 に答える