使用Ajax Postback更新FancyBox表单

时间:2017-02-23 02:06:19

标签: jquery ajax asp.net-mvc fancybox

我目前有一个部分视图,可以在您加载页面时自动触发fancybox弹出窗口。这部分工作,窗口打开并显示数据。

当我单击按钮时,我回发到保存数据的控制器,然后返回与新视图模型对象相同的局部视图。

我能够回发到控制器ok,但是当返回部分视图时,我似乎无法更新fancybox窗口的视图。我希望窗口能够使用新数据进行更新或刷新,但它仍然包含旧数据。

加载到fancybox弹出窗口的部分视图:

<form id="formSurvey">
            <span>@Html.TextAreaFor(x => x.UserAnswer1, new { style = "width:300px;", maxlength = "250", name = "Answer1", id = "Answer1" })</span>
    </div>
</form>

控制器操作:

    [HttpPost]
    public ActionResult SurveySave(SurveyDTO Survey)
    {
        //save data here

        SurveyViewModel svm = new SurveyViewModel();
        return PartialView("~/Views/Survey/Survey.cshtml", svm);
    }

JS

<script type="text/javascript">

$(window).load(function () {
    $.fancybox("#formSurvey");
});

function clickedClose(e) {
    $.fancybox.close();
}
function clickedNext(e, formDiv) {
    var SurveyDTO = {
        Question1: $('#Question1Field').val(),
        Question2: $('#Question2Field').val(),
        Answer1: $('#Answer1').val(),
        Answer2: $('#Answer2').val(),

    };
    var sURL = '@Url.Action("SurveySave", "Home")'
    $.ajax({
        url: sURL,
        type: "POST",
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({ 'Survey' : SurveyDTO }),
        success: function (data) {
        }
    });
}

我知道我需要处理返回的数据并重新加载到Fancybox中。我不确定是否需要将表单转换为AJAX表单,或者是否有其他方法可以刷新已打开的fancybox窗口。感谢

0 个答案:

没有答案