使用 Ajax 的 Telerik 模态窗口中的 RenderPartial 问题答案

【问题标题】：Issue with RenderPartial in Telerik Modal Window using Ajax使用 Ajax 的 Telerik 模态窗口中的 RenderPartial 问题
【发布时间】：2012-03-08 09:41:50
【问题描述】：

因为我在我的 MVC3 项目中将 Telerik 扩展与我自己的 jQuery 混合组合在一起，所以我的大脑崩溃了。

我希望能够像这样使用 Ajax 调用 ActionResult：

    function showDialog(arg) {
    var url = '/Home/ReserveRent/';
    alert(arg);
    $.ajax({
            type: "GET",
            url: url,
            data: { id: arg },
            dataType: "html",
            success: function(data) { $('#RenderRent').html(data); },
            error: function(data) { alert(url+'  '+arg+'   '+data); }
        });
    var rentPayment = $('#RenderRent').html();
    $('#ModalPay' + arg).html(rentPayment);
    $('#Window' + arg).data('tWindow').center().open();
}

在页面加载时，我创建了多个隐藏的 Telerik Windows，我想用上面的 jQuery 调用它们中的每一个。我的 Razor 页面包含以下两个 Div 标签：

    <div>
@foreach (ShowAvailability availability in Model.ShowAvailabilities)
{
    foreach (var salesLine in availability.SalesLinesForSale)
    {
        SalesLine line = salesLine;
        Html.Telerik().Window()
        .Name("Window"+line.SalesLineID)
        .Title("Submit feedback")
        .Content(@<text>
            @using (Html.BeginForm("PayRent", "Payment", FormMethod.Post, new { id = "feedback-form" }))
            {
                <p class="note">This is <strong>salesLine</strong> @line.SalesLineID.</p>

                <div id='"ModalPay"+@line.SalesLineID'>
                    <!--TODO: Here will rendered Html be copied between Divs-->
                </div>
                <div class="form-actions">
                    <button type="submit" class="t-button t-state-default">Submit feedback!</button>
                </div>
            }
            </text>)
        .Buttons(b => b.Close())
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
    }
}
</div>
<div id="RenderRent" style="display: none;">
    <!-- TODO: Render payment info-->
    @{Html.RenderPartial("ReserveRent");}
</div>

正如您在我的 Ajax 请求中所见，我将在标记为 #RenderRent 的 Div 标记中呈现结果。因此，我想用 Telerik 窗口中的特殊 Div 标签替换该 Div 标签，并且该窗口现在应该包含正确的模型信息。我的控制器动作是这样的：

        public ActionResult ReserveRent(int salesLineId)
    {
        var salesLine = _salesLineLogic.GetSalesLine(salesLineId);

        if (!salesLine.IsAvailable)
        {
            ViewBag.AvailableSalesLine = @"Þessi orlosfeign er því miður ekki lengur til leigu á þessu tímabili.";
            return RedirectToAction("Index", "Home");
        }

        salesLine.IsAvailable = false;
        _salesLineLogic.SaveToDatabase();

        var payment = new Payment { FK_SalesLineID = salesLineId, EditedBy = "PayRent.cshtml (GET)", EditedOn = DateTime.Now };

        return PartialView(new HomeFormViewModel(payment));
    }

由于某种原因，没有从 Ajax 请求中接收到参数，salesLineId 始终为 NULL。谁能发现我在使用 AjaxRequest 时做错了什么，或者 jQuery 函数声明不正确？

【问题讨论】：

你好。我确实看到了我使用 Ajax 请求的方式的错误，我传递给控制器操作的参数的名称有错误的名称，它当然应该是“saleslineId”。
啊，对不起。我没有注意到你的评论。现在问题解决了吗？
谢谢Tx3，是的，问题部分解决了。现在我将正确的数据放入我的“#RenderRent”Div 标记中，但是关于 Telerik 组件还有另一个问题。我希望将 Div 标签复制到 Telerik 对话窗口，但它总是弹出空的。换句话说，我希望 #RenderRent Div 标签替换插入 Telerik 组件的 #'"ModalPay"+@line.SalesLineID' 标签。或许你能帮帮我，这样声明 div id 可以吗？
如果不了解该应用程序，真的很难说。如果你有多个容器，那么至少对我来说，拥有“容器”+索引看起来是合理的

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

【解决方案1】：

您的ajax 呼叫数据不正确。对象文字 (id) 中的属性与控制器操作中的 salesLineId 不匹配。

$.ajax({
    type: "GET",
    url: url,
    data: { salesLineId: arg },
    dataType: "html",
    success: function(data) { $('#RenderRent').html(data); },
    error: function(data) { alert(url+'  '+arg+'   '+data); }
});

更新

这一行也有奇怪的地方

<div id='"ModalPay"+@line.SalesLineID'>

应该是这样的

<div id='ModalPay@(line.SalesLineID)' >

【讨论】：

Thanx Tx3，我评论了你的其他评论:)