Binding Search Results

3 posts, 0 answers
  1. Victor
    Victor avatar
    23 posts
    Member since:
    Feb 2015

    Posted 29 Oct 2015 Link to this post

    I am not able to bind search results to the ListView. The ListView always returns 0. 

    I only wants the bind to happened when the search button is clicked. How to do it?

    Code: 

     

    @{
        ViewBag.Title = "Search";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }


    <div class="col-sm-12">
            @using (Html.BeginForm("excSearch", "Search", FormMethod.Post))
            {
                <div class="col-sm-12" role="form" style="text-align: center;">
                    <div>
                        <span style="font-size:40px;">Search</span>
                    </div>

                    <div style="padding: 15px; background: rgba(240,240,240,.9)">
                        <div class="input-group form-group" style="margin-bottom: 0px !important;">
                            <input type="text" name="search_keyword" placeholder="Enter Keyword..." required="required" class="searchTxtInputs" />
                            <span class="input-group-addon" style="padding: 0px 8px 0px 8px;"><i class="fa fa-search"></i></span>
                        </div>
                        <br />                                
                        <div style="text-align: right;">                    
                            <div style="padding: 5px; display: inline-block;">
                                @(Html.Kendo().Button()
                                    .Name("btnSearch")
                                    .Content("Search")
                                    .HtmlAttributes(new { @class = "btn-primary", type = "submit" })
                                    .Events(e => e.Click("execButtonSearch"))
                                )
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-9" style="padding:0px 0px 40px 35px;">
                </div>

                <div class="articleContainer col-sm-12">
                    <script type="text/x-kendo-template" id="template">
                          
                        <div class="row departmentArticleListRow">                         
                            #if(MainImage !== null && MainImage !== ""){#
                                <div class="col-lg-2 departmentArticleListImage Style_1">
                                    #= htmlDecode(MainImage) #
                                </div>
                                <div class="col-lg-10 departmentArticleList">
                                    #if(SEO !== null){#
                                        <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
                                    #}else{#
                                        <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
                                    #}#
                                    <span class="departmentArticleListBlurb">   #= htmlDecode(Blurb) #</span><br /><br />
                                    <span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
                                </div>
                            #}else{#
                                <div class="col-lg-12 departmentArticleList">
                                    #if(SEO !== null){#
                                        <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
                                    #}else{#
                                        <a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
                                    #}#
                                <span class="departmentArticleListBlurb"> #= htmlDecode(Blurb) #</span><br /><br />
                                <span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
                                </div>
                            #}#
                        </div>
                    </script>

                    <script type="text/javascript">
                        function replaceString(value) {
                            if (value)
                                return value.replace(/\s+/g, "-");
                        }
                    </script>

                    <script type="text/javascript">
                        function htmlDecode(value) {
                            if (value) {
                                if (value.length >= 200) {

                                    var i = 200;

                                    if (value.charAt(i) === ' ') {
                                        value = value.substring(0, i).trim() + "...";
                                    }
                                    else {
                                        while (value.charAt(i) !== ' ') {
                                            value = value.substring(0, i);
                                            i--;
                                        }
                                        value = value.trim() + "...";
                                    }
                                }
                                return value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
                            }
                        }
                    </script>

                    @(Html.Kendo().ListView<DAL_NEW.Article>()
                        .Name("SearchArticlesList")
                        .ClientTemplateId("template")
                        .TagName("div")
                        .DataSource(datasource =>
                        {
                            datasource.Model(model =>
                            {
                                model.Id(p => p.Article_ID);
                                model.Field(p => p.Title);
                            });
                            datasource.Read(read => read.Action("excSearch", "Search"));   
                            datasource.PageSize(10);
                        })
                        .Pageable()
                        .HtmlAttributes(new { @class = "departmentListView" })
                    )
                </div>
                <script>
                    function execButtonSearch() {
                        $("#btnSearch")
                         .button()
                         .click(function (event) {
                             $("#SearchArticlesList").data("kendoListView").dataSource.read();
                         });
                    }
                </script>

            }
        </div>

        
    public ActionResult excSearch([DataSourceRequest]DataSourceRequest request, string search_keyword)
     {            
                GetSearchArticles(request, search_keyword);
                return View("Search", this);
     }

            public ActionResult GetSearchArticles([DataSourceRequest]DataSourceRequest request, string search_keyword)
            {
                List<proc_SearchNewObject> articleList = db.Proc_Search_New(Pub.Pub_ID, "*", search_keyword, null, null, null, null, null).ToList();          
                return Json(articleList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }

  2. Victor
    Victor avatar
    23 posts
    Member since:
    Feb 2015

    Posted 30 Oct 2015 in reply to Victor Link to this post

    I fixed it. The solution was to use: .BindTo(Model.articleList)
      

    View:

    @(Html.Kendo().ListView<DAL_NEW.proc_SearchNewObject>()
        .Name("SearchArticlesList")
        .ClientTemplateId("template")
        .TagName("div")      
        .BindTo(Model.articleList) 
        .Pageable()                                 
        .HtmlAttributes(new { @class = "departmentListView" })
    )

     

    Controller:

     

    public IEnumerable<proc_SearchNewObject> articleList;
    private readonly EntitiesModel db = new EntitiesModel();
     
    [HttpPost]
    public ActionResult Search([DataSourceRequest]DataSourceRequest request)
    {           
        ViewBag.Keyword = Request.Form["search_keyword"];
                 
        articleList = db.Proc_Search_New(some parameters);         
                     
        return View("Search", this);
    }

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Nov 2015 Link to this post

    Hello Victor,

     

    I am happy to hear that the issue is resolved.

     

    In case you have any further questions, please do not hesitate to contact us.

     

    Regards,
    Kiril Nikolov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top