How to load a partial view inside Kendo Window on request

问题

I have a kendo window who's data is loaded with an ajax call. This kendo window is acting like a widget editor which allow users to change or manipulate data in order to render different charts etc. Once users have configured all the options they want to preview their chart/graph before being displayed on a page. I have successfully constructed the model window and loaded the initial data with one input (Preview) button but now I don't know how to load the partial view inside the Model window on the Preview button click. I don't know if this approach is right or not but I defiantly need a partial view as I have to construct the model which will be passed to this partial view to render the chart/graph.

    $('.btnedit').click(function () {
        var pwrid = $(this)[0].id;

        $.ajax({
            url: '/Home/EditWidget/' + '?id=' + pwrid,
            type: 'GET',
            accepts: 'text/html',
            context: self,
            success: self.editWidgetWindowCallBack,
            error: function () { alert('Oops! Something went wrong'); },
            complete: function(){ }
        });
    });

editWidgetWindowCallBack: function (html, textStatus, jqXHR) {
    var model = $('#EditWidgetModelWindow').data('kendoWindow');
    model.content(html);
    model.center();
    model.open();
}

EditWidgetModelWindow is my kendo model window

following is my action method

public ActionResult EditWidget(string id)
{
    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);
}

this is how my kendo model window is loading an editor partial view in it and now I want to load another partial view inside this partial view on a button click. e.g. if my partial view name is _Chart and model name is ChartModel, how I can call this partial view from the parent partial view on a button click (on demand) and render it inside the existing partial view with in the Kendo Model Window.

回答1:

I use this approach to load html into kendo window:

1. An MVC Action that returns a PartialViewResult
2. Use the jQuery load method to retrieve the html from point 1
3. Open the kendo window if no error on Ajax call

Your MVC code is this

public ActionResult EditWidget(string id)
{
    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);
}

You define an html markup that holds the kendo window:

@(Html.Kendo().Window()
    .Name("wndWindow")  
    .Content(@<text>
         <div id="wndContent">

    </div>
   </text>)

) )

In you script use jQuery to retrieve the html:

$('.btnedit').click(function () {
   var pwrid = $(this)[0].id;

   $('#wndContent').load('/Home/EditWidget/', {id: prwid}, function (response, status, xhr) {
            if (status == "error"){
                try{
                    var msge = $.parseJSON(response);
                    // get the server error
                } catch(e){
                    alert("Error parsing server response");
                }
            }else{
                $("#wndWindow").data("kendoWindow").open().center();
            });

来源：https://stackoverflow.com/questions/31271680/how-to-load-a-partial-view-inside-kendo-window-on-request