Search code examples
c#jsonasp.net-mvc-2rad-controls

Converting .NET AJAX to MVC/Learning -- Is it possible to achieve this functionality without breaking the MVC paradigm?

I am trying to replicate the following functionality in MVC, I have it working for AJAX:

  • User drag-and-drops an item onto the page.
  • OnDropped a new control is created and attached to the page. The control is of type RadDock and it will be docked to a control of type RadDockZone.

Old Code:

    /// <summary>
    /// Creates the RadDock + Contents when dropping a graph onto the page.
    /// </summary>
    /// <param name="sender"> The RadListBox with an element being dropped from inside it. </param>
    /// <param name="e"> Information about the drop such as target and what is being dropped. </param>
    protected void RadListBox_Dropped(object sender, RadListBoxDroppedEventArgs e)
    {
        CormantRadDockZone dockZone = RadDockLayout1.RegisteredZones.OfType<CormantRadDockZone>().First(registeredDockZone => registeredDockZone.ID == e.HtmlElementID);

        if (!object.Equals(dockZone, null) && !dockZone.Docks.Any())
        {
            RadSlidingPane slidingPane = ((sender as RadListBox).Parent as RadSlidingPane);
            CormantReport report = new CormantReport(int.Parse(e.SourceDragItems[0].Value), e.SourceDragItems[0].Text, slidingPane.Title);
            CormantRadDock dock = new CormantRadDock(report);
            dock.CreateContent();
            dock.Dock(dockZone);
        }
    }

Now, I have been trying to wrap my head around how to do something like this in MVC. What I -think- should happen is that the view should obtain the necessary data, then pass that data back to the controller. The controller would handle creating the RadDock, then toJSON the object and pass the data back to the view. After retrieving that data, I 'BELIEVE' I should be able to recreate the element in some way such that I can append it to the RadDockZone, but without a Telerik.Web.UI.RadDock() constructor...it seems fairly hopeless? Is this possible?

function OnClientDropped(sender, eventArgs) {
//Capture e.HTMLElementID, e.SourceDragItems[0].Value, e.SourceDragItems[0].Text, and slidingPane.Title here

var droppedID = eventArgs.get_htmlElement().id;

if( droppedID.indexOf("RadDockZone") != -1 )
{
    var radDockZone = $find(droppedID);
    //This constructor does not exist!
    var radDock = new Telerik.Web.UI.RadDock();
    radDock.dock(radDockZone);
}
else
{
    alert("Failed to find RadDockZone on dropped target.");
}

var slidingPaneTitle = "";

if (sender.get_id().indexOf("lstBxHistorical") != -1) {
    slidingPaneTitle = "Historical Widgets";
}
else if (sender.get_id().indexOf("lstBxCustom") != -1) {
    slidingPaneTitle = "Custom Widgets";
}
else {
    alert(sender.get_id());
}

$.ajax({
    type: 'POST',
    url: 'ReportDropped',
    dataType: 'json',
    data: {
        //e.HTMLElementID, e.SourceDragItems[0].Value, etc...
    },
    success: function (data) {

        alert("Success");
    },
    errror: function (xhr, ajaxOptions, error) {
        alert("Error");
    }
});

}

Solution

  • I have it working for AJAX:

    i believe you mean aps.net ajax. And you can not use server controls of asp.net with mvc because mvc simply does not have any concept of ViewState on which asp.net server controls heavily rely. if you do want to use such a control you have two options (that i can think of)