JqGrid 및 검색 양식 - ASP.NET MVC

Question

이 기사에서 다룬 내용은 link text이며,이 기사는 내 사이트에서 제공하고자하는 내용의 스크린 샷을 포함하고 있습니다. 이것이 내가 원하는 것입니다. alt text http://blogs.teamb.com/files/2009/04/jqgridsearchform_1250.png

jqGrid는 가장 좋은 방법입니까? 원하는 것은 검색 매개 변수 인터페이스입니다. 탭 창에 표시 할 검색 결과입니다. 다음에 작업하겠습니다.

Answer 1

JqGrid는 이미지에 표시된 검색 컨트롤을 자동으로 구성합니다. 그래서 이미지에있는 것이 원하는 것이라면, 그렇습니다. JqGrid가 그 길을 가고 있습니다. 그 질문에 포함시킨 스크린 샷을 만드는 데 사용 된 것이기 때문입니다.

당연히이 컨트롤은 JqGrid를 기반으로하므로이 컨트롤을 사용해야합니다. 검색 컨트롤은 "독립형"이 아닙니다 (최소한 디자인상은 아닙니다). 그리드는 구성이 가능하기 때문에 원하는 모양을 얻을 수 있습니다.

그리드를 사용할 수없는 경우 필터/검색 컨트롤을 사용할 수 없습니다. 그러나 그것은 단지 HTML이기 때문에 복사하기 쉽습니다.

Answer 2

사용자가 양식과 컨트롤을 검색하여 jqGrid에 결과를 표시한다고 가정합니다. 대부분의 솔루션은 온라인에서 jqGrid 자체의 검색 컨트롤을 사용하고있어 문제에 대한 선호 옵션이 아닐 수 있습니다. 필요에 따라)

1 검색 양식을 작성 :

난이 acomplish하는 방법에 대한 간단한 예를 보여 드리겠습니다

@using (Html.BeginForm("Index", "Campaign", FormMethod.Post, new { id = "searchCampaigns" })) 
{ 
    <table class="DetailsTable" cellpadding="2" cellspacing="1"> 
     <tr> 
      <td>Title</td> 
      <td>@Html.TextBoxFor(A => A.Titulo, new { Id = "search_title", })</td> 
      <td>Created by</td> 
      <td>@Html.DropDownListFor(A => A.CreatedByUserId, Model.UserList, new { Id = "search_createdBy" }) 
      </td> 
     </tr> 
     <tr> 
      <td> </td> 
      <td colspan="3"><button type="button" onclick="javascript:search();"> 
        Search !</button> 
      </td> 
     </tr> 
    </table> 

2)

가 순서대로 검색 기능을 구현 검색 입력란을 읽으십시오.

<script type="text/javascript"> 
    function search() 
    { 
     var searchValue_title = document.getElementById("search_title"); 
     var searchValue_createdBy = document.getElementById("search_createdBy"); 

     var extraQueryParameters = ""; 

     extraQueryParameters = "?title=" + searchValue_title.value; 
     extraQueryParameters = extraQueryParameters + "&createdBy=" + searchValue_createdBy.value; 

     jQuery("#SearchResults").jqGrid().setGridParam({url : '@Url.Action("GridData")' + extraQueryParameters}).trigger("reloadGrid") 

    } 
</script> 

실제로 @ HTML.TextBoxFor (...)를 사용하여 입력 요소를 만듭니다. MVC 3의 dataAnnotation을 사용하기를 원하지 않는 한 간단한 요소로 처리 할 수 ​​있습니다.

검색 기능은 모든 검색 매개 변수를 연결하고 GridData 작업에 추가합니다. URL은 http://mySite/Controller/GridData?title=hello&createdBy=3과 같이되어야합니다. 이것은 그리드에 공급됩니다.

3 )이 라인을 따라 MVC 컨트롤러 기능을 구현 :

public JsonResult GridData(string sidx, string sord, int? page, int? rows, int? createdBy, string title) 
{ 
    using (MyDataContext ddc = new MyDataContext()) 
    { 
     var baseQuery = ddc.MyCampaign.AsQueryable(); 
     string gridCaption = "Search Results"; 

     if (!string.IsNullOrEmpty(titulo)) 
      baseQuery = baseQuery.Where(A => A.Title.Contains(title)); 

     if(createdBy.HasValue()) 
      baseQuery = baseQuery.Where(A=>A.idCreationUser = createdBy.Value); 

     int pageIndex = Convert.ToInt32(page) - 1; 
     int pageSize = rows.HasValue ? rows.Value : 10; 
     int totalRecords = baseQuery.Count(); 
     int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 

     var ds = (from A in baseQuery 
        select new 
        { 
         ID = A.ID, 
         Title = A.Title, 
        }).OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).ToList(); 

     var jsonData = new 
     { 
      total = totalPages, 
      page = page, 
      records = totalRecords, 
      rows = from A in ds 
        select new 
        { 
         id = A.ID, 
         cell = new[] { A.ID.ToString(), A.Title } 
        }, 
      caption = gridCaption 
     }; 


     return Json(jsonData, JsonRequestBehavior.AllowGet); 
    } 
} 

4) 다음과 같은 문제에 주목하시기 바랍니다 :는 C# 기능에 대한

의 매개 변수 이름을 가 있다는 주장과 일치해야 검색 단추를 클릭하면 쿼리 문자열 빌드가 전달됩니다. 이것은 버그가 http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx 하지만, 대부분의 경우, 작동 :)