阿贾克斯的WebGrid ..如何使它与MVC 4 W /剃刀工作 [英] WebGrid Ajax.. how to make it work with MVC 4 W/Razor

问题描述

我开始工作的WebGrid与MVC 4，我能够显示分页/分类及其工作按预期....如果我尝试与阿贾克斯那么它拼尽了全力后做出来。

查看 - 管窥：（_hostajax.cshtml）

  @model IEnumerable的＆LT; issoa_ef.host＆GT;
@ {
    ViewBag.Title =指数;
}
＆LT; H2＆GT;指数＆LT; / H＆GT;
＆其中p为H.;
    @ Html.ActionLink（新建，创建）
＆所述; / P＆GT;

    @ {
        VAR电网=新的WebGrid（
            模型，rowsPerPage：2，
            defaultSort：HostFirstName，ajaxUpdateContainerId：ajaxgrid）;
    }

＆LT; D​​IV ID =ajaxgrid＆GT;
    @ grid.GetHtml（
                TABLESTYLE：gridTable
                headerStyle：gridHead
                footerStyle：gridFooter
                rowStyle：gridRow
                alternatingRowStyle：gridAltRow
        列：grid.Columns
        （
            grid.Column（HostFirstName，标题：名，格式为：@＆LT;文本＆GT; @ Html.ActionLink（（串）item.HostFirstName，详细资料，主机，新{ID = item.HostId} ，NULL）＆LT; /文＆GT;）
                            grid.Column（HostMiddleName，标题：中间名），
                            grid.Column（HostLastName，标题：姓），
                            grid.Column（HostEmailAddress，标题：电子邮箱地址）
                        ）
        ）
＆LT; / DIV＆GT;
 

控制器：

 公众的ActionResult指数（）
    {
        VAR模型= db.host.ToList（）;
        如果（Request.IsAjaxRequest（））
            返回PartialView（_ hostajax，模型）;
        其他
            返回查看（模型）;
    }
 

索引页：

 ＆LT; H2＆GT; @ ViewBag.Message＆LT; / H＆GT;
＆其中p为H.;
    @ Html.ActionLink（请求部署，CreateDeployment）
＆所述; / P＆GT;
@ Html.Partial（_ hostajax，模型）
 

解决方案

我做了一个类似的应用。网格没有使用AJAX，但只得到方法来切换页面。这件事发生COS电网的JavaScript是打破用jQuery是没有定义的错误。当我加入了jQuery网格开始使用AJAX。

看<一href="http://stackoverflow.com/questions/15416877/mvc-4-webgrid-and-jquery-produces-two-errors-jquery-is-undefined-and-a-sort-err">MVC 4的WebGrid和jQuery产生两个错误。 jQuery是未定义后Ajax模型的变化的一种错误jQuery是未定义错误。

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>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

    @{  
        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>
<p>
    @Html.ActionLink("Request Deployment", "CreateDeployment")
</p>
@Html.Partial("_hostajax", Model)

解决方案

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 MVC 4 WebGrid and Jquery produces two errors. JQuery is undefined and a sort error after ajax model change for the "jquery is not defined" error.

这篇关于阿贾克斯的WebGrid ..如何使它与MVC 4 W /剃刀工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！