MVC和Ajax.BeginForm和DIV.Load

Question

I have a partial that defines an Ajax.BeginForm. The model returned has a property for ReportLink created on the server resource that returns a Url to a PartialView.

On the Ajax,BeginForm.OnSuccessFunction I am attempting to return and load html content with $("reportContent").load(AJAXRESULT.RenderLink)

However, I get into an infinite loop somewhere.

Edited to add moving parts:

@model xxxx.Reports.Models.Reports.BaseReportModel
@{Layout = null;}
<div id="reportBase" class="k-content">
<div id="reportControl" >  
@using (Ajax.BeginForm(
          Model.PostAction,          
          Model.PostController,
          null,
          new AjaxOptions() { OnSuccess = "editPostSuccess", OnFailure = "editPostFailure" },
          new { id = "reportBase_frmViewer", name = "reportBase_frmViewer" }))
        {    
            @Html.AntiForgeryToken()            
            @RenderSection("reportParams", required: false)  
            if (@Model.AllowRefresh){
                <input type="button" id="btnRefresh" value="refresh" />
            }
            if (@Model.AllowExportToPDF){
                <input type="button" id="btnPDF" value="PDF" />
            }
            if (@Model.AllowExportToExcel){
                <input type="button" id="btnExcel" value="XLS" />
            }  
            @Html.HiddenFor(p => p.AllowExportToExcel)   
            @Html.HiddenFor(p => p.AllowExportToPDF)
            @Html.HiddenFor(p => p.AllowRefresh)      
            @Html.HiddenFor(p => p.AutoStartReport)   
        }   
    </div>
</div>
<div id="wait"></div>
<div id="reportContent"></div>
//The 
<script type="text/javascript">

    function editPostSuccess(ajaxContext) {
        showWaitIndicator(false);       
        $('#reportContent').load(ajaxContext.RenderLink**,<--This is a link to an asction that calls renderPartial on the controller** function () {
            $("#reportContent").show();
        });
    }

    function editPostFailure(ajaxContext) {
        showWaitIndicator(false);
        var response = JSON.parse(ajaxContext.responseText);
        var errorMessage = response.Message;
        $('#reportContent').html('@Resources.labels.lblServerErrorsOnForm' + " " + errorMessage);
        $("#reportContent").show();
        alert("FAILURE:"+response.Message);
    }

Update: I am no longer sure that browser is locking up. The content is 3.15 MB. I think the raw html is very verbose and takes that long to render in the browser. Here is the execution sequence:

1. LoadPartial(ReportModel) - This has an Ajax.BeginForm() that returns report meta data and has a refresh button. When the refresh button is clicked. I call a js function that loads a div using div.load(ReportModel.RenderLink), which is a url to get the content as html from the controller.

2. The ReportModel.RenderLink points to a controller method that returns an html report based on model params sent to the controller. The result is a PartialView("ReportContentPartial",string) where string is the html fragment.

3. For testing the ReportContentPartial just dumps @Model into a div as @Html.Raw(Model) and this is where the browser locks up. I thought it was in an infinite loop but it is just taking way to long to render the html.

The part I do not understand is when I use @Html.BeginForm and dump the @Html.Raw(HTML) it is pretty quick. I need to somehow use the same mechanism used in that rendering method. The report html is fetched and returned in less than a second. The problem is when I trace out of @Html.Raw(HTML) the browser locks and takes +15 seconds to render the content.

I will keep plugging at it. I am sure there is a more efficient way to go about it and I probably need to think about ways to break up the reports.

Update 2: This seems to be development environment issue. I am launching IE from VS2012 using the run command. I sense that something is up with the asp.net dev server. When I load the same url in chrome, while debugging in vs, it renders in less than a second.

Answer 1

I solved this. It seems there was an issue with browser definition files that shipped with .net 40. I resorted back to a forms based version of the reporting application that used .aspx pages and postbacks to see why it would render fast and the MVC version was so slow. When using IE 10 it would not render and I found the _dsoPostBacks were not working on the forms version. I then found Scott Hanselman's blog on browsers definition files and applied the hotfix on the test server and now the mvc version in ie is rendering at an acceptable rate. It has something to do with recognizing the browser and downgrading js support. I do not know why that fixed my problem but it did :)