Jeffrey's coding note

必要套件 : https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

畫面會分成三個步驟 1.輸入頁 2.確認頁 3.結果頁

首先在View中 第一頁是一個完整個View, 二三頁則為partial view

因此第一頁要設定layout, 二三頁的layout則為null

First page : 

@model InputPageViewModel

@section scripts {
    @* 引用此js才可使用Ajax.BeginForm *@
    <script src="@Url.Content("~/Content/js/jquery.unobtrusive-ajax.min.js")"></script>
    <script type="text/javascript">
        // 驗證
        function verify() {
        
        }
        
        // 導頁前動作
        function hideFirstPage() {
            $("#divInput").hide();
            $("#divConfirm").show();
            $("#divResult").hide();
        }
    </script>
}

@* 初始輸入頁 *@
<div id="divInput">
    @using (Ajax.BeginForm("ConfirmAction", "Home", new AjaxOptions()
    {
        HttpMethod = "Post",
        UpdateTargetId = "divConfirm",
        InsertionMode = InsertionMode.Replace,
        OnBegin = "verify",
        OnComplete = "hideFirstPage"
        // OnSuccess = "onSuccess(data, status, xhr)",
        // OnFailure = "onFailure(xhr, status, error)"

    }, new { @id = "inputForm" }))
    {
        @* your html in form *@
    }
</div>

@* 確認頁面 *@
<div id="divConfirm">
</div>


@* 結果頁 *@
<div id="divResult">
</div>

UpdateTargerId - 設定接到Response後的資料要放在哪個區塊內, 此範例後端會將輸入的資料整理成確認頁後回傳回來, 將接收到的資料放入divConfirm內

OnBegin - 可以設定在Form被Submit前 先執行的一段js function, 可以用來做一些前端的檢查, 檢查通過(return true)時Form才會真的被submit到後端Controller

OnComplete - 可以在收到後端的Response後 執行一段js function, 此範例是將divInput隱藏/divConfirm顯示

 

Second page : 

@model ConfirmPageViewModel

@{
    Layout = null;
}

<script>
    $(document).ready(function () {
        $('#btnConfirm').click(function () { $('#confirmForm').submit(); });
    })

    // 返回前動作
    $(document).on("click", "#btnBack", function () {
        $("#divInput").show();
        $("#divConfirm").hide();
        $("#divResult").hide();
    });

    // 導頁前動作
    function hideConfirmPage() {
        $("#divInput").hide();
        $("#divConfirm").hide();
        $("#divResult").show();
    }
</script>


@using (Ajax.BeginForm("ResultAction", "Home", null, new AjaxOptions()
{
    HttpMethod = "Post",
    UpdateTargetId = "divResult",
    InsertionMode = InsertionMode.Replace,
    // OnBegin = "verify",
    OnComplete = "hideConfirmPage"
    // OnSuccess = "onSuccess(data, status, xhr)",
    // OnFailure = "onFailure(xhr, status, error)"
}, new { @id = "confirmForm" }))
{
    <!-- two buttons : back and confirm -->
    <a id="btnBack" href="javascript:void(0);" class="c-btn c-btn--secondary" data-history-back>
        <span>Back</span>
    </a>
    <a id="btnConfirm" href="javascript:void(0);" class="c-btn c-btn--primary">
        <span>Confirm</span>
    </a>
}

Result page : 

@model ResultPageViewModel

@{
    Layout = null;
}

<script>
    
</script>

@* Your html in result page *@

二三頁的Html會分別放入第一頁的divConfirm, divResult

因此不需要Layout, 只要放入要顯示的資料就部分的Html即可