JqG​​rid从ASP.NET MVC 3 Partial View加载

Question

我是.net MVC结构的新手。我正在尝试创建部分视图（如传统asp.net中的用户控件），我传递Id，它显示基于值的jqgrid。

当我在Partial视图中添加tag以使用jqery加载Jqgrid并调用controller的方法时，它可以工作。但是，当我将该代码移动到.js文件时，jqgrid无法加载。

索引视图

   @model Compass.Models.Sales
@{
    ViewBag.Title = "Lead Details";
}
@section  Css {
    @Content.Css("themes/base/jquery-ui.css", Url)
    @Content.Css("jquery.jqGrid/ui.jqgrid.css", Url)
}
@section JavaScript {
       @Content.Script("jquery-ui.multiselect.js", Url)
       @Content.Script("jquery.tmpl.min.js", Url)
       @Content.Script("i18n/grid.locale-en.js", Url)
       @Content.Script("jquery.jqGrid.min.js", Url)

}  
<div><h3>Lead Details # @ViewBag.LeadID</h3></div>

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true, "Please correct error/s and try again.");
<div>
<table>
    <tr>
        <td>@Html.LabelFor(m=>m.OwnerID,"Owner:") </td> <td>@Model.OwnerID</td>
    </tr>
    <tr>
        <td>@Html.LabelFor(m=>m.StatusID, "Status:") </td> <td>@Model.StatusID</td><td>@Html.LabelFor(m=>m.RatingID, "Rating:") </td> <td>@Model.RatingID</td>
    </tr>
</table>
</div>
<p></p>


@Html.Partial("_Notes", Model)
}

部分视图（_Notes.cshtml）

@Html.RequireScript("/Scripts/NotesView.js")
<h4>
    Notes for Lead # @Model.ID</h4>
<div style="width: 90%">
    <table id="jqgNotes" style="width: 100%">
    </table>
    <div id="jqgpNotes" style="text-align: center; width: 100%">
    </div>
</div>
<div id="editNote">
</div>

NotesView.js：在JqgNotes表元素中加载jQgrid。

  $(document).ready(function () {
            alert('testing');
            $('#jqgNotes').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("getNotes")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                postData: {
                    UnitID: '@Model.ID'
                },
                //columns names
                colNames: ['Title', 'Last Modified', 'Last Modified By', 'Edit'],
                //columns model
                colModel: [

                                { name: 'Title', index: 'Title', align: 'left', search: true, stype: 'text', editable: true, edittype: 'text' },
                                { name: 'UpdatedDate', index: 'UpdatedDate', align: 'left', formatter: 'date', formatoptions: { srcformat: 'm/d/Y h:i:s', newformat: 'm/d/Y h:i:s' }, sorttype: "date", datefmt: "m/d/Y h:i:s", search: true },
                                { name: 'UpdatedBy', index: 'UpdatedBy', align: 'left', search: true },
                                { name: 'Edit', index: 'Edit', align: 'center', formatter: supplierFormatter, unformat: supplierUnFormatter, editable: false },
                              ],
                //pager for grid
                pager: $('#jqgpNotes'),
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'UpdatedDate',
                //initial sorting direction
                sortorder: 'desc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%',
                autowidth: true
            });
 function supplierFormatter(cellvalue, options, rowObject) {
            return "<a href='#' data-edit-id='" + options.rowId + "'>Edit</a>&nbsp;&nbsp;<a href='#' data-delete-id='" + options.rowId + "'>Remove</a>";
        };
        function supplierUnFormatter(cellvalue, options, cellobject) {
            return cellvalue;
        };

        $('#jqgNotes').jqGrid('navGrid', '#jqgpNotes',
                { editfunc: function (rowid) {
                    editNoteFunc(rowid);
                    return false;
                }
                },
                {}, // Edit Option
                {}, // add option
                {}, // delete option
                {} // search option
            );

当我在_notes.chtml中使用.js代码时，标记页面加载正常。它执行控制器“getNotes”方法但是当我将这个JavaScript代码移动到.js文件并加载它时，我仍然可以看到警报即将到来，但控制器“getNotes”方法没有被执行。我在该方法上设置了断点，但它从未实现过。

如果你能帮助我，我真的很感激。要么我的方法不对，要么我正在做的事情是不对的。基本上，我想创建部分视图，它可以自己获取数据（使用jquery），所以我将此视图插入任何其他页面。

Answer 1

您似乎在外部javascript文件中使用服务器端帮助程序，例如url: '@Url.Action("getNotes")'和UnitID: '@Model.ID'，这显然不起作用。 Javascript是静态文件，服务器端助手不运行。因此，您必须将这些值作为参数传递给脚本。

例如，您可以在视图中使用HTML5 data-*属性：

<table id="jqgNotes" style="width: 100%" data-url="@Url.Action("getNotes")" data-unitid="@Model.ID">
</table>

然后在您的javascript文件中，您可以将此值与.data()函数一起使用：

url: $('#jqgNotes').data('url')

和

postData: {
    UnitID: $('#jqgNotes').data('unitid')
}

请注意静态javascript文件中不再使用@ Razor服务器端功能。