Web Development

#headerLeft > label,
#headerLeft > select {
    display: inline-block;
}

.select-style {
    border: 1px solid #ccc;
    width: 65px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
    }

<h1>headerLeft > label,</h1>

<h1>headerLeft > select {</h1>

    display: inline-block;
}

#headerLeft > label,
#headerLeft > div {
    display: inline-block;
}

.list{display:flex;flex-direction:row;}
.list-item{width:33%;}

<div class="list">
  <div class="list-item">1</div>
  <div class="list-item">2</div>
  <div class="list-item">3</div>
</div>

public class DashboardInfoQueryArgs
{
    public string SearchValue { get; set; }
    public int RowsPerPage { get; set; } = 10;
}

public class DashboardInfoViewModel
{
    public DashboardInfoQueryArgs Query { get; set; }
    public IEnumerable Data { get; set; }
    
    public IEnumerable<SelectListItem> PageSizeOptions
    {
        get
        {
            yield return new SelectListItem { Value = "10", Text = "10", Selected = Query.RowsPerPage == 10 };
            yield return new SelectListItem { Value = "25", Text = "25", Selected = Query.RowsPerPage == 25 };
            yield return new SelectListItem { Value = "50", Text = "50", Selected = Query.RowsPerPage == 50 };
        }
    }
}

public ActionResult Index()
{
    var args = new DashboardInfoQueryArgs();
    return Index(args);
}

[HttpPost]
public ActionResult Index(DashboardInfoQueryArgs args)
{
    var data = _dal.GetDashboardInfos(args);
    var model = new DashboardInfoViewModel { Query = args, Data = data };
    return View(model);
}

@model YourNamespace.DashboardInfoViewModel

@using (@Html.BeginForm("Index", "Home"))
{
    <div class="clearfix">
        <div class="header-label">
            <label>Show</label>
            @Html.DropDownList("RowsPerPage", Model.PageSizeOptions, new { @class = "rows-per-page" })
            <label>rows</label>
        </div>
        <div class="header-label">
            <label>Search</label>
            @Html.TextBox("SearchValue", Model.Query.SearchValue, new { @class = "search-value" })
        </div>
    </div>
    
    <div id="divData">
        @{
            var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.RowsPerPage, canPage: true, ajaxUpdateContainerId: "divData");
 
            @grid.GetHtml(
                emptyRowCellValue: "No Records Found",
                htmlAttributes: new { id = "web-grid" },
                mode: WebGridPagerModes.All,
                columns: grid.Columns
                (
                    grid.Column("RowId", "Row Id", style: "rowid-column-style", format: @@item.RowId),
                    grid.Column("SiteId", "Site Id", style: "siteid-column-style", format: @@item.SiteId),
                ))
        }
    </div>
}

@section Scripts {
    <script>
    $(function(){
        var reloadGrid = function(){
            var data = {
                SearchValue: $(".search-value").val(),
                RowsPerPage: $(".rows-per-page").val()
            };
            
            $("#divData").load("/Home/Index #web-grid", data);
        };
        
        $(".rows-per-page").on("change", reloadGrid);
        $(".search-value").on("change keydown paste input", reloadGrid);
    });
    </script>
}

.header-label {
    width: 50%;
    float: left;
}
.header-label > label,
.header-label > select,
.header-label > input {
    display: inline-block;
}

/* Only needed if you're not using Bootstrap: */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* Hack for IE6/7 support: */
    *zoom: 1;
}

var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.PageSizeOptions, canPage: true, ajaxUpdateContainerId: "divData");

public IEnumerable<dynamic> Data { get; set; }

public IEnumerable Data { get; set; }

Kevin Marois wrote:

the scary part is I'm starting to understand it

$("#searchField").on('change keydown paste input', function () {
    var searchVal = this.value;
    $("#divData").load("/Home/Search #divData > *", { searchValue: searchVal });
});

[HttpPost]
public ActionResult Search(string searchValue)
{
    var data = GetData(new DashboardInfoQueryArgs(searchValue));
    return View("Index", data);
}

$("#searchField").on('change keydown paste input', function () {

function debounce(fn, delay) {
    var timeout;

    return function () {
        var context = this,
            args = arguments;

        clearTimeout(timeout);
        timeout = setTimeout(function () {
            fn.apply(context, args);
        }, delay || 250);
    };
}
...
$("#searchField").on('change keydown paste input', debounce(function () { 
    ... 
}));

• Beginners Guide for Creating GridView in ASP.NET MVC 5[^]
• GridView with Server Side Filtering, Sorting and Paging in ASP.NET MVC 5[^]
• Grid with Server Side Advanced Search using JQuery DataTables in ASP.NET MVC 5[^]