MVC将部分视图附加到现有的kendo弹出窗口

时间:2014-10-17 16:32:35

标签: javascript jquery asp.net-mvc kendo-ui-mvc kendo-window

我创建了一个kendo弹出窗口,用于从内容中的控制器加载下拉选项。我还添加了一个更改事件,它获取所选索引的id并将其传递给控制器​​,并返回一个部分视图,其中的文本框可能会根据选择进行更改,因此文本框的创建需要是动态的。 我尝试添加Html.Partial(_myPartialView),但结果不呈现。我究竟做错了什么?

@(Html.Kendo().Window()
  .Name("userSetupWindow")
  .AppendTo("#useAcct")
  .Width(600)
  .Height(600)
  .Scrollable(false)
  .Modal(true)
  .Title("New Setup")
  .Actions(actions => actions.Refresh().Close())
  .Draggable()
  .Content("<section id='CreateLink' class = 'saveNewDialog-screen'>" +
           "<div class='saveNewLinkDialog'  style='border: none;' >" +
           "<div style='border: none;'>" +
        "<table>" +
               "<tr style='height: 30px;'>" +
                 "<td style='width: 30%; vertical-align: top;'>" +
                  "<div id='divAccounts' class ='createNew'> " +
                  "<label id='lbList' for='createNew' class='CreateNew-Label'>Select New</label>&nbsp;" +
                   Html.Kendo().DropDownList()
                  .Name("userList")
                  .DataSource(source => source.Read(read => read.Action("GetUsers", "UserAcctMgmt")
                  .Data("getSelectedId")
                  .Type(HttpVerbs.Post)))
                  .DataTextField("UserName")
                  .DataValueField("Id")
                  .Value("Id")
                  .SelectedIndex(0)
                  .Events(events => events.DataBound("onDropDownDataBound"))
                  .Events(events => events.Change("onSelect")) +
                  "</div>" +
                  "</td>" +
                  "</tr>" +
                  "<tr style='height: 30px;'>" +
                  "<td>&nbsp;</td>" +
                  "<td>" +
                  "<div id='divButtons' class='createNew-buttonContainer'>" +
                        "<button id='createNewLink-cancel' class='k-button saveNewButtons' >Cancel</button>&nbsp;" +
                        "<button id='createNewLink-save' class='k-button saveNewButtons'>Save</button>" +
                  "</div>" +
                  "</td>" +
                  "</tr>" +
                  "<tr style='height: 80px;>" +
                  "<td>" +
                  "<div id='div-textboxes'>" +
                Html.Partial(_dynamicPartialView)
                  "</div>" +
                  "</td>" +
                  "</tr>" +
          "</table>" +
                "</div>" +
                "</div>" +
                "</section>'"
  ).Events(events => events.Close("onPopupClose"))

在控制器中:

 [HttpPost]
    public ActionResult GetUserFields(string Id)
    {
        if (!string.IsNullOrWhiteSpace(Id))
        {
            var fields = GetuserFields(int.Parse(Id));

            var model = new FieldModel
            {
                Fields = fields 
            };

            return PartialView("_dynamicPartialView", model);
        }

        return null;
}

Jquery有效,它将我带到局部视图

    function onSelect(e) {
        e.preventDefault();
        var selectedId = this.dataItem(e.item).id;

        $.ajax({
            url: "@Url.Action("GetUserFields", "UserModel")",
            type: 'POST',
            cache: false,
            data: JSON.stringify({ Id: selectedId }),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
    }

这是局部视图(_dynamicPartialView)

@model Models.UserFieldModel
@using Kendo.Mvc.UI

@if (Model != null)
{
foreach (var item in Model.UserFields)
{
<p>@item.FieldName</p>

if (item.FieldType.ToString().ToUpper() == "TEXTBOX")
{
    if (item.IsCaseSensitiveField)
    {
        @(Html.Kendo().TextBox()
                .Name("caseSensitive")
        )
     }
    else
    {
        @(Html.Kendo().TextBox()
                .Name("textInput")
        )
    }
   }
 }
}

1 个答案:

答案 0 :(得分:0)

我还没有实现你的代码,所以这只是解释你所拥有的东西。看起来您没有对来自调用的响应做任何事情来获取局部视图。在你的javascript onSelect方法中,调用成功时没有任何事情发生。这意味着您正在控制器上调用GetUserFields操作,并且它返回渲染的局部视图,但是您使用javascript onSelect方法实际上忽略了结果。

您可能需要在ajax调用的成功部分添加一些逻辑。

function onSelect(e) {
    e.preventDefault();
    var selectedId = this.dataItem(e.item).id;

    $.ajax({
        url: "@Url.Action("GetUserFields", "UserModel")",
        type: 'POST',
        cache: false,
        data: JSON.stringify({ Id: selectedId }),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
        success: function(){
            // attach the response to the existing DOM
        }
    });
}