表中多個按鈕進行操作不需要跳轉頁面的實現
有一個通用的需求,就是在一張表格中對一條記錄進行多種操作,計劃採取ajax非同步方式的操縱資料庫。
主檢視:
<td>
<div class="btn-group btn-group-sm">
<a href="@Url.Action("DetailsAdmin", "ApplicationProject", new { id = item.ApplicationProjectID })" class="btn btn-primary" role="button">檢視專案內容</a>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only" >切換下拉選單</span>
</button>
<ul class="dropdown-menu" role="menu">
<li> <a href="@Url.Action("EditAdmin", "ApplicationProject", new { id = item.ApplicationProjectID })">編輯</a></li>
<li> <a href="javascript:deleteApplicationProject('@item.ApplicationProjectID')">刪除</a></li>
<li> <a href="javascript:updateApplicationProject('@item.ApplicationProjectID','submitSingle')">提交</a></li>
<li> <a href="javascript:updateApplicationProject('@item.ApplicationProjectID','submitNotSingle')">取消提交</a></li>
<li> <a href="javascript:updateApplicationProject('@item.ApplicationProjectID','checkPassSingle')">初審通過</a></li>
<li> <a href="javascript:updateApplicationProject('@item.ApplicationProjectID','checkNotPassSingle')">初審不通過</a></li>
</ul>
</div>
</td>
@* 建立一個隱藏表單,可以響應多個不同的操作,提交到不同的控制器*@
<form id="applicationProjectForm" method="post"><input type="hidden" name="id" id="applicationProjectId" /></form>
2、指令碼檔案
<script type="text/javascript"> @* 定義一個cshtml檔案比單獨定義一個js檔案更加有用。居然在js裡面還可以使用url、html輔助方法。*@
// _reviewProjectID = $("reviewProjectID").val();
function updateApplicationProject(id, action,reviewProjectId) {
$("#applicationProjectId").val(id);
var choice = confirm("你確認進行進行操作嗎?");
if (choice == true)
{
switch (action) {
case 'submitSingle':
$("#applicationProjectForm").attr('action', '@Url.Action("MakeASubmit")').submit();
break;
case 'submitNotSingle':
$("#applicationProjectForm").attr('action', '@Url.Action("MakeANotSubmit")').submit();
break;
case 'checkPassSingle':
$("#applicationProjectForm").attr('action', '@Url.Action("MakeAPassCheck")').submit();
break;
case 'checkNotPassSingle':
$("#applicationProjectForm").attr('action', '@Url.Action("MakeANotPassCheck")').submit();
break;
default:
console.debug('Unknown action ' + action); //寫給瀏覽器除錯用的,按F12鍵會在瀏覽器 控制檯視窗顯示資訊。
}
}
}