public static jQuery CreatePanel()
{
return(new jQuery("<div>")
.AddClass("panel panel-default")
.Append(BootstrapApp.CreatePanelHeader())
.Append(BootstrapApp.CreatePanelBody())
.Append(BootstrapApp.CreatePanelFooter()));
}
public static jQuery CreatePanelBody()
{
return(new jQuery("<div>")
.AddClass("panel-body collapse in")
.Append(BootstrapApp.CreateFormField("Name", "user"))
.Append(BootstrapApp.CreateFormField("Email", "globe"))
.Append(BootstrapApp.CreateFormField("Message", "pencil"))
.Append(BootstrapApp.CreateDateTimeField()));
}
public static jQuery CreatePanelFooter()
{
return(new jQuery("<div>")
.AddClass("panel-footer text-right")
.Append(BootstrapApp.CreateProcessButton())
.Append(
new jQuery(new ButtonElement
{
ClassName = "btn btn-primary",
InnerHTML = "Collapse",
Style =
{
MarginRight = "10px"
}
})
.On("click", (Action <jQueryEvent>) delegate(jQueryEvent e)
{
jQuery.Select(".panel-body").CollapseToggle();
jQuery.This.Text(jQuery.This.Text() == "Collapse" ? "Expand" : "Collapse");
e.PreventDefault();
})
)
.Append(
new jQuery(new ButtonElement
{
ClassName = "btn btn-primary",
InnerHTML = "Toggle Tooltips and Popovers",
Style =
{
MarginRight = "10px"
}
})
.On("click", (Action <jQueryEvent>) delegate(jQueryEvent e)
{
jQuery.Select("[rel=\"popover\"]").PopoverToggle();
jQuery.Select("[rel=\"tooltip\"]").Tooltip(PopupOperation.Toggle);
e.PreventDefault();
})
)
.Append(
new jQuery(new InputElement
{
Type = InputType.Submit,
Value = "Submit",
ClassName = "btn btn-success",
FormAction = Config.SUBMIT_URL,
FormMethod = "POST"
})
.Attr("rel", "tooltip")
));
}
public static void Main()
{
Document.Body.Style.Padding = "20px";
new jQuery("<form>")
.AddClass("col-md-6")
.Append(BootstrapApp.CreatePanel())
.AppendTo(Document.Body);
UpdateButton_Click(null);
ListenToBootstrapEvents();
}
public static jQuery CreateProcessButton()
{
return(new jQuery(new ButtonElement
{
ClassName = "btn btn-primary",
InnerHTML = "Async Process",
Style =
{
MarginRight = "10px"
}
})
.On(EventType.Click, (Action <jQueryEvent>) async delegate(jQueryEvent e)
{
e.PreventDefault();
BootstrapApp.CreateModalWithProgressBar()
.AppendTo(Document.Body)
.Modal(new ModalOptions {
Backdrop = "static"
});
var i = 0;
var title = jQuery.Select(".modal-title");
var intervalId = Window.SetInterval((Action) delegate
{
var percent = (i++ % 20) * 10;
jQuery.Select(".progress-bar")
.Attr("aria-valuenow", percent)
.Attr("style", "width:" + percent + "%;");
title.Html("Long running process: " + percent + "% complete");
}, 490);
var result = await Task.FromPromise <string>(jQuery.Ajax(new AjaxOptions
{
Url = Config.LONG_RUNNING_PROCESS,
Cache = false
}),
(Func <string>)(() => { return Script.Arguments[0].ToString(); }));
var msg = JSON.Parse <string>(result);
if (msg == "ok")
{
Window.ClearInterval(intervalId);
jQuery.Select(".progress-bar")
.Attr("aria-valuenow", 100)
.Attr("style", "width: 100%;")
.Html("Done");
jQuery.Select(".modal-title")
.Html("Success!");
await Task.Delay(2000);
var modal = jQuery.Select(".modal")
.On(ModalEvent.Hidden, (Action) delegate
{
jQuery.This.Remove();
})
.ModalHide();
}
}));
}