@using (Ajax.BeginForm("List", "SysLog", null, new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "dvQueryList",
InsertionMode = InsertionMode.Replace,
OnBegin = "StartLoading();",
OnComplete = "StopLoading();",
OnSuccess = "QueryForm_OnSuccess",
OnFailure = "QueryForm_OnFailure"
}, new { @id = "QueryForm" }))
{
<div class="row mb-2 form-valign-center">
<div class="col-xl-1">
<b>日期</b>:
</div>
<div class="col-xl-5">
<div class="row">
<div class="col-xl-5">
<input type="text" class="form-control datepicker-here" id="QueryStart" name="QueryStart" aria-describedby="開始" placeholder="請輸入日期">
</div>
<div class="col-xl-1 text-center">
<b>~</b>
</div>
<div class="col-xl-5">
<input type="text" class="form-control datepicker-here" id="QueryEnd" name="QueryEnd" aria-describedby="結束" placeholder="請輸入日期">
</div>
<div class="col-xl-1"></div>
</div>
</div>
<div class="col-xl-2">
<b>執行層級</b>:
</div>
<div class="col-xl-4">
@Html.DropDownList("QueryLv", (List<SelectListItem>)ViewBag.LevelList, new { @class = "form-control" })
</div>
</div>
<div class="row mb-2 form-valign-center">
<div class="col-xl-1">
<b>公司別</b>:
</div>
<div class="col-xl-4">
<select id="QueryCorp" name="QueryCorp" class="form-control"></select>
</div>
<div class="col-xl-1"></div>
<div class="col-xl-2">
<b>區域</b>:
</div>
<div class="col-xl-4">
<select id="QueryDep" name="QueryDep" class="form-control"></select>
</div>
</div>
<div class="row mb-2 text-right">
<div class="col-xl-12 ">
<button type="submit" id="submit" class="btn btn-primary">查詢</button>
</div>
</div>
}
<div class="form-margin-top" id="dvQueryList"></div>
黃色區域: Ajax包含的Form範圍
橘色區域:Ajax設定
藍色區域:Ajax送出欄位
綠色:Submit送出