How update view depending on user selection on Asp.Net core

Question

I want to be able to display a form which changes depending on the value of a select on Dot.Net Core. I've seen many things like dynamic forms, View Components, razor and partials and also there is a lot of info out there but very confusing. Any info about the proper way to do what I want would be very appreciated.

I Have Categories>SubCategories>>Products An order can be for one Category>>SubCategory only. So I want to display a select and depending on what category the user selects for the new Order, the products that I have to display. So I dont want to pick the user selection and go back to the controller and back to the view again and so on. I want to be able to dynamically display data according to the user selection.

Here an extract of the code just to briefly figure out what Im doing..I am not pasting the classes like Products,etc..

    public class OrderCreateViewModel
{    
    public IEnumerable<Category> Categories { get; set; }
    public IEnumerable<Branch> Branches { get; set; }
    public int BranchId { get; set; }
    public int CategoryId { get; set; }
}

Controller :

        [HttpGet]
    public IActionResult Create()
    {
        //Create vm
        IEnumerable<Branch> branchList = _branchDataService.GetAll();
        IEnumerable<Category> categoryList = _categoryDataService.GetAll();

        OrderCreateViewModel vm = new OrderCreateViewModel
        {
            Categories = categoryList,
            Branches = branchList
        };
        return View(vm);
    }

View:

 @model OrderCreateViewModel
<p>Create New Order </p>
<form asp-controller="Order" asp-action="Create" method="post">
    <div class="form-group">
        <label >Select Category</label>
        <select class="form-control col-md-2"  asp-for="CategoryId"
                asp-items="@(new SelectList(Model.Categories ,"CategoryId","Name"))">            
        </select>
    </div>
    <div class="form-group">
        <label>Select Branch</label>
        <select class="form-control  col-md-2" asp-for="BranchId"
                asp-items="@(new SelectList(Model.Branches,"BranchId","Name"))">           
        </select>
    </div>
    <div >
        <input type="submit" value="Save" />
    </div>
</form>

Im just filling the select on the viewside and depending on what the user picks, the products I want to display. I am not passing the product list yet because I don't know where the "filter" for that particular Category takes place. Hope you understand the idea of what i need :)

Hi Ale, I'd like to help you - but we need some more info. You need to show an example of what you are trying to achieve in code. Also, be more specific on how you would like the form to change. Do you want to display a new form or fetch data that is related to what you picked in the select? - In general questions like this are frowned upon because of the lack of information and value. Add some more info so this question can help the community in the future. — Terrance00, Sep 29 '17 at 10:09
Thanks a lot, question edited, let me know If need more detail — Ale Garcia, Sep 30 '17 at 10:30

score 4 · Accepted Answer · answered Oct 01 '17 at 17:43

You've got two options here:

# 1 Use a Partial View And AJAX to get your data

Go have a look at the link below, it describes exactly what you want to achieve.

Populating Dropdown using partial view

# 2 Use Javascript to populate your second select:

First off you need to persist your data when the page loads

At the start of your view, add this:

@{
<text>
    <script>
        var data = "@Newtonsoft.Json.JsonConvert.SerializeObject(Model)";
    </script>
</text>
}

Next use your on change event on the branch selector:

At the bottom of your view, do the following in the page ready event:

<script>
    (function () 
        {
            var sltBranch = document.getElementsByName("BranchId")[0];
            var sltCat = document.getElementsByName("CategoryId")[0]
            sltCat.onchange = function () {
                var dataAsObj = JSON.parse(data);
                var branches = "";
                for (i = 0; i < dataAsObj.Branches.length; i++)
                {
                     if (dataAsObj.Branches[i].CategoryId == sltCat.value)
                     {
                         branches += "<option value='" + dataAsObj.Branches[i].BranchId + "'>" + dataAsObj.Branches[i].BranchName + "</option>"; //Whatever The branch name may be
                     }
                }
                sltBranch.innerHTML = branches;
            }


        }
    )(document, window);
</script>

I would however advise you to follow option 1 as it is a lot more future proof strategy. This would mean that you need to change your view model etc, but if you plan on making extensive use of this strategy you need to make it more robust with something like option 1.

Good luck anyhow - happy coding.

back from holydays, i tried and worked! I followed the link but I solved by using ajax to populate my dropdowns. cheers — Ale Garcia, Nov 01 '17 at 06:13

How update view depending on user selection on Asp.Net core

1 Answers1