Как выполнить поиск Telerik MVC Grid на основе выбранных значений ListBox в ASP.NET MVC 2.0? - PullRequest
Новая
       16

Как выполнить поиск Telerik MVC Grid на основе выбранных значений ListBox в ASP.NET MVC 2.0?

0 голосов
/ 10 апреля 2011

У меня есть Telerik MVC Grid, где есть столбец Имена, Пол, Возраст. Я собираюсь использовать ListBox, привязанный к Gender (исходя из SQL 2k8 Таблица «Person». Я использую Entity Framework, POCO классы, Repository Pattern). Тогда есть кнопка Изображение как «Поиск».

Когда пользователь выбирает несколько значений из ListBox, а затем нажимает кнопку «Поиск», должна быть заполнена Telerik MVC Grid, которая находится на той же странице (я отображаю пользовательский элемент управления, который имеет Telerik MVC Grid).

как это сделать? как передать выбранные значения ListBox обратно в контроллер Действие «SearchPerson». Есть способ сделать это, используя JQuery. Но я не знаю, как это сделать. Пожалуйста, помогите мне

РЕДАКТИРОВАТЬ: код 

       <% using (Ajax.BeginForm("SearchVouDate", "ERA", new AjaxOptions { UpdateTargetId = "ProfileList", LoadingElementId = "LoadingImage", OnSuccess = "ShowMessage" }))
       { %>

    <div  class="SelectNPI" >
        <div class="DivSelectNPI">
            <input name="selection1" value="NPI" id="rdNPI" type="radio"  onclick="toggleLayer(this.checked);"  />
            <%:Html.Label(Resources.Strings.SelectNPI) %>
            <div id="ERANPI" style="display: none;"  >
               <%:Html.ListBoxFor(m => m.Eras.NPI, new MultiSelectList(Model.GetERAs, "NPI", "NPI", Model.NPIListBox), new { ID="NPIList", style = "width: 160px; height:50px" })%>
           </div>
        </div>
        <div class="SelectPIN">
            <input name="selection1" type="radio" id="rdPIN" value="PIN" onclick="toggleLayer1(this.checked);"  />
            <%:Html.Label(Resources.Strings.SelectPIN) %>
            <div id="ERAPIN" style="display: none;" >
               <%:Html.ListBoxFor(m => m.Eras.PIN, new MultiSelectList(Model.GetERAs, "PIN", "PIN", Model.PINListBox), new {ID="PINList", style = "width: 180px; height:50px" })%>
           </div>
        </div>
    </div>

            <input type="submit" class="btnSearchSubmit" id="PaySearchDateSubmit" name="PaySearchDateSubmit" value="Search" />
        </div>

    </div>
     <%} %>
     <br /><br />

     <div class="ERATopDiv" > <label id="Label1" class="lblSearchResult">  Search By Check Number</label> </div>
    <br />


    <div class="ERATopDiv"><label id="Label3" class="lblSearchResult" >Search Result</label> </div>
    <div id="ProfileList">
        <%Html.RenderPartial("SearchVoucherNum"); %>
    </div>
    <div id="results">
    </div>

</div>
<div id="EraPopupWindow">

</div>

Мой контроллер: 

           [HttpPost]
         public ActionResult SearchVouDate(ERAViewModel era, FormCollection formValues)
         {
        try
        {

           if (formValues["Eras.NPI"] != null)
            {
              era.NPIListBox = formValues["Eras.NPI"].Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                string[] selectedNPI = era.NPIListBox;
                ERAViewModel ervm = new ERAViewModel();
                foreach (string NPI in selectedNPI)
                {                        
                    ervm = this.WorkerService.SearchByNPI(formValues);
                    return PartialView("SearchVoucherNum", ervm);
                }


            }
            else
            {
                ERAViewModel eras = this.WorkerService.SearchByPIN(era.Eras.PIN);
                return PartialView("SearchVoucherNum", eras);
            }
        }
        catch (Exception ex)
        {
            bool reThrow = ExceptionPolicyWrapper.HandleException(ex, ExceptionPolicies.MVCPolicy);
            if (reThrow)
                throw;
        }
        return null;
    }

Мой PartialView, который я рендерингю на моем главном представлении (главное представление содержит мой ListBox, а частичное представление содержит мою Telerik MVC Grid) 

     <% Html.Telerik().Grid(Model.GetERAs)
       .Name("ERA").TableHtmlAttributes(new { style = "height:20px" })
       .Scrollable(scroll => scroll.Enabled(true))
       .DataKeys(datakeys => datakeys.Add(m => m.EraId))
       .Columns(columns =>
           {
               columns.Bound(m => m.NPI).Title(Resources.Strings.NPI).Width(150)
                   .HtmlAttributes(new { style = "text-align:center" })
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" });
               columns.Bound(m => m.PIN).Title(Resources.Strings.PIN).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.GroupName).Title(Resources.Strings.GroupName).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.CheckNo).Title(Resources.Strings.CheckNo).Width(100)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.VoucherNo).Title(Resources.Strings.VoucherNo).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.VoucherDate).Title(Resources.Strings.VoucherDate).Format("{0:dd/MM/yyyy}").Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.PaymentDate).Title(Resources.Strings.PaymentDate).Format("{0:dd/MM/yyyy}").Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.NonHippaVoucherPath).Title(Resources.Strings.NonHippaVoucherPath).Width(150).Format(Ajax.ActionLink("View Non Hippa voucher", "GetPdffile", "ERA", new { Id = "{0}" }, new AjaxOptions() { UpdateTargetId = "EraPopupWindow", HttpMethod = "Get" }, new { Style = "color:#FF0070;" }).ToString().Replace("{", "{{").Replace("}", "}}")).Encoded(false);
               columns.Bound(m => m.HippaVoucherPath).Title(Resources.Strings.HippaVoucherPath).Width(150).Format(Ajax.ActionLink("View Hippa voucher", "GetPdffile", "ERA", new { Id = "{0}" }, new AjaxOptions() { UpdateTargetId = "EraPopupWindow", HttpMethod = "Get" }, new { Style = "color:#FF0070;" }).ToString().Replace("{", "{{").Replace("}", "}}")).Encoded(false);  
               //columns.Bound(m => m.Non_hippa_voucher_path).HtmlAttributes("color:#8A2BE2").Format(Html.ActionLink("View Non Hippa voucher", "GetPdffile", "ERA", new { ID = "{0}" }, new { onclick = "return someFunction();", Style = "color:#8A2BE2" }).ToHtmlString()).Encoded(false).Title("").Width(150);
               //columns.Bound(m => m.Hippa_voucher_path).HtmlAttributes("color:#8A2BE2").Format(Html.ActionLink("View Hippa voucher", "GetFile/", new { ID = "{0}", Style = "color:#8A2BE2" }, "ERA/").ToHtmlString()).Encoded(false).Title("").Width(150);


           })

         //  .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding"))
           .DataBinding(databinding => databinding.Ajax().Select("AjaxERA", "ERA"))
           .EnableCustomBinding(true)
           .Pageable(paging =>{paging.Enabled(true) ;paging.PageSize(5) ;})
            .Sortable()
             .Filterable()
             .Footer(true)
            .Render();

%>

1 Ответ

3 голосов
/ 10 апреля 2011

Лучший способ сделать это - использовать jQuery.

Вам нужен ваш список и для привязки вашей сетки в AJAX.

Вот пример кода, который у меня есть в приложении:

Просмотр 

<div class="content-box-filter">
        <label>Filter:</label>
        <%= Html.DropDownList("Years", Model.Years) %>
    </div>
    <div class="content-box">
        <div class="content-box-header">
            <h3>News</h3></div>
        <div class="content-box-content">
            <%= Html.Telerik().Grid<News>()
                    .Name("Grid")
                    .Columns(colums =>
                     {
                         colums.Bound(c => c.Title).Title("Titre").ClientTemplate("<a href=\"" + Url.Action(MVC.News.Modifier()) + "/<#=IdValue#>\" ><#=Title#></a>");
                         colums.Bound(c => c.Title).Title("Inscriptions").ClientTemplate("<a href=\"" + Url.Action(MVC.News.Inscriptions()) + "/<#=IdValue#>\" >fichier excel</a>");
                         colums.Bound(c => c.Published).Title("Publiée").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<img src=\"../Content/images/icons/<#=Published#>.png\" alt=\"<#=Published#>\" />");
                         colums.Bound(c => c.CreationDate).Title("Date").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).Format("{0:MM/dd/yyyy}");
                         colums.Bound(c => c.IdValue).Title(" ").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<a href=\"" + Url.Action(MVC.News.Modifier()) + "/<#=IdValue#>\" title=\"Modifier\" ><img src=\"../Content/images/icons/pencil.png\" alt=\"Modifier\" /></a>");
                         colums.Bound(c => c.IdValue).Title(" ").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).Format("<a id=\"deleteLink{0}\" href=\"#\" title=\"Supprimer\" onclick=\"if(confirm('Voulez-vous vraiment supprimer cette nouvelle?')){ return deleteNews('{0}');} else { return false;};\"><img src=\"../Content/images/icons/cross.png\" alt=\"Supprimer\" /></a>");
                     })
                    .DataBinding(d => d.Ajax().Select("ListAjax", "News", new { year = DateTime.Now.Year }))
                    .Sortable()
            %>
            <%= Html.AntiForgeryToken() %>
        </div>
    </div>
    <script type="text/javascript">
        var token = $('[name=__RequestVerificationToken]').val();
        $(document).ready(function() {
            $('#Years').val(<%=DateTime.Now.Year%>);
            $('#Years').change(function() {
                var grid = $('#Grid').data('tGrid');
                grid.rebind({ year: this.value });
            });
        });
        function deleteNews(newsId) {
            $.post('DeleteNews', { __RequestVerificationToken: token, id: newsId }, function(data) {
                if (data == 'true') {
                    $('#deleteLink' + newsId).parent().parent().remove();
                } 
                return false;
            });
            return false;
        };
    </script>

Действие NewsController: 

[GridAction]
        public virtual ActionResult ListAjax(int year)
        {
            var gridModel = new GridModel<News>();
            gridModel.Data = _newsRepo.GetByYear(year);
            return View(gridModel);
        }

Дайте мне знать, если у вас все еще есть вопрос.

...