我正在尝试在 MVC 中复制以下功能，我让它适用于 AJAX：
- 用户将项目拖放到页面上。
- OnDropped 创建一个新控件并将其附加到页面。该控件是 RadDock 类型的，它将停靠到 RadDockZone 类型的控件。
旧代码：
/// <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);
}
}
现在，我一直在努力思考如何在 MVC 中做这样的事情。我认为应该发生的是视图应该获取必要的数据，然后将该数据传递回控制器。控制器将处理创建 RadDock，然后 toJSON 对象并将数据传递回视图。检索到该数据后，我“相信”我应该能够以某种方式重新创建元素，以便我可以将其附加到 RadDockZone，但没有 Telerik.Web.UI.RadDock() 构造函数......这似乎相当绝望? 这可能吗？
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");
}
});
}