Dropdown lists (ASP.NET MVC)

Question

I have two dropdown lists in my view

For first dropdown list I have this code in View:

@Html.DropDownListFor(model => model.VacancyId, ViewBag.Teams as SelectList,new { @class = "greeting" })

And this in Controller

SelectList teams = new SelectList(db.Vacancy, "VacancyId", "VacancyName");
        ViewBag.Teams = teams;
        return View();

And here is model

 public partial class Vacancy
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Vacancy()
    {
        this.Interwiers = new HashSet<Interwier>();
        this.InvitationMails = new HashSet<InvitationMail>();
        this.Interviews = new HashSet<Interview>();
        this.MassLinks = new HashSet<MassLink>();
    }

    public int VacancyId { get; set; }
    [Display(Name = "Вакансия")]
    public string VacancyName { get; set; }
    public Nullable<int> CompanyID { get; set; }

    public virtual Company Company { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Interwier> Interwiers { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<InvitationMail> InvitationMails { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Interview> Interviews { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<MassLink> MassLinks { get; set; }
}

}

I need to set two dropdown lists . In one I select company, in second I will see vacancies related to this company. How to do this?

Thank's for help.

Do a search for "dependent dropdown" or "cascading dropdown" — jmoerdyk
– jmoerdyk, Commented Mar 15, 2017 at 23:01
Its called cascading dropdownlists - refer this question/answer for an example. Also this DotNetFiddle for a full implementation (and do not use data models in your view especially when editing - use view models) — user3559349
– user3559349, Commented Mar 15, 2017 at 23:01
Possible duplicate of connecting between two dropdownlist mvc 4 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Mar 15, 2017 at 23:05

Sasha Pleshakov · Accepted Answer · 2017-03-15 22:55:21Z

1

You can use AJAX. I don't think that you can do it via Razor.

answered Mar 15, 2017 at 22:55

Sasha Pleshakov

432 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Lee Over a year ago

Agree with this statement. I had a similar issue and found it was a lot easier to deal with standard HTML select and options with javascript than the html helpers that come with razor. If you really want to use razor views you can try a partial view that only contains the dropdown helper that is retrieved from AJAX.

user3559349 Over a year ago

Using razor has got nothing to do with this (razor is just for generating html)

Lyubomir Dimov · Accepted Answer · 2017-03-16 01:13:34Z

I will give you an Example in MVC 5. Fetching VAT percentage for VAT Code,

Typescript/JS:

     function FetchVATDetails() {

    let ddlSender = "#ddlVATCode";
    let url = "/ExactSalesOrders/GetVATDetails";
    let ddlVatPercentage = "#ddlVATPercentage";
    let failureFunction = () => {
        $(ddlVatPercentage).html("");
        $(ddlVatPercentage).append(
            $('<option></option>').html("- No VAT Percentage -"));
    };

    let id = $(ddlSender).val();
    if (id != "" && id != null) {
        $.ajax({
            url: url,
            type: "GET",
            dataType: "JSON",
            data: { id: id },
            success(data) {
                if (data === false) {
                    failureFunction();
                } else {
                    $(ddlVatPercentage).html("");
                    $.each(data.VATPercentages,
                        (i, percentage) => {
                            $(ddlVatPercentage).append(
                                $('<option></option>').val(percentage.Percentage).html(percentage.Percentage));
                        });
                    $(ddlVatPercentage).change();
                }
            }
        });
    } else {
        failureFunction();
    }
}

Controller :

 public ActionResult GetVATDetails(string id)
        {
            var vat = ExactService.SelectObjectByCode<VATCode>(id);
            vat.VATPercentages = ExactService.SelectObjects<VatPercentage>().Where(x => x.VATCodeID == vat.ID).ToList();
            return vat != null ? Json(vat, JsonRequestBehavior.AllowGet) : Json(false, JsonRequestBehavior.AllowGet);
        }

Cheers

Hariprasad Nagendren · Accepted Answer · 2017-03-16 04:01:00Z

0

You can do it simply by using J-query Ajax.If you loaded first drop down values,add an OnChange method for that field, while on change put an Ajax call and pass your first drop down values and get the related values in db. Make sure you mapped the field values correctly in db.

answered Mar 16, 2017 at 4:01

Hariprasad Nagendren

95 bronze badges

Collectives™ on Stack Overflow

Dropdown lists (ASP.NET MVC)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related