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();
    }
  });
}