눈에 잘 띄지 않는 JavaScript를 사용하여 MVC에서 의존적 드롭 다운 (주 및 도시)을 효율적으로로드하려면 어떻게해야합니까?

MVC 에 더블 드롭 -다운 메뉴를로드하려는 계획을 최적화했습니다. 전통적으로 MVC 애플리케이션에 상태 및 도시 드롭 -다운 메뉴를로드하려면 컨트롤러 작동과 JavaScript 코드의 조합이 필요합니다. 이 방법은 효과적이지만 지루하고 실수가 쉬울 수 있습니다. 이 작업을 다루는보다 효율적이고 강력한 방법을 살펴 보겠습니다. 뷰 모델 및 비 침습적 JavaScript 사용

보기에서 드롭 다운 메뉴를 코딩하는 대신 필요한 모든 데이터를 포함하도록보기 모델을 소개하는 것이 좋습니다. 또한 비 침습적 JavaScript를 사용하여 오염 표시없이 사용자 경험을 향상시킵니다.

뷰 모델 컨트롤러 작동

컨트롤러 작업에서 뷰 모델을 준비하고보기로 전달합니다.

view

뷰에서 도우미를 사용하여 드롭 -다운 메뉴를 표시합니다.

비 침습적 JavaScript

jQuery를 사용하여 State Drop -Down 메뉴의 동작을 향상시키고 도시를 동적으로로드 할 수 있습니다.

장점

이 방법은 다음과 같은 장점을 제공합니다

<code class="language-csharp">public class PersonViewModel
{
    public int StateID { get; set; }
    public int CityID { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
}</code>

여러 컨트롤러의 작동을 제거함으로써 코드의 복잡성이 줄어 듭니다.

뷰 모델, 컨트롤러 및 뷰 사이의 초점이 분리되어 유지 보수가 향상됩니다. 선택한 상태에 도시를로드하여 사용자 경험을 향상시킵니다. 서버로드를 줄이기 위해 필요한 경우에만 본질이 요청됩니다.

참고 : 위의 코드 클립은 및

메소드가 존재하고 적절한 데이터를 반환했으며 및

<code class="language-csharp">public ActionResult Index()
{
    var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList();
    var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList();
    var model = new PersonViewModel
    {
        States = states,
        Cities = cities
    };

    return View(model);
}</code>

객체는 및

속성을 ​​가지고 있다고 가정합니다. 를 사용하면 Drop -Down 메뉴 옵션이보다 표준화되었습니다. "기본 옵션"을 추가 한 후 "도시"및 "주를 선택하십시오"를 선택하여 사용자 경험을 향상시킵니다.

위 내용은 눈에 잘 띄지 않는 JavaScript를 사용하여 MVC에서 의존적 드롭 다운 (주 및 도시)을 효율적으로로드하려면 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!