mvc 视图插入错误的“DOM”telerik 窗口答案

【问题标题】：mvc view insert into wrong "DOM" telerik windowmvc 视图插入错误的“DOM”telerik 窗口
【发布时间】：2012-02-06 00:37:11
【问题描述】：

如果这成为一个很长的问题，请提前道歉......

背景信息

我有一个使用 Telerik 组件的 MVC 3 应用程序，这个特定问题是（我认为）Window() 组件所特有的。

在我的主视图 (Index.cshtml) 中，我执行了一个 ajax 请求以返回一个部分视图，这是我用来填充窗口内容的内容。这是正在执行请求的 jquery：

var url = '@Url.Action("GetAddPart", "Jobs")';            
var window = $("#Window").data("tWindow");
var data = $("#indexForm").serialize();
window.ajaxRequest(url, data);
window.center().open();

控制器动作是：

[HttpGet]
public ActionResult GetAddPart(MDTCompletedJobM model)
{
    // show the AddPart window

    //TryUpdateModel<MDTCompletedJobM>(model);
    model.ActionTakenList = ActionTakenList;
    model.ProblemTypes = ActualProblemList;
    var addPartM = new MDTAddPartM() { CompletedJobM = model };
    return PartialView(string.Concat(ViewDefaultUrl, "AddPart.cshtml"), addPartM);
}

这会打开我的窗口。

在我的部分视图中，我有一个包含两个或三个字段和一个“添加”、“取消”按钮的表单。为简洁起见，我将只展示我认为的部分视图的相关部分，但我如果需要，可以生成整个视图：

<div id="resultDiv">
    @using (Html.BeginForm("AddPart", "Jobs", FormMethod.Post, new { id = "addPartForm", name = "addPartForm" }))
    { 

             ** layout components removed from here **

        <input type="button" value="Add" class="t-button" id="btnAdd"/>
        <input type="button" value="Cancel" class="t-button" id="btnCancel"/>

        <p />
        <div id="progressdiv">
        </div>

    }    
</div>

是局部视图中的“顶级”标签。

我处理取消按钮的 jquery 是：

$("#btnCancel").click(function () {
    var window = $("#Window").data("tWindow");
    window.close();
});

在我的主视图中，我有一个提交按钮，该按钮在完成后有效地将主视图重新“禁用”或显示错误。此提交按钮的操作返回主视图：

Controller's action snippet:
            if (ViewData["DoPayJobWarningStr"] == null)
                return RedirectToAction("GetAutoDispatchJob", new { autoDispatchJob = model.JobReferenceNumber});
            else
                return View(string.Concat(ViewDefaultUrl, "Index.cshtml"), tmpModel);

我的实际问题

对于我正在使用的特定示例，我希望 ViewData["DoPayJobWarningStr"] 不为空，返回 View(...) 将被执行。

如果我在不打开窗口的情况下执行此操作（对于提交按钮），我的视图将正确返回并且页面会更新以显示警告消息。但是，如果我先打开窗口然后执行提交按钮，则视图不会在页面上更新，但似乎已放入窗口的 html 中。即，如果我点击提交按钮（没有任何反应），然后单击打开 Telerik 窗口的按钮，我会简要地看到提交操作返回的视图在它更新为部分视图应包含的内容之前显示。我完全不明白返回的视图是如何或为什么被放置在那里的？

我尝试过的事情：

注释掉 ajax 请求 (window.ajaxRequest(url, data);) 可以解决问题（尽管我显然有一个空白的局部视图要查看）。
不使局部视图成为“表单”不起作用
无论我如何“关闭”窗口，视图仍然放置在其中。例如点击右上角的 x
使用 Firebug，点击提交按钮后的 HTML 不会更新。

我也尝试过（结果相同），而不是使用“window.ajaxRequest(url, data)”：

$.ajax({
    type: "GET",
    cache: false,
    url: url,
    data: $("#indexForm").serialize(),
    success: function (data) {
        var window = $("#Window").data("tWindow");
        window.content(data);
        window.center().open();
        $("#progress").html('')
    },
    error: function (e) {
        alert(e.Message);
    }
});

是否有可能确定我做错了什么？是ajax请求吗？只是假设因为删除它可以解决问题，但可能还有更多。

谢谢，当然如果您需要更多信息，请询问:)

谢谢

编辑

根据 3nigma 的建议，这就是我更新的内容（仍然没有运气）...

Telerik 窗口定义：

@{Html.Telerik().Window()
    .Name("Window")
    .Title("Add Part")
    .Draggable(true)
    .Modal(true)
    .Width(400)
    .Visible(false)
    .Height(270)
    .ClientEvents(e => e.OnOpen("onWindowOpen"))
    .Render();
}

jquery 函数，它是一个按钮的 OnClick 事件：

function AddBtnClicked() {
    $("#Window").data('tWindow').center().open();
}

onWindowOpen 事件：

function onWindowOpen(e) {
    //e.preventDefault();

    var data = @Html.Raw(Json.Encode(Model));
    var d2 = $.toJSON(data);

    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetAddPart", "Jobs")',
        data: d2,
        contentType: 'application/json',
        success: function (data) {
            var window = $("#Window").data("tWindow");
            window.content(data);
            $("#progress").html('');
        },
        error: function (xhtr, e, e2) {
            alert(e +'\n' + xhtr.responseText);
        }
    });
};

【问题讨论】：

标签： asp.net-mvc-3 razor telerik

【解决方案1】：

好的。

问题与部分视图中的这一行有关：

<script src="@Url.Content("~/Scripts/ValidationJScript.js")" type="text/javascript"></script>

只要我把它拿出来，它就可以了。不知道为什么会导致问题 - 我认为它之前没有加载过，但可能是它导致了问题。

感谢 3nigma 的想法！

【讨论】：