在MVC4 Razor中下拉列表SelectedItemChanged事件?

时间:2013-10-18 13:23:42

标签: jquery asp.net-mvc asp.net-mvc-4 razor

在MVC4中是否有类似onChange等Dropdownlist的事件?我们是否必须使用Javascript / jQuery来进行DropwowlistSelectedItemChanged等操作?或者只有使用Razor或MVC4功能的方法?

另一方面,您能否举例说明如何根据下拉列表选择值检索数据并使用此数据更改标签文本?例如,当从Dropdownlist中选择City时,我想通过使用所选的城市ID从数据库获取地址数据,然后在标签上显示检索到的地址。如果您向我澄清上述问题并给我一个实现此目的的例子,我将不胜感激。

控制器:

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);
    }

查看:

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

5 个答案:

答案 0 :(得分:5)

试试这个,

@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>

或者

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

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

答案 1 :(得分:1)

你必须在这里使用jquery,你有一个简单的例子

<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>

答案 2 :(得分:0)

您必须在声明类属性的新{}方面使用onchange属性,例如此示例

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

答案 3 :(得分:0)

您必须在声明类属性的新{}方面使用onchange属性,例如此示例

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

答案 4 :(得分:0)

您必须在声明类属性的新{}方面使用onchange属性,例如此示例

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