I'm trying to create a one page app and in order to do that I started using partial views.  I got my diagram working on a normal view, but can't get the partial view to show the diagram (same code was copied to the partial view).  Is there any special tricks that I should know about?  Here is my code:

public ActionResult _ProcessTasks(int? id)
        {
            ViewBag.ID = id;
            id = (id == 0 ? null : id);

            IEnumerable<ProcessFlowViewModel> flows = _processFlowRepository.GetChildrenFlows(id).ConvertToProcessFlowViewList();
            IEnumerable<ProcessTaskViewModel> tasks = _processTaskRepository.GetChildrenTasks(id).ConvertToProcessTaskViewList();

            string viewName = "diagramView";
            string overviewName = "overView";
            string nodelistName = "nodeList";

            ViewBag.DiagramView = SetupDiagram(viewName, tasks, flows);
            ViewBag.Overview = SetupOverview(overviewName, viewName);
            ViewBag.NodeListView = SetupNodeList(nodelistName);
            ViewBag.Tasks = new JavaScriptSerializer().Serialize(tasks);
            ViewBag.Flows = new JavaScriptSerializer().Serialize(flows);

            return PartialView();
        } 

Partial view:

@using LinearGradientBrush = MindFusion.Drawing.LinearGradientBrush;

@Html.Hidden("ID", (int?)ViewBag.ID)

    <input type="hidden" id="diagramData" data-nodes="@ViewBag.Tasks" data-links="@ViewBag.Flows" />

    <div class="editbar">
        <input id="edit" type="submit" value="Edit"/>
        <input id="endEdit" type="submit" value="End edit"/>
    </div>

    <div style="width:700px;height:700px; border:1px solid black;">
        @Html.DiagramView((DiagramView)ViewBag.DiagramView)
    </div>

    <div style="width:200px; height:200px; position:relative; top:-702px; left:710px; border:1px solid black;">
        @Html.Overview((Overview)ViewBag.Overview)
    </div>

    <div style="width:200px; height:498px; position:relative; border:1px solid black; top:-702px; left:710px;" >
        @Html.NodeListView((NodeListView)ViewBag.NodeListView)
    </div>
 

DiagramView, Overview and NodeListView has values at the end of the action code.  Could someone please help?  Thanks

Thanks Stoyan, but it doesn't seem to make a difference.  I already had this in my _layout.cshtml page:

<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MindFusion.Diagramming.js")" type="text/javascript"></script> 

What else could I be doing wrong?

Hi,

       It is also not working from our side. We have properly included Script references to Microsoft Ajax and MindFusion script files.

       What we suspect is in partial view, there is no $(document).ready(function{}()); or body onload and the script required to draw the diagram is not getting executed. Maybe we are wrong. Could you please advise us?

Dear Stoyo,

The flow to render partial view is a bit different from our side. We are using Ajax calls to Controller action method, which returns a partial view. That partial view (as HTML) is received at the Jquery side and appended to a DIV container.

We have modified the sample project you provided to demonstrate our case. Please take a look and thanks a lot in advance for all the help!

Link to download the project: https://dl.dropboxusercontent.com/u/183597933/AnchorPoints_Ajax.zip

Warm Regards,

Chris

Hi Stotyo,

Thank you very much for the suggestion. It works well.

We are having another issue. That eval(code) always fails whenever we run it for second time. For example, after one ajax call, we draw the diagram. The user clicks on a menu, hence issues another ajax call. The backend side is all OK, returning a proper diagram object. It's all fine until it reaches that eval(code) portion. Once eval(code) is run, it throws the following error:

Unhandled exception at line 1, column 128012 in eval code

0x800a138f - JavaScript runtime error: Unable to get property 'origin' of undefined or null reference

Part of the code snippet here:
this.inplaceTextBox.value=C;this.inplaceTextBox.onkeyup=this.onInplaceKeyUp;this
.inplaceTextBox.style.position="absolute";this.inplaceTextBox.style.zIndex=2;thi
s.setInplaceEditBounds(w);this.inplaceTextBox.style.border="1px solid #5C87B2";document.body.appendChild(this.inplaceTextBox);var B=this;setTimeout(function(){return B.focusInput.apply(B)},100);this.nowEditing=true},inplaceKeyUp:function(v){if(v.
keyCode==27){this.endEdit(false)}},setInplaceEditBounds:function(w){var v=b.Utils.getBounds(this.get_element());this.inplaceEditBounds=new f(v.x-(this.scroller?this.scroller.scrollLeft:0)+this.scale*this.bounds.x+this.s
cale*w.x,v.y-(this.scroller?this.scroller.scrollTop:0)+this.scale*this.bounds.y+
this.scale*w.y,this.scale*w.width,this.scale*w.height);this.inplaceTextBox.style
.left=this.inplaceEditBounds.x+"px";this.inplaceTextBox.style.top=this.inplaceEd
itBounds.y+"px";this.inplaceTextBox.style.width=this.inplaceEditBounds.width+"px
";this.inplaceTextBox.style.height=this.inplaceEditBounds.height+"px"},focusInpu
t:function(){this.inplaceTextBox.focus()},endEdit:function(w){if(!this.nowEditin
g){return}var v=this.inplaceObject.getTextToEdit();var z=this.inplaceTextBox.value;this.inplaceTextBox.style.visibility="hidden";docume
nt.body.removeChild(this.inplaceTextBox);this.inplaceTextBox=null;var A=this.inplaceObject;this.inplaceObject=null;this.nowEditing=false;if(w){A.setEd
itedText(z);if(b.DiagramNode.isInstanceOfType(A)){this.raiseEvent(b.Events.nodeT
extEdited,new b.NodeEventArgs({node:A,oldText:v,newText:z}))}else{if(b.DiagramLink.isInstanceO
fType(A)){this.raiseEvent(b.Events.linkTextEdited,new b.LinkEventArgs({link:A,oldText:v,newText:z}))}}}},onResize:function(){if(!this.
nowEditing){return}var v=this.clientToDoc(this.lastCursorPos);var z=this.inplaceObject.getTextToEdit();var w=this.inplaceObject.getEditRect(v);this.setInplaceEditBounds(w)},clearAll:funct
ion(){this.selection.clear();for(var w=0,v=this.items.length;w<v;w++){var z=this.items[0];Array.remove(this.items,z);this.onItemRemoved(z)}this.nodes=[];this.links=[]},addItem:function(v){if(Array.contains(this.items,v)){return}if(b.DiagramNode.i
sInstanceOfType(v)){this.nodes.push(v);v.updateAnchorVisibility4()}else{

//here is the problematic part
if(!Array.contains(this.items,v.origin)&&(v.origin==null||!b.DummyNode.isInstanc
eOfType(v.origin)))

{return}if(!Array.contains(this.items,v.destination)&&(v.destination==null||!b.D
ummyNode.isInstanceOfType(v.destination))){return}this.links.push(v);v.updateNod
eCollections()}if(v.getZIndex()===undefined){v.setZIndex(this.items.length)}Arra
y.add(this.items,v);this.onItemAdded(v)},removeItem:function(v){if(!v){return}th
is.selection.removeItem(v);this.removeFromCollection(v);this.removeFromZOrder(v)
;if(b.DiagramNode.isInstanceOfType(v)){v.deleteLinks();v.detach();if(v.obstacle)
{this.routeLinksAt([v.getBounds()])}}else{v.destinationConnection.removeLinkFromNode();v.originConnection.removeLi
nkFromNode()}v.onRemove()},removeFromCollection:function(v){if(b.DiagramNode.isI
nstanceOfType(v)){Array.remove(this.nodes,v)}else{Array.remove(this.links,v)}},r
emoveFromZOrder:function(v){Array.remove(this.items,v);this.onItemRemoved(v)},de
leteItem:function(v){if(v!=null&&this.raiseDeleting(v)){this.removeItem(v)}},del
eteSelection:function(){var A=this.selection.links;for(var w=0,v=A.length;w<v;w++)

Hi Stoyo,

Below are the methods in order:

Firstly,
  eval code, eval code(8), line 1
Secondly,
  fromJson, eval code (1), line 1 (code snippet **)
Then
  addItem, eval code (1), line 1 (code snippet ***)

---

**
                var v=[];
                if(E.items instanceof Object){
                    for(var z in E.items){
                        if(E.items[z]){
                            if(E.items[z].type.indexOf("Node")>-1){
                                var D=this.loadItem(E.items[z],v);
                                v[E.items[z].instanceId]=D;
                                this.addItem(D);
                                if(E.items[z].selected){
                                    this.selection.addItem(D)
                                }
                               
                            }
                           
                        }
                        
                    }

---

***
        ,addItem:function(v){
            if(Array.contains(this.items,v)){
                return
            }
            if(b.DiagramNode.isInstanceOfType(v)){
                this.nodes.push(v);
                v.updateAnchorVisibility4()
            }
            else{
                if(!Array.contains(this.items,v.origin)&&(v.origin==null||!b.DummyNode.isInstanc
eOfType(v.origin))){
                    return
                }
                if(!Array.contains(this.items,v.destination)&&(v.destination==null||!b.DummyNode
.isInstanceOfType(v.destination))){
                    return
                }
                this.links.push(v);
                v.updateNodeCollections()
            }
            if(v.getZIndex()===undefined){
                v.setZIndex(this.items.length)
            }
            Array.add(this.items,v);
            this.onItemAdded(v)
        }

Hi Stoyo,

Please use the project from the download link. We were able to replicate the exact issue. When we generate the diagram for the first time, it's fine. The second time always gives us error.

Download link:
https://dl.dropboxusercontent.com/u/183597933/MindFusionPartialTest.zip

We will really be grateful if you can provide us a solution soon since our side is rushing for a tight deadline this time. We have purchased MindFusion ASP.Net MVC version last week. Thanks for all the help since from the start.

On the personal messages page (linked at top of the forum) you can find an updated version that adds support for partial rendering. The DiagramView, Overview and NodeListView Html helpers now have overloads that let you generate separate initialization functions instead of registering page_load code. E.g. you can create an initDiagram() function like this:

<td>@Html.DiagramView(((DiagramView)ViewBag.DiagramView).SetWidth(600).SetHeight(600), "initDiagram")</td> 

and then replace the eval code in success handler with a call to initDiagram:

initDiagram();

//var codeStart = result.indexOf('var c = document.createElement');
//var codeEnd = result.indexOf('});');
//var code = result.substring(codeStart, codeEnd);
//eval(code); 

I hope that helps,
Stoyan