C# 使用Jquery响应更新ViewModel列表
我正在处理一个Asp.Net应用程序，我的页面上有一个模式，允许用户添加无限数量的操作 我的主页视图模型C# 使用Jquery响应更新ViewModel列表,c#,jquery,ajax,asp.net-mvc,list,C#,Jquery,Ajax,Asp.net Mvc,List,我正在处理一个Asp.Net应用程序，我的页面上有一个模式，允许用户添加无限数量的操作 我的主页视图模型 //Other declared variables //List that i want to get updated once the operations are successfully added public List<NFOperationViewModel> ListeOperations { get; set; } //其他声明的变量 //成功添加操作
//Other declared variables
//List that i want to get updated once the operations are successfully added
public List<NFOperationViewModel> ListeOperations { get; set; }
//其他声明的变量
//成功添加操作后要更新的列表
公共列表ListOperations{get；set；}
@model ProjetNotification.ViewModels.Notification.SaveNFDemandeExpressionViewModel
@using (Html.BeginForm("ValidateExpression","NFDemande", null, FormMethod.Post))
{
//...other blabla
<div class="divBlocks">
<h4><b>Liste des opérations</b></h4>
<table class="table table-striped" id="UpdateOperations"> // Table where the Ajax Response gets displayed
</table>
</div>
}
//The Modal for adding the operations
<div class="modal fade" id="OperationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-size-6P" role="document">
<form id="OprForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Ajouter des Operations</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-hover" id="OperationTable">
<thead>
<tr>
<td>N° Phase</td>
<td>Etape AIP/QRA</td>
<td>Type de Notification</td>
<td>Phase Designation</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.DropDownList("OPRPhaseNum1", new SelectList(ViewBag.ListesPhases, "Value", "Text"), "", new { @class = "form-control", @id = "OPRPhaseNum1" })
</td>
<td>
<input type="text" class="form-control" name="OPREtapeAIP1" id="OPREtapeAIP1" />
</td>
<td>
@Html.DropDownList("OPRNFType1", new SelectList(ViewBag.ListesTypesNotifications, "Value", "Text"), "", new { @class = "form-control", @id = "OPRNFType1" })
</td>
<td>
<input type="text" class="form-control" name="OPRDesignation1" id="OPRDesignation1" />
</td>
<td>
<button type="button" class="btn AddNewOperation" value="Add"><span class="material-icons md--blue-corporate size-3P">add_circle</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-SkyBlue" data-content="OprForm" id="SaveOpr">Enregistrer</button>
</div>
</div>
</form>
</div>
</div>
@model ProjetNotification.ViewModels.Notification.savenfdemmandeexpressionviewmodel
@使用（Html.BeginForm（“ValidateExpression”、“NFDemande”、null、FormMethod.Post））
{
//…其他废话
行动清单
//显示Ajax响应的表
}
//用于添加操作的模式
A外部des操作
&时代；
N°相位
Etape AIP/QRA
类型取消通知
相位指定
@Html.DropDownList（“OPRPhaseNum1”、新选择列表（ViewBag.ListesPhases、“Value”、“Text”）、“”、新{@class=“form control”、@id=“OPRPhaseNum1”}）
@Html.DropDownList（“OPRNFType1”，新选择列表（ViewBag.listedypes通知，“值”，“文本”），“”，新{@class=“form control”，@id=“OPRNFType1”}）
加上一个圆圈
费尔默
登记员
<script>
//Function that adds rows and assigns different ids
$(function () {
$("#OperationTable").on('click', 'button.AddNewOperation', function () {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length - 1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function () {
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if (id) {
var i = id.substr(id.length - 1);
var prefix = id.substr(0, (id.length - 1));
el.attr('id', prefix + (+i+1));
el.attr('name', prefix + (++i));
OperationsTabLength = i;
}
});
$clone.find('input:text').val('');
$tr.closest('table').append($clone); ;
});
});
//OnClick save Modal, the Ajax Function that calls the controller method for rendering the partial view of operations
$(function () {
$("#SaveOpr").click(function () {
var tab = [];
var i = 1;
var tablenght = 0;
//Creates the array of operations with all the added inputs
while (i <= OperationsTabLength) {
var OPRPhaseNum = $("#OPRPhaseNum" + i).val()
var OPREtapeAIP = $("#OPREtapeAIP" + i).val()
var OPRNFType = $("#OPRNFType" + i).val()
var OPRDesignation = $("#OPRDesignation" + i).val()
if (OPRPhaseNum !== "" && OPREtapeAIP !== "" && OPRNFType !== "") { tablenght = tab.push([OPRPhaseNum, OPREtapeAIP, OPRNFType, OPRDesignation]) }
i++
}
if (tablenght > 0) {
$.ajax({
url: '@Url.Action("AddOperations", "NFDemande")',
type: 'POST',
data: { OperationTab: tab },
dataType: 'html',
}).done(function (result) {
$('#UpdateOperations').html(result);
$("#OperationModal").modal('hide');
}).fail(function (Error) {
alert(Error);
});
}
});
});
</script>
//用于添加行和分配不同ID的函数
$（函数（）{
$（“#OperationTable”）。在（'click'、'button.AddNewOperation'，函数（）{
var$tr=$（this.closest（'tr'）；
var allTrs=$tr.closest（'table'）。find（'tr'）；
var lastTr=allTrs[allTrs.length-1]；
var$clone=$（lastTr.clone（）；
$clone.find（'td'）。每个（函数（）{
var el=$（this.find（':first child'）；
var id=el.attr（'id'）| | null；
如果（id）{
变量i=id.substr（id.length-1）；
var prefix=id.substr（0，（id.length-1））；
el.attr（'id'，前缀+（+i+1））；
el.attr（'name'，前缀+（++i））；
操作表长度=i；
}
});
$clone.find（'input:text'）.val（''）；
$tr.close（'table'）.append（$clone）；
});
});
//OnClick save Modal是一个Ajax函数，它调用controller方法来呈现操作的部分视图
$（函数（）{
$（“#SaveOpr”）。单击（函数（）{
var选项卡=[]；
var i=1；
var-tablenght=0；
//使用所有添加的输入创建操作数组
而（i0）{
$.ajax({
url:'@url.Action（“AddOperations”，“NFDemande”），
键入：“POST”，
数据：{OperationTab:tab}，
数据类型：“html”，
}).完成（功能（结果）{
$（'#UpdateOperations'）.html（结果）；
$（“#操作模式”）.model（'hide'）；
}).失败（功能（错误）{
警报（错误）；
});
}
});
});
[HttpPost]
public PartialViewResult AddOperations(string[][] OperationTab)
{
List<NFOperationViewModel> ListOperations = new List<NFOperationViewModel>();
if (OperationTab == null)
{
return null;
}
foreach (string[] item in OperationTab)
{
NFOperationViewModel eqm = new NFOperationViewModel
{
NotificationNum = "",
OperationPhase = (new Services.Common.ParametrageCommun.PhaseService(this.context, this.currentLanguage)).GetPhase(int.Parse(item[0])),
OperationEtapeAIP = item[1],
OperationNotificationType = (new Services.Common.ParametrageCommun.TypeNotificationService(this.context, this.currentLanguage)).GetNotificationType(int.Parse(item[2])),
OperationDesignation = item[3]
};
ListOperations.Add(eqm);
}
return PartialView("~/Views/NFDemande/PartialView/NFOperations.cshtml", ListOperations);
[HttpPost]
公共PartialViewResult AddOperations（字符串[][]操作选项卡）
{
List ListOperations=新列表（）；
if（OperationTab==null）
{
返回null；
}
foreach（OperationTab中的字符串[]项）
{
NfooperationViewModel eqm=新的NfooperationViewModel
{
NotificationNum=“”，
OperationPhase=（new Services.Common.ParameterAgeCommun.PhaseService（this.context，this.currentLanguage））.GetPhase（int.Parse（项[0]），
OperationEtapeAIP=项目[1]，
OperationNotificationType=（new Services.Common.ParameterAgeCommunic.TypeNotificationService（this.context，this.currentLanguage））.GetNotificationType（int.Parse（项[2]），
操作名称=项目[3]
};
ListOperations.Add（eqm）；
}
返回PartialView（“~/Views/NFDeman