2013-06-21 4 views
0

저는 MVC에 상당히 새롭습니다 (아주 좋아요.). 내가 값을 미리 선택할 수있는 계단식 드롭 다운 목록을 만들려고합니다.DropDownListFor 선택된 값의 문제

나는이 일의 대부분을 보냈지 만 실제로는별로 멀지 않았습니다. 나는 많은 자원을 보았지만, 가장 유용한 것은 다음과 같다.

http://www.deliveron.com/blog/post/Creating-a-Cascading-Dropdown-in-ASPnet-MVC-3-and-jQuery.aspx - 나는 이것을 집중적으로 사용하여 작동하는 자체 버전을 가지고있어, 예제 작업을 할 수 없었다.

http://odetocode.com/blogs/scott/archive/2013/03/11/dropdownlistfor-with-asp-net-mvc.aspx - 일반 oversite.

MVC DropDownList SelectedValue not displaying correctly - 여기 뷰 모델 방식에 따라 실제로 좋은 예제가있는 것처럼 보이지만 어떤 이유로 그것이 나를 위해 작동하지 않는 것 같습니다. 내가 지금까지있어 무엇

은 다음과 같습니다

모델 :

using System; 
    using System.Collections.Generic; 
    using System.ComponentModel.DataAnnotations; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Mvc; 

    namespace BLPrototype.Models 
    { 
     public class VehicleModels 
     { 
      public List<vehicle_make> getVehicleMakeList() 
      { 
       using (var db = new BLEntities()) 
       { 
        List<vehicle_make> vmk = db.vehicle_make.OrderBy(r => r.vmk_name).ToList(); 
        return vmk; 
       } 
      } 

      public List<vehicle_group> getVehicleModelList(string vmk_id) 
      { 
       using (var db = new BLEntities()) 
       { 
        List<vehicle_group> vmo = db.vehicle_group.Where(v => v.vg_vmk_id == vmk_id).OrderBy(r => r.vg_name).ToList(); 

        return vmo; 
       } 
      } 

     } 

     public class vmCatalogue1 
     { 
      public string Title { get; set; } 

      [Display(Name = "Select a make")] 
      public IEnumerable<SelectListItem> selectVehicleMake { get; set; } 
      [Display(Name = "Select a model")] 
      public IEnumerable<SelectListItem> selectVehicleModel { get; set; } 

     } 

    } 

컨트롤러 :

using BLPrototype.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace BLPrototype.Controllers 
{ 
    public class TestController : Controller 
    { 
     // 
     // GET: /Test/ 

     public ActionResult Index() 
     { 
      VehicleModels vm = new VehicleModels(); 
      var model = new vmCatalogue1(); 

      //Which is better and why? 
      model.selectVehicleMake = vm.getVehicleMakeList().Select(x => new SelectListItem { Value = x.vmk_id, Text = x.vmk_name }); 
      //model.selectVehicleMake = new SelectList(vm.getVehicleMakeList(), "vmk_id", "vmk_name"); 

      model.selectVehicleModel = new SelectList(vm.getVehicleModelList(""), "vg_id", "vg_name"); 

      model.Title = "Title goes here"; 

      return View(model); 
     } 

     VehicleModels vm = new VehicleModels(); 

     [HttpPost] 
     public ActionResult Makes() 
     { 
      var makes = vm.getVehicleMakeList(); 

      return Json(new SelectList(makes, "vmk_id", "vmk_name")); 
     } 

     [HttpPost] 
     public ActionResult Models(string vmk_id) 
     { 
      var models = vm.getVehicleModelList(vmk_id); 

      return Json(new SelectList(models, "vg_id", "vg_Name")); 
     } 

    } 
} 

보기 :

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@Model.Title </title> 

    <script src="~/Scripts/jquery-1.7.1.min.js"></script> 

    <script type="text/javascript"> 
     function getModels(vmk_id) { 

      $.ajax({ 
       url: "@Url.Action("Models")", 
       data: { vmk_id: vmk_id }, 
      dataType: "json", 
      type: "POST", 
      error: function() { 
       alert("An error occurred."); 
       errorHandler("error1"); 
      }, 
      success: function (data) { 
       var items = ""; 
       $.each(data, function (i, item) { 
        items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>"; 
       }); 

       $("#selectVehicleModel").html(items); 
      } 
     }); 
    } 

    $(document).ready(function() { 
     $("#selectVehicleMake").change(function() { 
      getModels($("#selectVehicleMake").val()); 
     }); 
    }); 


</script> 

</head> 
<body> 
    <div> 

@model BLPrototype.Models.vmCatalogue1 
@using (Html.BeginForm()) 
{   
    <div class="editor-label"> 
     @Html.LabelFor(m => m.selectVehicleMake) 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownListFor(model => model.selectVehicleMake, Model.selectVehicleMake, "Please select") 

    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(m => m.selectVehicleModel) 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownListFor(m => m.selectVehicleModel, Model.selectVehicleModel, new { style = "width: 150px" }) 
    </div>  

} 
</body> 
</html> 

위의 예는 캐스 케이 딩을 보여줍니다 드롭 다운. dropdownlistfor를 채우는 여러 가지 방법을 많이 보았습니다. View-Model을 통해이 작업을하고 싶습니다. 나는 어느 것이 가장 좋은 방법인지 정말로 모른다. 일부 예제는 목록 만 표시하고 selectlistitems 목록과 일부 선택 목록 만 표시합니다. 누군가가 저에게 차이점을 말해 주시겠습니까? 그리고 그것을하는 '더 나은'방법은 무엇입니까? ... 나는 그것이 종종 응용 프로그램에 달려 있다는 것을 알고 있습니다.

원하는 경우 Make를 미리 선택할 수 있기를 원합니다. 다양한 방법으로 ID를 포함하는 몇 가지 예를 보았습니다. 다른 선택 목록의 끝에 태그를 지정하여 다른 예를 보았습니다. 그들 중 누구도 일하는 것 같지 않습니다.

또한 모델을 선택하지 않으면 실제로 모델이 표시되지 않아야합니다. CSS 나 다른 방법으로이 작업을 수행 할 수 있습니까?

마지막으로 make의 마지막에 "Please Select"를 넣어서 보여줍니다. 이것은 이것을하는 좋은 방법처럼 보이지 않습니다. 올바른 방향으로 나를 가리켜 주시겠습니까?

감사합니다. 많은 바보 같은 질문에 대해 사과드립니다.

감사

제이

+0

새로운 것을 배우는 것을 싫어한다. 처음 VB5에서 VB.NET으로 바뀌었고, 왜 날짜가 작동하지 않는지 궁금해했다. (date.now가 필요했다). 유일한 차이점은 현재 MSDN 도움말이 쓸모 없다는 것입니다. – Jay1b

답변

0

필자는 필자의 해결책을 찾았습니다. 비슷한 오류가있는 사람이 앞으로이 게시물을 발견 할 경우를 대비해 여기에 게시하겠습니다.

모델 :

public class VehicleModels 
{ 
    public List<vehicle_make> getVehicleMakeList() 
    { 
     using (var db = new BLEntities()) 
     { 
      List<vehicle_make> vmk = db.vehicle_make.OrderBy(r => r.vmk_name).ToList(); 
      return vmk; 
     } 
    } 

    public List<vehicle_group> getVehicleModelList(string vmk_id) 
    { 
     using (var db = new BLEntities()) 
     { 
      List<vehicle_group> vmo = db.vehicle_group.Where(v => v.vg_vmk_id == vmk_id).OrderBy(r => r.vg_name).ToList(); 

      return vmo; 
     } 
    } 

} 

public class vmCatalogue3 
{ 
    public string Title { get; set; } 

    public string selectedMakeId { get; set; } 
    public string SelectTopLine { get; set; } 

    [Display(Name = "Select a make")] 
    public SelectList selectVehicleMake { get; set; } 

    [Display(Name = "Select a model")] 
    public SelectList selectVehicleModel { get; set; } 

} 

컨트롤러 :

 public ActionResult Index() 
    { 
     VehicleModels vm = new VehicleModels(); 
     var model = new vmCatalogue3(); 

     model.selectedMakeId = "870"; 
     model.SelectTopLine = "Please Select"; 

     model.selectVehicleMake = new SelectList(vm.getVehicleMakeList(), "vmk_id", "vmk_name"); 
     model.selectVehicleModel = new SelectList(vm.getVehicleModelList(""), "vg_id", "vg_name"); 

     return View(model);    
    } 

보기 :

 @Html.DropDownListFor(m => m.selectedMakeId, Model.selectVehicleMake, Model.SelectTopLine) 

희망 누군가가 도움이!

1

SelectListItems의 목록이 더 명시하고 당신에게 Selected 속성을 제공하지만 다중 선택 목록에서 기어드이고보기가 필요한 경우 더 이상 원래 목록에 액세스 할 수 없습니다 다른 곳에서.

SelectList을 살펴보십시오. 어떤 경우에는 더 잘 작동 할 수도 있습니다.추가

myList.ToSelectList("ID", "Description") 

또는

new SelectList(myList, "ID", "Description) 

:

data-placeholder="Please Select" 

당신이 들어있는 동일한 개체에서 "스타일 = ..."당신이 자리를 원하는 경우이 같은 하나를 얻을 수 있습니다 옵션이 선택 될 때까지

+0

답장을 보내 주셔서 감사합니다. 뭔가 빠져있는 경우를 제외하고는 이미 모델에서 SelectList를 사용하고 있습니다. 데이터 자리 표시자는 흥미 롭습니다. 빠른 Google 작업을 수행했으며 여기에서 예를 발견했습니다. http://irwinj.blogspot.co.uk/2011/09/data-placeholder-in-mvc3.html 다른 사람이 찾은 경우 이 게시물. 내가 선택한 값을 설정하는 방법을 여전히 확실하지 않아요,이 SelectListItems 사용해야합니까? 답장을 보내 주셔서 다시 한 번 감사드립니다. – Jay1b

+0

SelectList 개체에서 SelectedValue 또는 SelectedValues를 설정할 수 있습니다. 이러한 속성에 대한 자세한 내용은 원래 답변의 "SelectList"링크를 참조하십시오. 또는 아래의 수락 된 대답에서와 마찬가지로 생성자 매개 변수를 사용할 수 있습니다. –