Razor(使用部分视图)特定刷新

时间:2012-02-14 11:14:21

标签: razor refresh webgrid

我有一个Razor页面,其中包含一个表和部分视图,其中source作为List //(Model.LeaveTypeList)

                            @using (Html.BeginForm())
                            {           
                                <table>

                                    @*Grid Added as Partial View for leave Types*@
                                    <tr>
                                        <td colspan="2">
                                            <div>
                                                @Html.Partial("LeaveTypesPartial", Model.LeaveTypeList)
                                            </div>

                                        </td>
                                    </tr>

                                </table>

                            }

这是局部视图(LeaveTypesPartial.cshtml)

                            @model List<AscoraWeb.Models.LeaveTypeModel>
                            @{

                                Layout = null;
                            }
                            @{        

                                //canSort:false,

                                var grid = new WebGrid(source: Model,
                                             defaultSort: "Name",
                                             rowsPerPage: 7);
                            }
                                <table>
                                 <tr>
                                        <td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
                                            These leaves can be assigned to Employees in the Service Calender for scheduling
                                        </td>

                                        <td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
                                        </td>
                                    </tr>

                                    @*Row with buttons*@
                                    <tr>
                                        <td align="right" colspan="1">
                                            <input type="button"/>
                                            <input type="button"/>
                                        </td>

                                    </tr>

                                    <tr>
                                        <td>
                                        <div id="grid">
                                            @grid.GetHtml(
                                                tableStyle: "grid",
                                                headerStyle: "head",
                                                alternatingRowStyle: "alt",
                                                columns: grid.Columns(
                                                    grid.Column("name")
                                                    )
                                       )
                                        </div>

                                        </td>
                                    </tr>
                                </table>

在应用程序控制器中,我们为部分视图分配了一些值

                                public ActionResult RatesAndCharges()
                                {
                                    //Message that will appear before the content of the view is shown
                                    ViewBag.Message = "This is the Rates and Charges section!";



                                    //Adding content for the leave types grid
                                    var ratesChargesModel = new RatesChargesModel { };

                                    ratesChargesModel.LeaveTypeList = new List<LeaveTypeModel>();

                                    var leaveTypeModel = new LeaveTypeModel { Name = "Paid Leave" };

                                    ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);

                                    leaveTypeModel = new LeaveTypeModel { Name = "Unpaid Leave" };

                                    ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);

                                    return View(ratesChargesModel);
                                }

这很好用,我可以看到带有元素的网格

网格元素可以按名称排序(因为我们有defaultsort:Name) 但是当我们点击名称时,整个页面都会被刷新(调用公共ActionResult RatesAndCharges()) 因此,我需要一种方法来对网格中的元素进行排序,而无需刷新页面。

1 个答案:

答案 0 :(得分:0)

你必须使用JQuery或其他东西向服务器发出一个AJAX请求......我不知道WebGrid是否支持这个。但是你总是可以通过使用JQuery调用一个动作方法来自己完成它,它返回一个局部视图,然后你将旧的HTML换成新的。