Open Telerik Window - asp.net-mvc-3

Question

I hope you can assist me with one dillema. I´m going to write a bunch of code before I ask my question below :)
When something is clicked on my page:
<input type='button' value='1' name='derp1' onclick='OpenTelerikWindow(1)' />
<br/>
<input type='button' value='2' name='derp2' onclick='OpenTelerikWindow(2)' />
I open Telerik Window with Jquery:
function OpenTelerikWindow(arg) {
var url = '/Controller/Derp/';
$.ajax({
type: "GET",
url: url,
dataType: "html",
data: { id: arg }
success: function (data) {
$('#PaymentWindow').data("tWindow").content(data);
$('#PaymentWindow').data("tWindow").center().open().refresh();
}
});
}
My Controller ActionResult:
public ActionResult Derp(int id)
{
SomeModel someModel = _GetModel(id);
return PartialView("Derp", someModel)
}
And then the content of my Telerik Window goes something like this:
#SomeModel
<div id="theDerpina">
<div>
//Some Stuff
#using (Ajax.BeginForm("Derpina1", "Controller", new { id = SomeModel.id }, new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "theDerpina",
InsertionMode = InsertionMode.Replace
}, new { id = "feedback-form" }))
{
//Some Stuff
<button type="submit" > Submit</button>
<br/>
<button type="button" > CloseWindow </button>
}
</div>
<div>
//More Stuff
#using (Ajax.BeginForm("Derpina2", "Controller", new { id = SomeModel.id }, new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "theDerpina",
InsertionMode = InsertionMode.Replace
}, new { id = "feedback-form" }))
{
//Different Stuff
<button type="submit" > Submit</button>
<br/>
<button type="button" > CloseWindow </button>
}
</div>
</div>
My two other Controller Actions:
public ActionResult Derpina1(int id)
{
SomeModel someModel = _GetModel(id);
if(ModelState.IsValid)
{
//DoStuff
return View("SomeOtherView");
}
else
{
return PartialView("Derp", someModel);
}
}
public ActionResult Derpina2(int id)
{
SomeModel someModel = _GetModel(id);
if(ModelState.IsValid)
{
//DoDifferentStuff
return View("SomeOtherView");
}
else
{
return PartialView("Derp", someModel);
}
}
When I open the Window once, everything works fine. However if I were to open the Window, close it, and then open it again then weird things happen. Let´s say for instance that I clicked the submit button for Derpina1, I would receive two calls to that particular Controller action. If I monitor the console in Firebug I see two separate calls to my controller action. Then the same thing would happen if I would close the Window one more time, open it again, and submit again, my controller action would now receive 4 calls to my controller action.
Perhaps you guys can point to the right direction. Should I open the Telerik Window in a different way, also should I use different method to return ModelError were that to happen? (because I´m faced with the same behaviour if I get a ModelError)

Answer 1

I managed to find out the solution after googling a while. All I did was creating a Window on the fly from within the script, and then destroying it after I have used it, like so:
function OpenTelerikWindow(arg) {
var url = '/Controller/Derp/';
$.ajax({
type: "GET",
url: url,
dataType: "html",
data: { id: arg }
success: function (data) {
var paymentWindow = $("<div id='PaymentWindow'></div>").tWindow({
title: "Payment",
contentUrl: '',
html: data,
modal: true,
resizable: false,
draggable: true,
width: 500,
height: 640,
onClose: function (e) {
e.preventDefault();
paymentWindow.data('tWindow').destroy();
}
});
paymentWindow.data('tWindow').center().open();
}
});
}