C# 如何修改视图中的列表项（添加/删除视图中的列表项）

我有一个视图，显示了基于他们搜索的采购订单的行项目列表，从文档中获取。在视图底部加载行项目后，我在条目旁边有一个“x”按钮，但我不知道如何在不重新加载页面的情况下对视图项目执行操作

本质上，当用户完成“删除”行项目时，我希望它们提交，然后表单将重新组合在一起，但只保留视图上的行

（注意：使用Filehelpers来解析一个特殊分隔的文件，这就是为什么会有这么多额外的run-around、stream和string。另请注意；这是新的！）

类别-

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);
    }

PublicActionResult SearchForPodDocument（字符串输入）
{
string contents=string.Empty；
如果（POinput==“”| POinput==null）
{
返回操作（“索引”）；
}
LoadConfigValues（）；
foreach（Directory.GetFiles（exportsArchive）中的字符串文件）
{
使用（var stream=新的StreamReader（文件））
{
contents=stream.ReadToEnd（）.ToString（）；
if（contents.Contains（POinput））
{
SendPOfor850Trim（内容、输入点）；
ViewBag.DocumentWithPO=DocumentWithPO；
SENDFOUNPOFORASIHDRPARSE（带有采购订单的文件）；
SendFoundPOForASISTAParse（带有PO的文档）；
为SILINPARSE发送FOUNDPO（带有PO的文件）；
打破
}
}
}
ViewBag.PoNotFound=“未找到采购订单”；
返回视图（）；
}
//从ASISLIN行分解信息的助手方法
公共void sendfundpoforasilinparse（字符串documentWithPO）
{
var engine=new FileHelperEngine（）；
var结果=engine.ReadString（documentWithPO）；
foreach（ParseASILIN解析结果）
{
if（parse.lineID.Contains（“ASILIN”））
{
//找到ASILIN线路上的操作
SetupLineItemInfo（parse.asiLineNumber、parse.itemSKU、parse.itemQTY、parse.itemUOM、parse.itemPrice）；
}
ViewBag.LineItemList=LineItemList；
}
}
//这会将解析后的信息移动到LineItemLiftInfo类属性中，作为整行追加
public void SetupLineItemInfo（字符串asiLineNumber、字符串itemSKU、字符串itemQTY、字符串itemUOM、字符串itemPrice）
{
LineItemListInfo fullLineItemCombined=新的LineItemListInfo（）；
fullLineItemCombined.asiLineNumber=asiLineNumber；
fullLineItemCombined.itemSKU=itemSKU；
fullLineItemCombined.itemQTY=itemQTY；
fullLineItemCombined.itemUOM=itemUOM；
fullLineItemCombined.itemPrice=itemPrice；
lineItemList.Add（fullLineItemCombined）；
}

视图：

阿西林：

ASILineNumber |商品价格|商品数量|商品SKU |商品计量单位

@foreach（列表中的变量项）ViewBag.LineItemList
{

@item.asiLineNumber |@item.itemPrice |@item.itemQTY |@item.itemSKU |@item.itemUOM

}

您需要以某种方式在客户端标记要删除的项目，然后将该状态发回服务器。利用视图模型，可以添加其他属性，例如bool

Delete

。然后，服务器端您可以过滤bool标记为true的项，并将其从集合中删除

---

如果您不想使用视图模型，那么您可以让每次单击“x”删除将AJAX请求发送到某个服务器端端点，该端点将实际删除该实体。在AJAX中，您只需发布类似主键的内容，然后在删除该项之前使用它从数据库中查找该项。

您可以使用AJAX吗？您可以公开一个接受Http.Delete谓词的公共方法（即Remove）。完成后，可以使用JavaScribot（.success（））删除这些行。绝对不需要再做一次post请求查看此链接，achan-这是我需要提请注意的缺失链接：在视图中的列表上创建并使用我自己的javascript/jquery操作，只需在按钮操作上调用脚本即可。由于我使用的是MVC5，很难找到实现脚本的相关示例，这就是丢失的部分。我需要配置（Angular、jquery、java、ajax等）并使用@section scripts{}实现脚本。为了继续，我将使用@section scripts{//your script goes here}。部分让人困惑的是，MVC在很大程度上不关心您如何做任何事情。在视图中使用节来实现脚本是很常见的，因为它允许您在模板中的结束正文标记之前转储它。否则，使用节就没有什么魔力了。如果您不想要或不需要那个特定的位置，那么您可以在视图中的任意位置打开一个脚本标记。此外，您可以在节声明中引用外部脚本，因此使用节并不意味着您需要实际的脚本主体；学习曲线。我在同一个结构中使用的4种不同的语言和语法（更不用说你可以使用的10+了）掌握不好，这让我很难掌握；尤其是假设你知道每种语言的规则。难以置信的可扩展性和易操作性，我只需要在我的背景下突破一切，因为我有MVC的自由。最好从小事做起。人们试图跳进一个完全动态的JavaScrip构建中

<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>