来自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负载部分视图

回答

相关问题