Populate left menu with my database table

lulu50
lulu50 used Ask the Experts™
on
Hi Guys!!!

I'm new to MVC C# coding and I really need your help.

I have a left menu that I want to be populated from my database and I'm not sure how to do it.

Thank you in advance for taking the time to help me with this.

I have two tables a parent table and a child table 

Parent table called: RuleSet

RuleSetID       |     RuleSet                 |    CreatedDate   |     CreatedBy 
1                             Blended                      11/12/2019            Y000001
2                             OSCMain                     11/12/2019            Y000001
3                             Questionnaire            11/12/2019            Y000001

Child table called: RuleIdentifier

RuleIdentifierId    |    RuleSetId    |    RuleIdentifier            |      CreatedDate   |    CreatedBy
1                                     1                       Blended_00010                 11/12/2019            Y000001
2                                     2                       OSCMain_0049                  11/12/2019           Y000001
3                                     2                       OSCMain_0010                  11/12/2019           Y000001
4                                     2                       OSCMain_0122                  11/12/2019           Y000001
5                                     1                       Blended_0234                    11/12/2019           Y000001
6                                     3                       Questionnaire_02              11/12/2019           Y000001
7                                     1                       Blended_04554                  11/12/2019           Y000001
8                                     1                       Blended_05565                  11/12/2019           Y000001
9                                     3                       Questionnaire_45              11/12/2019           Y000001
10                                   3                       Questionnaire_239            11/12/2019          Y000001

Open in new window




My Html left menu code: 

How would I auto populate this left menu below with my database above? 
I don't know how to start or what to do to get this auto populated. 
I'm learning. 

  <tr style="width:100%;">
                                                    <td style="color:#0144af;border:0px;padding:0px; font-size:13px;">
                                                        <ul id="menu" style="width:100%;height:auto;">
                                                            <li style="margin-left:0px;">
                                                                <div id="BlendedMenu" class="btn btn-lg btn-success btn-block" style="text-align:left;padding-left:10px;border-radius:0px;">Blended</div>
                                                                <ul>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Blended_00010</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Blended_0234</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Blended_04554</div>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <div id="InpatientMenu" class="btn btn-lg btn-success btn-block" style="text-align:left;padding-left:10px;border-radius:0px;">OSCMain</div>
                                                                <ul>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">OSCMain_0049</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">OSCMain_0010</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">OSCMain_0122</div>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <div id="OutpatientMenu" class="btn btn-lg btn-success btn-block" style="text-align:left;padding-left:10px;border-radius:0px;">Questionnaire</div>
                                                                <ul>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Questionnaire_02</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Questionnaire_45</div>
                                                                    </li>
                                                                    <li>
                                                                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">Questionnaire_239</div>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                </tr>

Open in new window



I think I need to pull the data into a list 

Open in new window


Thank you,
Lulu50
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Duy PhamFreelance IT Consultant

Commented:
It is not easy to give a solid answer to your question as we don't know how far are you with your MVC project? Which database gateway are you using (Entity Framework, LLBLGEN, Dapper, ADO or something else)? Whether you are rendering in normal view or partial view? etc.

Maybe, you could breakdown into smaller steps and solve one by one
1. Populating data from databases into models, which will be needed in order to render MVC/Razor view. Sample model
public class Rule
{
    public int RuleIdentifierId {get;set;}
    public string RuleIdentifier {get;set;}
}
public class RuleSet
{
    public int RuleSetId {get;set;}
    public string RuleSet {get;set;}
    public List<Rules> Rules {get;set;}
}
public class ViewModel
{
    public List<RuleSet> RuleSets {get;set;}
}

Open in new window


2. Render view from models
@model YourMultilevelNamespaces.ViewModel

<tr style="width:100%;">
    <td style="color:#0144af;border:0px;padding:0px; font-size:13px;">
        <ul id="menu" style="width:100%;height:auto;">
            @foreach (var ruleSet in Model.RuleSets)
            {
                <li>
                    <div id="ruleset-@ruleset.RuleSetId" class="btn btn-lg btn-success btn-block" style="text-align:left;padding-left:10px;border-radius:0px;">@ruleSet.RuleSet</div>
                    <ul>
                        @foreach (var rule in ruleSet.Rules)
                        {
                            <li>
                                <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">rule.RuleIdentifier</div>
                            </li>
                        }
                    </ul>
                </li>
            }
        </ul>
    </td>
</tr>

Open in new window

3. Extend for different scenarios like links to RuleSet or Rule details page

Hope that helps.
lulu50Web application

Author

Commented:
Duy Pham

Thank you for helping with it.

I was able to pull the my data and store each table in a list then display the list but I have problem the way I'm displaying it.

Can you please take a look and see what I'm doing wrong.

My model 

namespace BCUW.Model.CABusinessRules
{
    public class CABRLeftMenuViewModel
    {
        public List<GetRuleSet> GetRuleSetList { get; set; }
        public List<GetRuleIdentifier> GetRuleIdentifierList { get; set; }

    }

    public class GetRuleSet
    {
        public int RuleSetId_RuleSet { get; set; }
        public string RuleSet { get; set; }
      
    }

    public class GetRuleIdentifier 
    {
        public int RuleSetId_RuleIdentifier { get; set; }
        public string RuleIdentifier { get; set; }
        
    }
}

Open in new window



My service Model: 

namespace BCUW.Service.CABusinessRules
{
    public interface ICABusinessRulessService
    {
        List<GetRuleSet> GetRuleSetList();
        List<GetRuleIdentifier> GetRuleIdentifierList();

    }


 public List<GetRuleSet> GetRuleSetList()
        {
            List<GetRuleSet> model = new List<GetRuleSet>();
            var list = _unitOfWorkCABusinessRules.RuleSetRepo.GetAll();
            model = list.ToList().Select(x => new GetRuleSet
            {
                RuleSetId_RuleSet = x.RuleSetId,
                RuleSet = x.RuleSet
            }).ToList();
            return model; 
                
        }

        public List<GetRuleIdentifier> GetRuleIdentifierList()
        {
            List<GetRuleIdentifier> model = new List<GetRuleIdentifier>();
            var list = _unitOfWorkCABusinessRules.RuleIdentifierRepo.GetAll();
            model = list.ToList().Select(x => new GetRuleIdentifier
            {
                RuleSetId_RuleIdentifier = x.RuleSetId,
                 RuleIdentifier = x.RuleIdentifier
            }).ToList();
            return model;
        }

}

Open in new window



My controller: 


namespace BusinessConfigWebApp.Controllers
{
    public class CareAdvanceBusinessRulesController : Controller
    {

 public ActionResult LeftMenu()
        {
            CABRLeftMenuViewModel model = new CABRLeftMenuViewModel();

            model.GetRuleSetList = _careAdvanceBusinessRulessService.GetRuleSetList();

            model.GetRuleIdentifierList = _careAdvanceBusinessRulessService.GetRuleIdentifierList();

            return PartialView(model);
        }

}
}

Open in new window



My view: 

Here I need to display all parent list which is in GetRuleSetList
and the child list based on matching RuleSetId

RuleSetId is stored in both tables 


<ul id="menu" style="width:100%;height:auto;">
    @foreach (var ruleSet in Model.GetRuleSetList)
            {
        <li>
            <div id="ruleset-@ruleSet.RuleSet" class="btn btn-lg btn-success btn-block" style="text-align:left;padding-left:10px;border-radius:0px;">@ruleSet.RuleSet</div>
            <ul>
               // Here I should have if RuleSetId_RuleSet =  RuleSetId_RuleIdentifier then display the menu 
               // Thank you for your help

                @foreach (var ruleIdentifier in Model.GetRuleIdentifierList)
                {
                   
                    <li>
                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">@ruleIdentifier.RuleIdentifier</div>
                    </li>
                }
            </ul>
        </li>
    }
</ul>

Open in new window

lulu50Web application

Author

Commented:
Maybe something like this in the view

  @if (ruleIdentifier.RuleSetId_RuleIdentifier = ruleSet.RuleSetId_RuleSet)
                   {
                    <li>
                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">@ruleIdentifier.RuleIdentifier</div>
                    </li>
                   }

Open in new window

Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Freelance IT Consultant
Commented:
I think that should work (but you need to use == instead of =).

However, I still think it would be better that each GetRuleSet model has its own list of GetRuleIdentifier, which can easily be done within your LeftMenu() action. For example:


public class GetRuleSet
{

    public List<GetRuleIdentifier> RuleIdentifiers {get;set;} = new List<GetRuleIdentifier>();
}

public ActionResult LeftMenu()
{
    CABRLeftMenuViewModel model = new CABRLeftMenuViewModel();
    model.GetRuleSetList = _careAdvanceBusinessRulessService.GetRuleSetList();
    
    var ruleIdentifierList = _careAdvanceBusinessRulessService.GetRuleIdentifierList();
    foreach (var ruleIdentifier in ruleIdentifierList)
    {
        var ruleset = model.GetRuleSetList.FirstOrDefault(rs => rs.RuleSetId_RuleSet == ruleIdentifier.RuleSetId_RuleIdentifier);
        if (ruleset != null)
            ruleSet.RuleIdentifiers.Add(ruleIdentifier).
    }

    return PartialView(model); // or return View(model);
}

                @foreach (var ruleIdentifier in ruleSet.RuleIdentifiers)
                { 
                    <li>
                        <div class="btn btn-lg btn-success btn-block" style="border-radius:0px 0px 0px 0px;">@ruleIdentifier.RuleIdentifier</div>
                    </li>
                }
...

Open in new window

lulu50Web application

Author

Commented:
Thank you so much for your help.
Duy PhamFreelance IT Consultant

Commented:
@lulu50
Not at all  :).

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial