관리 메뉴

웹개발자의 기지개

[ASP.Net Core] 단순한 Select 박스 구현하기 본문

ASP.NET/ASP.NET Core

[ASP.Net Core] 단순한 Select 박스 구현하기

http://portfolio.wonpaper.net 2023. 2. 17. 23:37

 

[ Controller ]

public string SearchField { get; set; } // 속성값으로 지정
1
2
3
4
5
6
            // 상단부 검색 Select박스
            ViewBag.SearchFieldSel = new SelectList(new List<SelectListItem>
                {
                    new SelectListItem {Text = "회원명", Value = "MbName"},
                    new SelectListItem {Text = "회원아이디", Value = "Mbid"}
                }, "Value""Text", SearchField);
cs

SearchField 는 Value 항목의 string 값이 되겠다.

 

 

[ Razor View 페이지 ]

 

1
2
<select id="SearchField" name="SearchField" asp-items="@ViewBag.SearchFieldSel">
</select>
cs

 

다음은 Razor View 페이지에서 직접 바로 하는 간단한 예제이다.

Controller 에서 ViewBag.age 값을 지정을 먼저한다.

1
2
3
4
5
<select name="age">
     <option value="">=선택=</option>
     <option value="10" @(ViewBag.age == 10 ? "selected" : "")>10대</option>
     <option value="20" @(ViewBag.age == 20 ? "selected" : "")>20대</option>
</select>
cs

 

그리고, 이번에는 아래와 같이 Select 박스에서 selected 처리하는 방법인데, 좋은 예가 되겠다.

 

1
2
3
4
<select class="form-control" id="exampleFormControlSelect1" name="myDropDown"
        asp-items="(_myRepository.GetDemos()).Select(x => new SelectListItem()
                    { Text = x.Name, Value = x.Id.ToString(), Selected = x.Id == ViewBag.SelectedIndex ? true : false })" onchange="this.form.submit()">
</select>
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public ActionResult Index(int myDropDown)
{
    var myItems = new List<Items>();
 
    myItems = _myRepository.GetAllItems();
 
    var filteredItems = myItems.Where(x => x.Color.DemoId == myDropDown);
 
    //pass selected value through ViewBag etc
    ViewBag.SelectedIndex = myDropDown;
 
    if (myDropDown != 0)
    {
        return View(filteredItems);
    }
 
    return View(myItems);
}
cs

 

참고 : https://stackoverflow.com/questions/66875938/how-to-keep-selectlistitem-value-selected-after-submitting-form-in-asp-net-core

참고 : https://bigexecution.tistory.com/74

Comments