來自ASP.NET MVC 3的JqGrid負載部分視圖

我是.NET新的MVC結構。我正在嘗試創建部分視圖（如傳統asp.net中的用戶控件），其中我通過Id並顯示基於值的jqgrid。來自ASP.NET MVC 3的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：它加載的jqGrid在JqgNotes表元素。

$(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 
      );

當我有.js代碼在_notes.chtml中，因爲標籤頁加載正常。它執行控制器「getNotes」方法，但是當我將這個JavaScript代碼移動到.js文件並加載它時，我仍然可以看到警報到來，但控制器「getNotes」方法沒有得到執行。我在該方法上設置了斷點，但從未達到這個目的。

我真的很感激，如果你能幫助我。要麼我的方法不對，要麼我做的事情是不對的。基本上，我想創建部分視圖，它可以通過它自己獲取它的數據（使用jquery），所以我將這個視圖插入到任何其他頁面。

來源

2012-06-18 Yash Patel

您似乎在外部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服務器端函數。

來源

2012-06-18 19:36:04

但是，當我把所有東西都放在之下時，相同的代碼有效。讓我試試你的方式。謝謝。 –

是的，它可以工作，因爲當你把它放在Razor視圖中時，你可以訪問服務器端的幫助器。 –

來自ASP.NET MVC 3的JqGrid負載部分視圖

回答

相關問題