如何修改视图中的列表项(在视图中添加/删除列表项)
本文关键字:视图 列表 添加 删除 删除列 何修改 修改 | 更新日期: 2023-09-27 18:13:54
我有一个视图,该视图显示了基于他们从文档中检索到的PO的行项列表。一旦视图加载了底部的行项,我在条目旁边有一个"x"按钮,但不明白如何在不重新加载页面的情况下对视图项执行操作。
本质上,当用户完成"删除"行项时,我希望它们提交,然后表单将重新组合在一起,但只是保留视图上的行。
(注意:使用filehelper来解析一个特殊分隔的文件,这就是为什么有这么多额外的运行和流和字符串。还要注意;)
Class -
namespace WebDocumentEditor
{
public class LineItemListInfo
{
public string asiLineNumber { get; set; }
public string itemSKU { get; set; }
public string itemQTY { get; set; }
public string itemUOM { get; set; }
public string itemPrice { get; set; }
}
}
控制器构建列表:
public ActionResult SearchForPODocument(string POinput)
{
string contents = string.Empty;
if (POinput == "" | POinput == null)
{
return RedirectToAction("Index");
}
LoadConfigValues();
foreach (string file in Directory.GetFiles(exportsArchive))
{
using (var stream = new StreamReader(file))
{
contents = stream.ReadToEnd().ToString();
if (contents.Contains(POinput))
{
SendPOfor850Trim(contents, POinput);
ViewBag.DocumentWithPO = documentWithPO;
SendFoundPOForASIHDRParse(documentWithPO);
SendFoundPOForASISTAParse(documentWithPO);
SendFoundPOForASILINParse(documentWithPO);
break;
}
}
}
ViewBag.PoNotFound = "PO Not Found";
return View();
}
//Helper Method to break up info from ASISLIN Line
public void SendFoundPOForASILINParse(string documentWithPO)
{
var engine = new FileHelperEngine<ParseASILIN>();
var result = engine.ReadString(documentWithPO);
foreach (ParseASILIN parse in result)
{
if (parse.lineID.Contains("ASILIN"))
{
//action on ASILIN line found
SetupLineItemInfo(parse.asiLineNumber, parse.itemSKU, parse.itemQTY, parse.itemUOM, parse.itemPrice);
}
ViewBag.LineItemList = lineItemList;
}
}
//This moves the parsed info into the LineItemLiftInfo class properties to be appended as a whole line
public void SetupLineItemInfo(string asiLineNumber, string itemSKU, string itemQTY, string itemUOM, string itemPrice)
{
LineItemListInfo fullLineItemCombined = new LineItemListInfo();
fullLineItemCombined.asiLineNumber = asiLineNumber;
fullLineItemCombined.itemSKU = itemSKU;
fullLineItemCombined.itemQTY = itemQTY;
fullLineItemCombined.itemUOM = itemUOM;
fullLineItemCombined.itemPrice = itemPrice;
lineItemList.Add(fullLineItemCombined);
}
视图:
ASILIN:
<ul id="lineItems" class="list-unstyled">
<li>
ASILineNumber | Item Price | Item Quantity | Item SKU | Item Unit Of Measurement
</li>
@foreach (var item in (List<LineItemListInfo>)ViewBag.LineItemList)
{
<li>
<button type="button" id="removeLine"class="glyphicon glyphicon-remove"></button>
@item.asiLineNumber | @item.itemPrice | @item.itemQTY | @item.itemSKU | @item.itemUOM
</li>
}
</ul>
您需要以某种方式在客户端标记要删除的项,然后将该状态发送回服务器。利用视图模型,您可以添加一个额外的属性,例如bool Delete
。然后,您可以在服务器端过滤标记为true的bool项,并从集合中删除它们。
如果您不想使用视图模型,那么您可以让每次单击"x"来删除发送一个AJAX请求到某个服务器端端点,然后该端点将实际删除实体。在AJAX中,您只需发布类似主键的内容,然后在删除项目之前使用它从数据库中查找项目。