Asp.net mvc 3 打开电传窗口_Asp.net Mvc 3_Jquery_Telerik_Asp.net Ajax

Asp.net mvc 3 打开电传窗口

asp.net-mvc-3 jquery telerik

Asp.net mvc 3 打开电传窗口,asp.net-mvc-3,jquery,telerik,asp.net-ajax,Asp.net Mvc 3,Jquery,Telerik,Asp.net Ajax,我希望你能帮我解决一个难题。在我提出下面的问题之前，我将编写一系列代码：）当在我的页面上单击某个内容时： <input type='button' value='1' name='derp1' onclick='OpenTelerikWindow(1)' /> <br/> <input type='button' value='2' name='derp2' onclick='OpenTelerikWindow(2)' /> function OpenTe

我希望你能帮我解决一个难题。在我提出下面的问题之前，我将编写一系列代码：）

当在我的页面上单击某个内容时：

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

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

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

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

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

我的控制器操作结果：

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

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

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

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

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

然后我的Telerik窗口的内容是这样的：

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

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

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

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

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

我打开窗户一次，一切都很好。然而，如果我打开窗户，关上它，然后再打开它，奇怪的事情就会发生。比如说，我点击了Derpina1的submit按钮，我会收到两个对特定控制器操作的调用。如果我在Firebug中监视控制台，我会看到对控制器操作的两个单独调用。如果我再次关闭窗口，再次打开它，然后再次提交，那么同样的事情也会发生。我的控制器操作现在将收到4个对控制器操作的调用

也许你们可以指出正确的方向。我应该以不同的方式打开Telerik窗口吗？如果发生这种情况，我应该使用不同的方法返回ModelError吗？（因为如果我遇到模型错误，我也会面临同样的行为）

我在谷歌搜索了一段时间后找到了解决方案。我所做的只是在脚本中动态创建一个窗口，然后在使用后销毁它，就像这样：

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

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

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

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

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

函数OpenTelerikWindow（arg）{
var url='/Controller/Derp/'；
$.ajax({
键入：“获取”，
url:url，
数据类型：“html”，
数据：{id:arg}
成功：功能（数据）{
var paymentWindow=$（“”）。tWindow({
标题：“付款”，
contentUrl:“”，
html：数据，
莫代尔：是的，
可调整大小：false，
真的，
宽度：500，
身高：640，
onClose：函数（e）{
e、 预防默认值（）；
paymentWindow.data（'tWindow'）.destroy（）；
}
});
paymentWindow.data（'tWindow'）.center（）.open（）；
}
});
}