ASP.NET MVC를 사용하여 JqGrid에서 여러 테이블의 관련 데이터를 동적으로 표시하는 방법은 무엇입니까?

여러 ASP.NET MVC 테이블의 관련 데이터로 JqGrid를 동적으로 채우기

이 가이드에서는 ASP.NET MVC 애플리케이션의 JqGrid 내에 두 개의 관련 데이터베이스 테이블의 데이터를 표시하는 방법을 보여줍니다. 테이블은 연결되어 있지만 관계에는 ID 값만 사용할 수 있습니다.

솔루션 개요:

이 접근 방식에는 JSON 형식으로 필요한 데이터를 반환하도록 컨트롤러를 수정하고, JqGrid의 위치 데이터 형식을 지정하는 도우미 함수를 만들고, JqGrid의 beforeProcessing 이벤트를 사용하여 열 옵션을 동적으로 설정하고, Bootstrap Select2 for 사용자 경험을 향상시키는 작업이 포함됩니다. 검색하고 필터링하세요.

1. 컨트롤러 수정:

컨트롤러 작업은 두 테이블(예: Students 및 Locations)에서 데이터를 검색하고 JSON 응답 내에 위치 데이터를 포함해야 합니다.

2. 서버측 데이터 형식:

위치 데이터를 JqGrid의 editoptions.value 및 searchoptions.value과 호환되는 형식으로 변환하려면 도우미 기능이 중요합니다. 여기에는 일반적으로 위치를 정렬하고 "ID:값;"으로 연결하는 작업이 포함됩니다.

3. 동적 JqGrid 열 구성:

클라이언트 측 JavaScript 코드에서 beforeProcessing 이벤트를 사용하여 서버 응답에 따라 JqGrid 열 옵션을 동적으로 설정합니다. 이를 통해 열 형식 지정자, 편집 유형 및 기타 설정을 런타임에 조정할 수 있습니다.

4. Bootstrap Select2를 사용한 향상된 검색/필터링:

Bootstrap Select2를 통합하여 드롭다운의 검색 및 필터 기능을 개선하고 표준 선택 요소에 비해 고급 검색 기능과 더 나은 사용자 인터페이스를 제공합니다.

컨트롤러 코드 예:

<code class="language-csharp">public class HomeController : Controller
{
    // ... other controller actions ...

    public JsonResult Students()
    {
        var students = new List<Student> { /* ... your student data ... */ };
        var locations = new List<City> { /* ... your city data ... */ };

        var formattedLocations = locations.OrderBy(l => l.CNAME)
                                         .Aggregate("", (current, location) => current + $"{location.CID}:{location.CNAME};");

        // Remove trailing semicolon
        if (formattedLocations.EndsWith(";"))
        {
            formattedLocations = formattedLocations.Substring(0, formattedLocations.Length - 1);
        }

        return Json(new
        {
            colModelOptions = new
            {
                CITY = new
                {
                    formatter = "select",
                    edittype = "select",
                    editoptions = new { value = formattedLocations },
                    stype = "select",
                    searchoptions = new { sopt = new[] { "eq", "ne" }, value = $":Any;{formattedLocations}" }
                }
            },
            rows = students
        }, JsonRequestBehavior.AllowGet);
    }
}</code>

이 예는 단순화된 구조를 보여줍니다. 특정 데이터베이스 스키마 및 데이터 액세스 방법에 맞게 Student 및 City 클래스와 데이터 검색을 조정합니다. 동적으로 제공되는 colModelOptions을 처리하려면 클라이언트 측 JqGrid 구성을 적절하게 조정해야 합니다.

위 내용은 ASP.NET MVC를 사용하여 JqGrid에서 여러 테이블의 관련 데이터를 동적으로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!