表中多个按钮进行操作不需要跳转页面的实现

Posted 2020-07-30 众里寻他千万度

有一个通用的需求，就是在一张表格中对一条记录进行多种操作，计划采取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键会在浏览器 控制台窗口显示信息。
}

}

}