Binding a table with List

Anjali Agarwal 1,386 Reputation points
2023-05-11T23:23:28.6033333+00:00

I need to display two search box and a table on my view. below is the model class:

public partial class Transaction
{
  public string TransactionId { get; set; } = null!;
  public string? ReceiptNumber { get; set; }
  public string? EmailAddress { get; set; }
  public string? Items { get; set; }
  public string? status { get; set; }
  public virtual List<TransactionItem> Transactions { get; set; } = new List<TransactionItem>(); 
}
public partial class TransactionItem
{
  public string TransactionId { get; set; } = null!;
  public string ItemId { get; set; } = null!;
  public string? TransactionItemXml { get; set; }
}

I need to make two search boxes, one that accepts Email address and another one that accepts ReceiptNumber. The realtionship between Transaction table and TrasactionItem table is one to many. Once the customer enters the Receipt number and email address then I need to return List of Items, status and type of items of the product. Type of items is one of the attribute of TransactionItemXml. I wrote the query to return Items and Type of Items by parsing the XML document. below is what I have that I return:

 public List<Transaction> getTransactionById(string TransId)
        {
   foreach (var r in result)
            {
                string ReType = GetTypeFromXML(r[5].ToString());
                List<Transaction> transaction = new List<Transaction>
                {
                    new Transaction{Items =r[0].ToString(), Status=r[1].ToString(), Type=ReType}
                };
             }
			 }
private string GetTypeFromXML(string xml)
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.LoadXml(xml);
            XmlElement root = xmlDoc.DocumentElement;
            if(root.HasAttribute("Type"))
            {
                return root.GetAttribute("Type").ToString(); 
            }
            else
            return "";
        }

result is something that is retuned by LINQ query. Type property does not exists in Transaction Model class. I am getting an error

for "Type" in method "getTransactionById". This is what i have in the controller:

    [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Display(SelfServiceTransaction trans)
        {
            Transactions transactions = new Transactions(_recorderContext);
            List<Transaction>  = transactions.getTransactionById(trans.TransactionId);
            return View();
        }

This is what I have in the view:

	<div style="margin-top:20px">
     <form asp-action="Display">
         <div asp-validation-summary=ModelOnly class="text-danger"></div>
           <div class="form-group row">
              <div class="col">
                <label asp-for="ReceiptNumber"  class=" control-label required" style="font-weight:bold;"></label>
                <input asp-for="ReceiptNumber" class="form-control"  />
                <span asp-validation-for="ReceiptNumber" class="text-danger"></span>
         </div>
		     <div class="form-group row">
              <div class="col">
                <label asp-for="EmailAddress"  class=" control-label required" style="font-weight:bold;"></label>
                <input asp-for="EmailAddress" class="form-control"  />
                <span asp-validation-for="EmailAddress" class="text-danger"></span>
         </div>
		
         <input type="submit" value="Search" />
         </div>

         <div>

// when the customer clicks on search button, I want to display the table that shows status, items and type on the same page where at the top, the email address and Receipt number is shown and at the bottom, I need to show the table. Below is something that I want:

User's image

	 any help will be greatly appreciated.
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,404 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,419 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,651 questions
{count} votes

Accepted answer
  1. Chen Li - MSFT 1,221 Reputation points
    2023-05-12T08:28:44.9933333+00:00

    Hi @Anjali Agarwal,

    If you can't change the database table then you can add the [NotMapped] attribute to Type property after changing the model.

    I made a simple example, you can use it as a reference.

    You want the query form to be on the same page as the displayed data, but since your form uses SelfServiceTransaction and the displayed data uses List<Transaction>, I created a ViewModel to contain both Models.

    Models:

     public class Transaction
       {
            [Key]
            public int TransactionId { get; set; }
            public string? ReceiptNumber { get; set; }
            public string? EmailAddress { get; set; }
            public string? Items { get; set; }
            //Add this attribute
            [NotMapped]
            public string? Type { get; set; }
            public string? status { get; set; }
            public virtual List<TransactionItem> Transactions { get; set; } = new List<TransactionItem>();
        }
    
        public partial class TransactionItem
        {
            public int TransactionId { get; set; }
            [Key]
            public int ItemId { get; set; } 
            public string? TransactionItemXml { get; set; }
        }
    
    
        public class SelfServiceTransaction
        { 
            public string ReceiptNumber { get; set; }
            public string EmailAddress { get; set; }
    
        }
    
        public class ViewModel
        {
            public SelfServiceTransaction SelfServiceTransactions { get; set; }
            public List<Transaction> TransactionList { get; set; }
        }
    

    Controller:

     [HttpGet]
            public IActionResult Display() 
            {
                return View();
            }
            
            [HttpPost]
            [ValidateAntiForgeryToken]
            public async Task<IActionResult> Display(ViewModel trans)
            {
                List <Transaction> TransList  = getTransactionById(trans.SelfServiceTransactions);
                ViewModel viewmodel = new ViewModel();
                viewmodel.TransactionList = TransList;
                return View(viewmodel);
            }
    
            private List<Transaction> getTransactionById(SelfServiceTransaction trans)
            { 
                var transaction = _context.Transaction.Where(t => t.ReceiptNumber == trans.ReceiptNumber && t.EmailAddress == trans.EmailAddress).ToList();
                foreach (var item in transaction)
                {
                    item.Type = "ReType";
                }
                return transaction;
            }
    
    

    Display.cshtml:

    @model TestAPP.Models.ViewModel
    
    <div style="margin-top:20px">
        <form asp-action="Display" method="post">
            <div asp-validation-summary=ModelOnly class="text-danger"></div>
            <div class="form-group row">
                <div class="col">
                    <label asp-for="@Model.SelfServiceTransactions.ReceiptNumber" class=" control-label required" style="font-weight:bold;"></label>
                    <input asp-for="@Model.SelfServiceTransactions.ReceiptNumber" class="form-control" />
                    <span asp-validation-for="@Model.SelfServiceTransactions.ReceiptNumber" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col">
                    <label asp-for="@Model.SelfServiceTransactions.EmailAddress" class=" control-label required" style="font-weight:bold;"></label>
                    <input asp-for="@Model.SelfServiceTransactions.EmailAddress" class="form-control" />
                    <span asp-validation-for="@Model.SelfServiceTransactions.EmailAddress" class="text-danger"></span>
                </div>
            </div>
            <div>
                <input type="submit" value="Search" />
            </div>
        </form>
    </div>
    
    <div>
        @if (Model != null && Model.TransactionList.Count() != 0)
        {
            <table class="table">
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>Items</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.TransactionList)
                    {
                        <tr>
                            <th>@item.status</th>
                            <th>@item.Items</th>
                            <th>@item.Type</th>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
    

    Test Result:

    When I input and click Search:User's image


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,

    Chen Li

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful