Question

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.

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.

Index View

   @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)
}

Partial View (_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 : which loads the jQgrid in JqgNotes table element.

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

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.

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.

Answer 1

You seem to be using server side helpers in your external javascript file such as url: '@Url.Action("getNotes")' and UnitID: '@Model.ID' which obviously doesn’t work. Javascript are static files and server side helpers do not run. So you will have to pass those values to the script as arguments.

So for example you could use HTML5 data-* attributes inside the view:

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

and then inside your javascript file you could use this value with the .data() function:

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

and:

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

Notice how there’s no longer the @ Razor server side function used in the static javascript file.