48853

WebGrid Ajax.. how to make it work with MVC 4 W/Razor

Question:

I started working on WebGrid with MVC 4 and I able to display the paginating/sorting and its work as expected.... if i try to make it with with ajax then its doing the full post.

View: - Partial View: (_hostajax.cshtml)

@model IEnumerable<issoa_ef.host> @{ ViewBag.Title = "Index"; } <h2>Index</h2>

@Html.ActionLink("Create New", "Create")

@{ var grid = new WebGrid( Model, rowsPerPage: 2, defaultSort: "HostFirstName", ajaxUpdateContainerId: "ajaxgrid"); } <div id="ajaxgrid"> @grid.GetHtml( tableStyle: "gridTable", headerStyle: "gridHead", footerStyle: "gridFooter", rowStyle: "gridRow", alternatingRowStyle: "gridAltRow", columns: grid.Columns ( grid.Column("HostFirstName", header: "First Name", format: @<text>@Html.ActionLink((string)item.HostFirstName, "Details", "Host", new { id = item.HostId }, null)</text>), grid.Column("HostMiddleName", header: "Middle Name"), grid.Column("HostLastName", header: "Last Name"), grid.Column("HostEmailAddress", header: "eMail Address") ) ) </div>

Controller:

public ActionResult Index() { var model = db.host.ToList(); if (Request.IsAjaxRequest()) return PartialView("_hostajax", model); else return View(model); }

Index page:

<h2>@ViewBag.Message</h2>

@Html.ActionLink("Request Deployment", "CreateDeployment")

@Html.Partial("_hostajax", Model)

Answer1:

I've made a similar application. The grid was not using ajax, but just GET method to switch pages. This happened cos grid's javascript was breaking with "jquery is not defined" error. When I added the jQuery the grid started using ajax.

see <a href="https://stackoverflow.com/questions/15416877/mvc-4-webgrid-and-jquery-produces-two-errors-jquery-is-undefined-and-a-sort-err" rel="nofollow">MVC 4 WebGrid and Jquery produces two errors. JQuery is undefined and a sort error after ajax model change</a> for the "jquery is not defined" error.

Recommend

  • Jquery scripts order in ASPNET MVC 4 application
  • ASP.NET MVC 3.0 WebGrid - Ajax Enabled
  • How to bind json dynamic model in asp.net mvc 3?
  • How to show two Partials view data on Index.cshtml MVC3?
  • How to alter a value before storing it to the database in Keystone JS
  • checkbox oncheck redirect to actionresult in mvc
  • Custom Pager in xpages
  • Set datagrid to show just 5 rows per page
  • How to implement paging for a TableView in JavaFX? [duplicate]
  • How does document.ready work with angular element directives?
  • Access Android Market through SSH tunnel
  • Insert new calendar with SyncAdapter- Calendar API Android
  • xtable package: Skipping some rows in the output
  • How integrated is Collada to OpenGL ES
  • Get history of file changes from TFS to implement custom “blame”-behaviour of exceptions
  • Blackberry - Custom EditField Cursor
  • Test if a set exists before trying to drop it
  • D3 nodes and links from JSON with nested arrays of children
  • How to create a file in java without a extension
  • Alert pop up with LWUIT
  • NHibernate Validation Localization with S#arp Architecture
  • FileReader+canvas image loading problem
  • ilmerge with a PFX file
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Adding a button at the bottom of a table view
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Read text file and split every line in MSBuild
  • req.body is undefined - nodejs
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Counter field in MS Access, how to generate?
  • Get object from AWS S3 as a stream
  • Java applet as stand-alone Windows application?
  • MySQL WHERE-condition in procedure ignored
  • Adding custom controls to a full screen movie
  • Comma separated Values
  • Error creating VM instance in Google Compute Engine
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]