title: JqGrid Loads from ASP.NET MVC 3 Partial View
body: <p>I am new to .net MVC structure. I am trying to create Partial view (like user control in traditional asp.net) where I pass Id and it displays jqgrid based on value. </p>
  
  <p>When I add  tag with in Partial view to load Jqgrid using jqery and call controller's method it works. But when i move that code to  .js file jqgrid doesn't load.</p>
  
  <p>Index View</p>
  
  <pre><code>   @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)
  
  }  
  &lt;div&gt;&lt;h3&gt;Lead Details # @ViewBag.LeadID&lt;/h3&gt;&lt;/div&gt;
  
  @using (Html.BeginForm()) { 
      @Html.ValidationSummary(true, "Please correct error/s and try again.");
  &lt;div&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;@Html.LabelFor(m=&gt;m.OwnerID,"Owner:") &lt;/td&gt; &lt;td&gt;@Model.OwnerID&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;@Html.LabelFor(m=&gt;m.StatusID, "Status:") &lt;/td&gt; &lt;td&gt;@Model.StatusID&lt;/td&gt;&lt;td&gt;@Html.LabelFor(m=&gt;m.RatingID, "Rating:") &lt;/td&gt; &lt;td&gt;@Model.RatingID&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;
  
  
  @Html.Partial("_Notes", Model)
  }
  </code></pre>
  
  <p>Partial View (_Notes.cshtml)</p>
  
  <pre><code>@Html.RequireScript("/Scripts/NotesView.js")
  &lt;h4&gt;
      Notes for Lead # @Model.ID&lt;/h4&gt;
  &lt;div style="width: 90%"&gt;
      &lt;table id="jqgNotes" style="width: 100%"&gt;
      &lt;/table&gt;
      &lt;div id="jqgpNotes" style="text-align: center; width: 100%"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="editNote"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>NotesView.js : which loads the jQgrid in JqgNotes table element.</p>
  
  <pre><code>  $(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 "&lt;a href='#' data-edit-id='" + options.rowId + "'&gt;Edit&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href='#' data-delete-id='" + options.rowId + "'&gt;Remove&lt;/a&gt;";
          };
          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
              );
  </code></pre>
  
  <p>When I have .js code with in _notes.chtml as  tag page loads fine. It executes controllers "getNotes" Method but when i move this JavaScript code into .js file and loads its i can still see the alerts coming but controllers "getNotes" method doesn't get executed. I put breakpoints on that method but it never reach to that.</p>
  
  <p>I would really appreciate if you can help me. Either my approach is not right or there is something i am doing is not right. Basically, I want to create partial view which can gets its data (using jquery) by its own so i plug this view to any other page.</p>