Dropdownlist SelectedItemChanged Event in MVC4 Razor?

Question

Is there any event available for Dropdownlist like onChange, etc. in MVC4? Do we have to use Javascript/jQuery in order to make some manipulations like DropwowlistSelectedItemChanged, etc? Or there is a way only using the Razor or MVC4 features?

On the other hand, could you please give me some examples how can I retrieve data and change a label's text with this data according to a Dropdownlist Selected Value? For example when selecting a City from Dropdownlist, I want to get an address data from database by using the selected city id and then show retrieved address on a label. I would be appreciated if you clarify me about the issue above and give me an example to achieve this.

Controller:

private void PopulateMeetingsDropDownList(object selectedMeetings = null)
    {
        var meetingsQuery = repository.Meetings
            .Join(repository.Cities, m => m.MeetingCityId, c => c.CityID,
                (m, c) => new
                {
                    CityID = c.CityID,
                    CityName = c.CityName,
                    MeetingDate = m.MeetingStartDate
                }
            )
            .OrderBy(x => x.CityID)
            .AsEnumerable()
            .Select(
                i => new
                {
                    CityID = i.CityID,
                    DisplayValue = string.Format(
                        "{0} ({1:dd MMMM yyyy})",
                        i.CityName, i.MeetingDate)
                }
            ).ToList();
        ViewData["MeetingId"] = new SelectList(meetingsQuery, "CityID", "DisplayValue", selectedMeetings);
    }

View:

<label>Meeting</label>
@Html.DropDownListFor(m => m.MeetingId, ViewData["MeetingId"] as SelectList,"---- Select ----", new { name = "meetingId", id = "meetingId"})

possible duplicate of [on select change event - Html.DropDownListFor](http://stackoverflow.com/questions/5783344/on-select-change-event-html-dropdownlistfor) — Alex, Oct 18 '13 at 13:25
AFAIK, MVC does not deal in events, only submits and gets. You will have to use javascript to handle drop down list changes, but you can call server-side code with ajax. — gunr2171, Oct 18 '13 at 13:27
Thanks for reply. In that case, could you please a suitable sample to achieve this? I have a look at on the web, but unfortunately I have not found a good example. . — Jack, Oct 18 '13 at 13:32
What about populating some items in different colour or disabled on Dropdownlist? — Jack, Oct 30 '13 at 09:38

AthibaN · Answer 1 · 2013-10-18T13:46:23.983

5

Try this,

@Html.DropDownListFor(model => model.MyProp, (SelectList)ViewBag.ListItems, new { @id = "MyId", onchange = "MyFunction()" })

<script type="text/javascript">
    function MyFunction() {
        alert('Changed');
        $('#YourLabelId').val('ReplaceWithThisValue');
    }
</script>

or this

@Html.DropDownListFor(model => model.MyProp, (SelectList)ViewBag.ListItems, new { @id = "MyId"})

<script type="text/javascript">
   $('#MyId').change(function(){
        alert('Changed');
        $('#YourLabelId').val('ReplaceWithThisValue');
    });
</script>

edited Oct 18 '13 at 13:46

answered Oct 18 '13 at 13:40

AthibaN

2,087
1
15
22

1

Thanks, but I need to retrieve value from Database by using a method on my Razor. Could you give such a kind of example? – Jack Oct 29 '13 at 20:54
It is best if you access your database from your controller, put the values in your `ViewBag` and send it to View. – AthibaN Oct 30 '13 at 05:39
Could you please give an example according to the code I use in my project (pls see above)? Sorry, but I have never used such a kind of approach and I would be appreciated if you help me. – Jack Oct 30 '13 at 09:33
I guess your original question has been answered, pls mark this post as answered and post the updated part as a new question, chances are more people will look into it. – AthibaN Oct 30 '13 at 09:56
My original question is actually on the second paragraph on the first message and I need a sample for "retrieving data from database using jQuery/Javascript on Razor" OR "Making some Dropdownlist items retrieved from database in colour or disabled". I think you might easily give a perfect example for me so that I can close this question by marking "answered". Otherwise I have not proceed due to lack of required info :( – Jack Oct 30 '13 at 12:32

score 2 · Answer 2 · answered Oct 18 '13 at 13:37

2

You have to use jquery here you have a simple example

<select id="myCombo" name="myCombo">
   <option>a</option>
   <option>b</option>
   <option>c</option>
</select>
<script type="text/javascript">
 $('#myCombo').change(function(){
   //Here goes your code 
 });
</script>

answered Oct 18 '13 at 13:37

Raphael

1,677
1
15
23

Just remember, this is an MVC question. – gunr2171 Oct 18 '13 at 13:41
1

Thanks for reply. But I need an example showing of retrieving data from database instead of static list. You might give an example for populating some items in different colour or disabled on Dropdownlist. – Jack Oct 30 '13 at 09:40

score 0 · Answer 3 · answered Jul 09 '17 at 09:47

You must use onchange property in a new {} side of declaring class property like this example

[@Html.DropDownListFor(model => model.IpoId, new SelectList(Model.IpoList, "Value", "Text", Model.IpoId), "--انتخاب کنید--", new {@class = "chzn-select chzn-rtl", @onchange = "IpoFilterOnChange();" })]

score 0 · Answer 4 · answered Jul 09 '17 at 09:51

You must use onchange property in a new {} side of declaring class property like this example

@Html.DropDownListFor(model => model.IpoId, new SelectList(Model.IpoList, "Value", "Text", Model.IpoId), "--انتخاب کنید--", new {@class = "chzn-select chzn-rtl", @onchange = "IpoFilterOnChange();" })

score 0 · Answer 5 · answered Jul 09 '17 at 11:15

You must use onchange property in a new {} side of declaring class property like this example

@Html.DropDownListFor(model => model.IpoId, new SelectList(Model.IpoList, "Value", "Text", Model.IpoId), "--انتخاب کنید--", new {@class = "chzn-select chzn-rtl", @onchange = "IpoFilterOnChange();" })]

Dropdownlist SelectedItemChanged Event in MVC4 Razor?

5 Answers5