JqGrid и форма поиска - ASP.NET MVC

Question

Наткнулся на эту статью, текст ссылки , и, прочитав, в статье был скриншот того, что я хочу представить на своем сайте. Это то, что я хочу,

Является ли jqGrid лучшим способом? Все, что я хочу, это интерфейс параметров поиска. Результат поиска, который я хочу отобразить в окне с вкладками, над которым я буду работать дальше.

Answer 1

Я предполагаю, что вы хотите выполнить поиск по собственной форме и элементам управления, а затем отобразить результаты в jqGrid. В большинстве решений, найденных в Интернете, используются собственные элементы управления поиском jqGrid, которые могут не подходить для вашей проблемы.

Я покажу простой пример того, как это сделать:

1) Создайте форму поиска при необходимости:

@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, вы можете обойтись простыми элементами.

Функция поиска просто объединяет все параметры поиска и добавляет их в действие 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 # должны соответствовать аргументам, которые передаются при построении строки запроса при нажатии кнопки «Поиск» кнопка. Метод .OrderBy (sidx + "" + sord) требует, чтобы вы использовали динамическая DLL Linq, доступная по адресу: http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx В этом есть ошибки, но по большей части это работает:)

Answer 2

JqGrid создаст элемент управления поиском, показанный на изображении автоматически. Так что, если на изображении то, что вы хотите, то да, JqGrid - это то, что нужно, поскольку именно это я использовал для создания снимка экрана, который вы включили в вопрос.

Естественно, этот элемент управления основан на JqGrid, поэтому вам придется использовать его. Элемент управления поиском не является «автономным» (по крайней мере, не задуманным). Однако сетка вполне настраиваема, поэтому вы можете получить желаемый вид.

Если вы не можете использовать сетку, то вы, вероятно, не можете использовать фильтр / элемент управления поиском. Но это всего лишь HTML, поэтому его легко скопировать.