1

.netMVC構造は初めてです。Idを渡す部分ビュー（従来のasp.netのユーザーコントロールなど）を作成しようとしていますが、値に基づいてjqgridが表示されます。

部分ビューでタグを追加して、jqeryを使用してJqgridをロードし、コントローラーのメソッドを呼び出すと、機能します。しかし、そのコードを.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を使用して）独自にデータを取得できる部分ビューを作成したいので、このビューを他のページに接続します。

4

1 に答える 1

2

url: '@Url.Action("getNotes")'やなどの外部 JavaScript ファイルでサーバー側のヘルパーを使用しているようですが、UnitID: '@Model.ID'明らかに機能しません。Javascript は静的ファイルであり、サーバー側のヘルパーは実行されません。したがって、これらの値を引数としてスクリプトに渡す必要があります。

たとえばdata-*、ビュー内で HTML5 属性を使用できます。

<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 サーバー側関数がなくなったことに注目してください。

于 2012-06-18T19:36:04.367 に答える