DropDownListFor，不应该表现得如此

Question

好吧，我正在学习如何使用MVC，基本上我想使用下拉列表，这里是视图中的代码：

 <div class="form-group"
              @Html.DropDownListFor(m => m.MateriaID, ViewBag.ListaDeMaterias as SelectList, "--Selecciona una materia--", new { @id = "DropDwn", @class = "form-control" })
  </div>

这是控制器：

public ActionResult Index()
    {
        List<Tabla_Materias> ListaMaterias = db.Tabla_Materias.ToList();
        ViewBag.ListaDeMaterias = new SelectList(ListaMaterias, "MateriaID", "Nombre_Materia");
        return View();

    }

这是剧本：

function AddNewStudent(EstudianteID) {
    $("#form")[0].reset();
    $("#StuId").val(0);
    $("#DropDwn option:selected").text("--Selecciona una materia--");
    $("#ModalTitle").html("Agregar nuevo Estudiante");
    $("#MyModal").modal();

}

这就是它的样子：

红色“方块”中的那个东西应该是一个下拉列表