locked
Search box on a partial view RRS feed

  • Question

  • User982203039 posted

    Is there a way to add a search box on a partial view? I have a search on a regular view (see code below) I would like to do that same on a partial view but not sure how to do that?

    Thanks!

    <form>
        <div class="form-group">
            <input type="text" class="form-control" id="SearchInput"
                   onkeyup="myFunction()" placeholder="Search for Employee">
        </div>
    </form>
    @section scripts
    {
        <script>
    
            function myFunction() {
                var input, filter, table, tr, td, i;
                input = document.getElementById("SearchInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("empUsers");
                tr = table.getElementsByTagName("tr");
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>

    Wednesday, March 31, 2021 9:47 PM

All replies

  • User475983607 posted

    You have a working page.  Why implement a partial? What is the benefit? 

    If the script section shown above is in the partial - well - that will not work.  Only the main view can have the script section because the section is defined in layout.cshtml.  Partials, by definition, do not use layout.cshtml.

    Wednesday, March 31, 2021 10:00 PM
  • User1686398519 posted

    Hi Baze72, 

    Is there a way to add a search box on a partial view?

    You can create a partial view and then place the search box in the partial view.

    Then, you can use the Html.Partial() method to present the specified partial view.

    I wrote an example according to your needs, you can refer to it:

    Index(This view uses _layout)

    @Html.Partial("PartialView")
        <table id="empUsers">
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>demo</td>
            </tr>
            <tr>
                <td>Index</td>
            </tr>
            <tr>
                <td>Home</td>
            </tr>
        </table>
    @section scripts
    {
        <script>
            function myFunction() {
                var input, filter, table, tr, td, i;
                input = document.getElementById("SearchInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("empUsers");
                tr = table.getElementsByTagName("tr");
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>
    }

    PartialView(This is a partial view)

    <form>
        <div class="form-group">
            <input type="text" class="form-control" id="SearchInput"
                   onkeyup="myFunction()" placeholder="Search for Employee">
        </div>
    </form>

    Here is the result. 

    Best Regards,

    YihuiSun

    Thursday, April 1, 2021 5:37 AM
  • User982203039 posted

    The code I provided was from a view that works. I am trying on a partial view. Here is what I tried - will the example you provided work for this?

    @model IEnumerable<Intranet.Models.HelpDesk>
    
    @{
        string myClass = null;
    }
    
    
    <style>
        .auto-style20 {
            font-size: 12pt;
            color: black;
        }
    
        .New {
            color: darkblue;
        }
    
        .In-Process {
            color: forestgreen;
        }
    
        .High {
            color: red;
            font-weight: 600
        }
    
        .Comment {
            color: orange;
            font-weight: 600
        }
    
        th {
            background: white;
            ;
            top: 0;
            
        }
    
        .tableFixHead {
            overflow-y: auto;
            height: 600px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $.ajax({
            cache: false,
        });
    
    
    </script>
    <form>
        <div class="form-group">
            <input type="text" class="form-control" id="SearchInput"
                   onkeyup="myFunction()" placeholder="Search Helpdesk">
        </div>
    </form>
    <div class="tableFixHead">
        <table class="hoverTable" id="HDSearch">
            <tr>
    
                <th>
                    Technician
                </th>
                <th>
                    Request
                </th>
                <th>
                    Status
                </th>
                <th>
                    Requested By
                </th>
                <th>
                    Branch
                </th>
                <th>
                    Date Opened
                </th>
                <th>
                    Date Closed
                </th>
                <th></th>
            </tr>
    
            @foreach (var item in Model)
            {
    
    
    
                <tr class="@myClass">
                    <td style="width:120px;vertical-align:top;">
                        @item.Technician
                    </td>
                            @item.ID
                    <td style="width:400px" valign="top">
                        @Html.ActionLink(item.Request, "Details", "HelpDesk", new { id = item.ID }, new { @class = "@myClass" })
                    </td>
                            @item.Catagory
    
                    <td style="width:100px" valign="top">
                        @item.Status
                    </td>
    
                    <td style="width:200px" valign="top">
                        @item.RequestedBy
                    </td>
                    <td style="width:150px" valign="top">
                        @item.Branch
                    </td>
                    <td style="width:250px" valign="top">
                        @item.CreateDate
                    </td>
    
                    <td valign="top">
                            @Convert.ToDateTime(item.ModifiedDate).ToString("MM/dd/yyyy")
                    </td>
    
                    <td valign="top" class="auto-style10">
                        @Html.ActionLink("Update", "Edit", new { id = item.ID }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
    
                    </td>
                </tr>
            }
    
        </table>
    </div>
    @section scripts
    {
        <script>
    
            function myFunction() {
                var input, filter, table, tr, td, i;
                input = document.getElementById("SearchInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("HDSearch");
                tr = table.getElementsByTagName("tr");
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>
    }

    Thursday, April 1, 2021 1:21 PM
  • User475983607 posted

    For the second time, the script section does not work in a partial view.

    Thursday, April 1, 2021 2:41 PM
  • User982203039 posted

    Sorry. Missed that. Thanks!

    Thursday, April 1, 2021 6:29 PM
  • User475983607 posted

    Also <style> tags must be within the <head> which is in layout.cshtml.  Place the input and table markup in a partial, the script section in the main view, and the CSS in a file referenced by the layout.cshtml page.

    If the partial view is used in one view then there is little reason to implement a partial view.  

    Thursday, April 1, 2021 6:38 PM
  • User982203039 posted

    Thanks. So what is the best scenario for a partial view to be used?

    Thursday, April 1, 2021 9:31 PM
  • User-474980206 posted

    Thanks. So what is the best scenario for a partial view to be used?

    partial view should be broken into 3 components

     1) the partial view itself
     2) an optional css file
     3) optional js file

    then a base page that uses layout and the partial:

     1) calls the partial in the body
     2) links to the CSS in the style section (must added to layout)
     3) links to the js file in scripts section

    note: in general MVC is not optimized for rendering component based javascript or CSS.   

    Thursday, April 1, 2021 9:48 PM