Loading partial causes internal error and replaces top panel

[Mike]

hi,

I'm using MVC 3 and Razor. I have a panel that uses the LoadContentFrom approach to load a partial as the content of the first panel. During page load, i get an "Internal Server Error" (500). I have a client event attached to a grid that then tries to reload the panel using jQuery $.load() whenever a row is selected so I can display information related to the selected row. I've added an id html attribute to the top panel and use that to load the grid row related data which replaces the top item with the returned partial (the same one I try to load with LoadContentFrom).

Here is the markup for the panel:

@{ Html.Telerik().PanelBar()
          .Name("PanelBar")
          .ExpandMode(PanelBarExpandMode.Multiple)
          .HtmlAttributes(new { style = "min-width: 180px; width: 100%; font-size: 0.65em;" })
          .SelectedIndex(0)
          .Items(item =>
          {
            item.Add()
                .Text("Metadata")
                .LoadContentFrom("GetMetadata", "Home")
                .HtmlAttributes(new { @id = "metaDataContent" })
                .Expanded(true);
            item.Add().Text("Version").Items((subItem) => { subItem.Add().Text("Versions - TODO"); });
            item.Add().Text("Associated File").Items((subItem) => { subItem.Add().Text("A File Associations - TODO"); });
          })
          .Render();
      }

I've also tried using 

.Content(@<text>@Html.RenderPartial("Metadata")</text>)

instead of the LoadContentFrom method but get a compilation error (CS0136: A local variable named 'item' cannot be declared in this scope because it would give a different meaning to 'item', which is already used in a 'parent or current' scope to denote something else). So apparently when the html helper tries to render the partial, it causes a naming conflict.

Here is the JavaScript that reloads the partial:

function rowSelect(e) {
    var param = { 'id': $(e.row.cells[0].firstChild).attr('value') };
    $('#metaDataContent').load('/Home/GetMetadata', param, function () {
        //alert('loaded');
    });
};

Here is the HomeController.GetMetadata action:

[ActionName("GetMetadata")]
public ActionResult GetMetadata(long id)
{
    if (id > 0)
    {
        var criteria = new SearchCriteria
                                     {
                                         Id = Guid.NewGuid(),
                                         SearchBy = SearchByEnum.FileId,
                                         SearchOperator = SearchOperatorEnum.Equals,
                                         SearchValue = id.ToString()
                                     };
        var file = DoSearch(new[] { criteria }).Where(f => f.StoreFileId == id).FirstOrDefault();
        var model = new SearchModel { SelectedFile = file };
        return PartialView("Metadata", model);
    }
    return PartialView("Metadata", new SearchModel());
}

This  is my SearchModel:

public class SearchModel
{
    public SearchModel()
    {
        Message = string.Empty;
        ExpressionCount = 1;

        // we need a default single search criteria so the UI has a single expression
        SearchExpressionList = new List<SearchCriteria> { new SearchCriteria { SearchBy = SearchByEnum.FileName, SearchOperator = SearchOperatorEnum.Contains } };
    }

    public List<SearchCriteria> SearchExpressionList { get; set; }
    public SearchFileInfo[] SearchedFileList { get; set; }
    public SearchFileInfo SelectedFile { get; set; }

    public SearchByEnum SearchFieldEnumList { get; set; }
    public SearchOperatorEnum SearchOperatorEnumList { get; set; }

    [Required(ErrorMessage = "Search value is required.")]
    public string SearchValue { get; set; }

    public string Message { get; set; }
    public int ExpressionCount { get; set; }

Here is the partial:

@model LanguageAssetRepository.Web.Models.SearchModel
<style type="text/css">
    table { width: 100%; }
    .altRow { background-color: #edf0ef; }
    .labelCell { text-align: right; width: 90px; }
</style>
<table>
    <tr>
        <td class="labelCell">
            File Name:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.FileName)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Custom:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.Custom)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            Source Language:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.SourceLanguage)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Target Language:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.TargetLanguage)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            Version Note:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.VersionNote)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Submitter:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.Submitter)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            Submitter Version #:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.SubmitterVersionNumber)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Path:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.FilePath)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            File Type:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.FileType)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Mime Type:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.MimeType)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            Project ID:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.ProjectId)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Product ID:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.ProductId)
        </td>
    </tr>
    <tr>
        <td class="labelCell">
            Job Name:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.JobName)
        </td>
    </tr>
    <tr class="altRow">
        <td class="labelCell">
            Job Id:
        </td>
        <td>
            @Html.DisplayFor(model => model.SelectedFile.JobId)
        </td>
    </tr>
</table>

I'm really trying to figure out 2 things: 1) Why am I getting the internal error; and 2) how do I refresh the panel contents. The grid callback (the above JavaScript) works find, but replaces the entire first panel since the id attribute is associated with it. The internal error comes even though the "Home/GetMetadata" action is not hit (according to my debugger) on page load, but is hit when the $.load() ajax call is made.

Any help would be appreciated.

thanks,

Mike

[Mike]

Hi,

Solved it. In a different post I found using

Compiler Error Message: CS0136

as the search string i found the compiler error. Once I'd renamed the lambda expression variable from item to something else, I was able to use

.Content(@<text>@Html.Partial("Metadata")</text>)

 
which also got rid of the internal error. I then added an id="metaDataContent" to the containing element of the partial and the $.load() call in rowSelect(e) then loaded the partial correctly.

Thanks,
Mike