locked
.net core razor - how to populate column using lookup from another column RRS feed

  • Question

  • User915516305 posted

    Hi,

    new to .net core and have developed a working CRUD using  https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/?view=aspnetcore-2.2

    Would like to extend this as follows

    we have a column product type (numbers 1 to 10) which in this table and would ideally like user to be able to select a small button to side of this column to call a lookup routine which displays product type no and product type name ( the 2 columns in this lookup table) and populates this column in CRUD with selection.

    Anyone got simple working example of similar.

    Thanks

    Friday, May 17, 2019 11:19 AM

Answers

  • User-1764593085 posted

    Hi poR,

    Below is a simple demo which uses a dropdown list whose data is retrieved from a ProductType table.

    When you select, it will assign the option value to the product_type_code column td of current tr.

    Model:

    public class Product_Type
        {
            [Key]
            public int Product_Type_Code { get; set; }
            public string Product_Type_Name { get; set; }
        }

    DbContext:

    public DbSet<Product_Type> Product_Types {get;set;}

    PageModel:

    public IList<Product> Products { get;set; }
    public SelectList ProductTypes { get; set; } public async Task OnGetAsync() { ProductTypes = new SelectList(_context.Product_Types, "Product_Type_Code", "Product_Type_Name");// Products = await _context.Products.ToListAsync(); }

    Page:

    <table class="table">
        <thead>
            <tr>
                <th>
                    product_type_code
                </th>
                <th>
                    product_type_name
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Products)
            {
                <tr>
                    <td>
                        //product_type_code
                    </td>
                    <td>                   
                        <select class="form-control" asp-items="@Model.ProductTypes" onchange="passValue(event)"></select>
                    </td>
    
                </tr>
            }
        </tbody>
    </table>
    @section Scripts{ 
        <script>
            function passValue(evt) {
                $(evt.target).parents("tr").children("td:first").html(evt.target.value);// assume the product_type_code column is the first td
            }
        </script>
    }
    

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 21, 2019 5:29 AM

All replies

  • User-1764593085 posted

    Hi  poR,

    we have a column product type (numbers 1 to 10) which in this table and would ideally like user to be able to select a small button to side of this column to call a lookup routine which displays product type no and product type name ( the 2 columns in this lookup table) and populates this column in CRUD with selection.

    Is it a button or dropdown list in another column?

    Do you mean you have a  `product type` column, you would like to have a <select> to choose a record in another column and then populate selected value to the `product type` column?

    Is the lookup routine an action to retrieve all the product type no and name in database?

    I am not clear what you would like to get exactly, you could be more specific about the requirements( lookup routine, lookup table...) and share your view or current code to us.

    Best Regards,

    Xing

    Monday, May 20, 2019 7:24 AM
  • User915516305 posted

    Hi Xing,

    Is it a button or dropdown list in another column?

    dropdown list

    Do you mean you have a  `product type` column, you would like to have a <select> to choose a record in another column and then populate selected value to the `product type` column?

    yes have a master table which is the table against which CRUD is defined - it has column product type_code  on it and would like to display a dropdown list which shows the product_type_nameand based on what user selects populates the product type code on the master crud table with the product type code

    we have another table with 2 columns on it it (product_type_code and product_type_name) and want the dropdown to show all the product type names available from this

    Is the lookup routine an action to retrieve all the product type no and name in database?

    yes this is what looking to do

    I am not clear what you would like to get exactly, you could be more specific about the requirements( lookup routine, lookup table...) and share your view or current code to us.

    hope this helps

    Thanks

    Monday, May 20, 2019 8:17 AM
  • User-1764593085 posted

    Hi poR,

    Below is a simple demo which uses a dropdown list whose data is retrieved from a ProductType table.

    When you select, it will assign the option value to the product_type_code column td of current tr.

    Model:

    public class Product_Type
        {
            [Key]
            public int Product_Type_Code { get; set; }
            public string Product_Type_Name { get; set; }
        }

    DbContext:

    public DbSet<Product_Type> Product_Types {get;set;}

    PageModel:

    public IList<Product> Products { get;set; }
    public SelectList ProductTypes { get; set; } public async Task OnGetAsync() { ProductTypes = new SelectList(_context.Product_Types, "Product_Type_Code", "Product_Type_Name");// Products = await _context.Products.ToListAsync(); }

    Page:

    <table class="table">
        <thead>
            <tr>
                <th>
                    product_type_code
                </th>
                <th>
                    product_type_name
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Products)
            {
                <tr>
                    <td>
                        //product_type_code
                    </td>
                    <td>                   
                        <select class="form-control" asp-items="@Model.ProductTypes" onchange="passValue(event)"></select>
                    </td>
    
                </tr>
            }
        </tbody>
    </table>
    @section Scripts{ 
        <script>
            function passValue(evt) {
                $(evt.target).parents("tr").children("td:first").html(evt.target.value);// assume the product_type_code column is the first td
            }
        </script>
    }
    

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 21, 2019 5:29 AM
  • User915516305 posted

    Hi Xing,

    Thanks for reply.

    Got message below when tried create model

    A namespace cannot directly contain members such as fields or methods [D:\RazorCRUD\RazorCRUD.csproj]
        0 Warning(s)
        1 Error(s)

    tried below with and without namespace

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using Microsoft.EntityFrameworkCore;

    //namespace RazorCRUD.Channels
    //{
    public class Product_Type
        {
            [Key]
            public int Product_Type_Code { get; set; }
            public string Product_Type_Name { get; set; }
        }

    public DbSet<Product_Type> Product_Types {get;set;}

    //}
    Tuesday, May 21, 2019 9:00 AM
  • User-1764593085 posted

    Hi poR,

    I omit the context.You need to put the DbSet in your DbContext( defined by you like RazorPagesMovieContext, ApplicationDbContext) instead under the model.

    For example:

    using Microsoft.EntityFrameworkCore;
    
    namespace RazorPagesMovie.Models
    {
        public class RazorPagesMovieContext : DbContext
        {
            public RazorPagesMovieContext (DbContextOptions<RazorPagesMovieContext> options)
                : base(options)
            {
            }
    
            public DbSet<RazorPagesMovie.Models.Movie> Movie { get; set; }
    public DbSet<Product_Type> Product_Types {get;set; } } }

    Refer to https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/model?view=aspnetcore-2.2&tabs=visual-studio#examine-the-context-registered-with-dependency-injection

    >>we have another table with 2 columns on it it (product_type_code and product_type_name)

    In my demo,Product_Types is just that table.Add Migrations and assign records to the table.

    Xing

    Tuesday, May 21, 2019 9:12 AM
  • User915516305 posted

    Hi Xing,

    thanks for reply that sorted that particular model.

    tried putting in cretatemodel.cshtml.cs ProductTypes = new SelectList(_context.Product_Types, "Product_Type_Code", "Product_Type_Name");//

    but got message the name product types does not exist in the current context

    Thanks

    Tuesday, May 21, 2019 9:51 AM
  • User-1764593085 posted

    Hi poR,

    Have you declared the variables in PageModel:

    public IList<Product> Products { get;set; }
    public SelectList ProductTypes { get; set; }

    Wednesday, May 22, 2019 2:45 AM
  • User915516305 posted

    Hi Xing,

    thanks for reply.

    tried that but got this when used ilist error CS0246: The type or namespace name 'IList<>' could not be found (are you missing a using directive or an assembly reference?

    found link https://docs.microsoft.com/en-us/aspnet/core/data/ef-rp/update-related-data?view=aspnetcore-2.2 and managed to get working using this option.

    Wednesday, May 22, 2019 9:53 AM
  • User-1764593085 posted

    Hi poR,

    You does not add `using System.Collections.Generic;` in your code. I suggest that you could learn more about the fundamental of razor pages syntax before you keep on coding.

    Anyway,I am glad that you have found the solution, you could mark the helpful answer to close the thread.Thank you.

    Xing

    Thursday, May 23, 2019 1:20 AM
  • User915516305 posted

    Hi Xing,

    Thanks for reply.

    Do you have a suggested link with all the information - followed the tutorial but doesn't detail everything about what the various using options are and mean.

    Thanks

    Thursday, May 23, 2019 8:16 AM
  • User-1764593085 posted

    Hi poR,

    Most C# applications begin with a section of using directives. This section lists the namespaces that the application will be using frequently, and saves the programmer from specifying a fully qualified name every time that a method that is contained within is used.Refer to 

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/namespaces/using-namespaces

    You could simply press  `Alt + Enter` key together at the error line to add namespace automatically if you are using visual studio.

    There is no link to contains all information just what you want.The tutorial you find is official and good, for more resources to learn razor pages, you could also see 

    https://www.learnrazorpages.com/

    Best Regards,

    Xing

    Thursday, May 23, 2019 8:51 AM
  • User915516305 posted

    Hi Xing,

    Thanks - using vs code

    Thursday, May 23, 2019 8:53 AM