Context: MVC3,JQuery
hello all!
im trying to filter a webgrid by typing into a textbox, problem is, when using Ajax.BeginForm the whole layout is duplicated where the webgrid should be.
this is the same problem as here jquery.unobtrusive-ajax.min causing strange behavior on the view
Controller
[HttpPost] [ChildActionOnly] public ViewResult Files(string filePath) { IEnumerable<File> results = repository.FindBy(f => f.Path.StartsWith(filePath)).Take(5); return View("_grid", results); }
partial view
@model IEnumerable<DAL.File> @{ Layout = null; } @{var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "myGrid"); grid.Pager(WebGridPagerModes.NextPrevious); @grid.GetHtml(tableStyle: "webGrid", headerStyle: "header", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Path", "File"), grid.Column("Size", "Size (bytes)", canSort: true), grid.Column("User", "Owner") ))}
main view
@model IEnumerable<DAL.File> @{ Layout = null; } @using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" })) { @Html.TextBox("filePath", null, new { onKeyUp = "$('form').submit()" }) } div id="myGrid"> @Html.Partial("_grid", Model) /div
Thank you for the help guys, i really need it :)
There seem to be a couple of issues with your code that I can see on first sight:
jQuery.js
and thejquery.unobtrusive-ajax.js
scripts which are requiredFiles
controller action is decorated with the[ChildActionOnly]
attribute meaning that it cannot be accessed through an Ajax callI have tried to clean your code a little and provide an example:
and then you could have the corresponding
Index.cshtml
view:and the
_grid.cshtml
partial:Also note that hamerring your server with AJAX requests everytime the user types some key in the textbox is a very bad idea.