打开Telerik窗口

时间:2012-11-19 21:49:17

标签: asp.net-mvc-3 jquery telerik asp.net-ajax

我希望你能帮助我治疗一个dillema。在我问下面的问题之前,我会写一堆代码:)

点击页面上的内容时

<input type='button' value='1' name='derp1' onclick='OpenTelerikWindow(1)' />
<br/>
<input type='button' value='2' name='derp2' onclick='OpenTelerikWindow(2)' />

我用Jquery打开Telerik Window:

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

我的控制器ActionResult:

public ActionResult Derp(int id)
{
    SomeModel someModel = _GetModel(id);
    return PartialView("Derp", someModel)
}

然后我的Telerik Window的内容就像这样:

@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>

我的另外两个控制器操作:

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

当我打开窗口一次时,一切正常。但是,如果我打开窗口,关闭它,然后再打开它,然后发生奇怪的事情。假设我点击了Derpina1的提交按钮,我会收到两次对该特定Controller操作的调用。如果我在Firebug中监视控制台,我会看到对控制器操作的两个单独调用。如果我再次关闭Window,再次打开它,再次提交,我的控制器动作现在会收到4次调用我的控制器动作,那么同样的事情会发生。

也许你们可以指出正确的方向。我应该以不同的方式打开Telerik窗口,我也应该使用不同的方法返回ModelError会发生什么? (因为如果我得到ModelError,我会遇到相同的行为)

1 个答案:

答案 0 :(得分:0)

在谷歌搜索一段时间后,我设法找到了解决方案。我所做的就是从脚本中动态创建一个Window,然后在我使用它之后将其销毁,如下所示:

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