Web Development

<div id="headerLeft" style="position: relative; width:50%; float:left">

<pre>
<label>Show</label>
<div class="select-style">
    <select id="rowsperpage" name="rowsperpage" onchange="updateRowsPerPage(this.value)">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
    </select>
</div>
<label>rows</label>

.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;
    }

public HomeController()
{
    ViewData["RowPerPage"] = 10;
}

var grid = new WebGrid(Model, rowsPerPage: Convert.ToInt32(ViewData["RowPerPage"]), canPage: true, ajaxUpdateContainerId: "divData");

<div id="headerLeft" style="position: relative; width:50%; float:left">
    <label >Show</label>
    <select id="rowsperpage" name="rowsperpage" onchange="updateRowsPerPage(this)">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
    </select>
    <label >rows</label>
</div>

function updateRowsPerPage(selectedObject) {

    var selectedRowsPerPage = selectedObject.value;  

    // How do I make the Rows Per Page change here?
}

public class HomeController : Controller
{
    private IDataAccess _dal;

    public HomeController()
    {
        _dal = new DataAccess();
    }

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

        var data = GetData(args);
        return View(data);
    }

    public IEnumerable GetData(DashboardInfoQueryArgs args)
    {
        var data = _dal.GetDashboardInfos(args);
        return data;
    }

    [HttpPost]
    public IEnumerable Search(string searchValue)
    {
        var data = GetData(new DashboardInfoQueryArgs(searchValue));
        return data;
    }
}

@using (@Html.BeginForm("Index", "Home"))
{

        @{
            var grid = new WebGrid(Model, rowsPerPage: 10, 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),
                ))
        }

}

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

    // Get the value the user typed in and pass it to the controller
    var searchVal = document.getElementById("searchField").value;

    $.ajax({
        type: "POST",
        url: '/Home/Search',
        data: { searchValue: searchVal },
        success: function (result) {

            // Here I want to reload the grid from the controller's Seaarch method

        },
        error: function (result) {
            alert('Error!');
        }
    });

});

proxy.on('notifyAllClientsOfChanges', function (model) {

    // Find the row who's Id matches the model's RowId
    var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");

    // If the row was found...
    if ($row.length) {

        // if the row was found, then update it
        updateRow($row, model)
    }
    else {

        // The row does not exist, so add it to the table
        createNewRow(model);
    }

    function createNewRow(model)
    {
        var table = document.getElementById('MyGrid');

        var new_row = table.rows[0].cloneNode(true);

        new_row.cells[0].value = model.RowId;
        new_row.cells[1].value = model.SiteId;
        new_row.cells[2].value = model.InstrumentId;
        new_row.cells[3].value = model.TowerLocation;
        new_row.cells[4].value = model.BayLocation;
        new_row.cells[5].value = model.BaySerialNo;
        new_row.cells[6].value = model.BayStatus;
        new_row.cells[7].value = model.AccessionId;
        new_row.cells[8].value = model.Result;
        new_row.cells[9].value = model.AssayName;
        new_row.cells[10].value = model.Started;
        new_row.cells[11].value = model.Completed;
        new_row.cells[12].value = model.TestSummary;

        table.appendChild(new_row);
    }

    function updpateRow($row, model)
    {
        var col01 = $row.find(".x-SiteId").text(model.SiteId);
        var col02 = $row.find(".x-InstrumentId").text(model.InstrumentId);
        var col03 = $row.find(".x-TowerLocation").text(model.TowerLocation);
        var col04 = $row.find(".x-BayLocation").text(model.BayLocation);
        var col05 = $row.find(".x-BaySerialNo").text(model.BaySerialNo);
        var col06 = $row.find(".x-BayStatus").text(model.BayStatus);
        var col07 = $row.find(".x-AccessionId").text(model.AccessionId);
        var col08 = $row.find(".x-Result").text(model.Result);
        var col09 = $row.find(".x-AssayName").text(model.AssayName);
        var col10 = $row.find(".x-Started").text(model.Started);
        var col11 = $row.find(".x-Completed").text(model.Completed);
        var col12 = $row.find(".x-TestSummary").text(model.TestSummary);
    }
});