How can I Modify List items in View (add/remove list items in view)

Question

I have a view that shows a list of line items based on a PO they searched, fetched from a document. Once the view is loaded with the line items at the bottom, I have a "x" button next to the entry but not understanding how to perform action on the view items without reloading the page.

Essentially, when the user is done "removing" the line items, I want them to submit and then the form will be put back together but just with the lines left on the view.

(Note: Using Filehelpers to parse a spacially delimited file, which is why there is so much extra run around and stream and strings. Also note; New to this!)

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

    }
}

Controller building list:

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

View:

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>

Answer 1

You need to somehow mark the items for deletion client-side and then post that status back to the server. Utilizing view models, you can add an additional property, such as a bool Delete. Then, server-side you can filter items with that bool marked as true, and remove them from the collection.

If you don't want to use view models, then you can have each click of the "x" to delete send an AJAX request to some server-side endpoint that will then actually delete the entity. In your AJAX, you'd simply post something like the primary key, and then use that to lookup the item from the database before deleting it.