[CLOSED] how to open partial view with model as parameter from javascript or jquery

  1. #1

    [CLOSED] how to open partial view with model as parameter from javascript or jquery

    Hi,

    I am using ext.net partial view which is form panel with tree panel and another panel having child partial view.

      @(Html.X().FormPanel()
            .ID("frm")
            .TopBar(Html.X().Toolbar().ID("TopBar").BorderSpec("0 1 1 1")
                    .Items(
                            Html.X().Button().ID("imgExportToExcel").Cls("btn export").ToolTip("Export to Excel").Text("Export To Excel"),
                            Html.X().Button().ID("imgPrint").Cls("btn print").ToolTip("Print").Text("Print")
                        )
            )
            .Items(
                    Html.X().Panel().ID("pnlTree").Layout(LayoutType.HBox).Items(
                                 Html.X().Container().Flex(1).Items(Html.X().TreePanel().Cls("tree-panel").BorderSpec("0 1 0 1")
                                    .Height(350)
                                    .Flex(1)
                                    .Store(
                                        Html.X().TreeStore()
                                         .Proxy(
                                                Html.X().AjaxProxy().Url(Url.Action("GetChildren"))
                                            )
                                    )
                                    .Root(
                                        Html.X().Node().NodeID("0").Text("All Notes")
                                    )
                                    .Listeners(l =>
                                        l.ItemClick.Handler = "ShowNoteHistory(record.data.id,record.data.text);"
                                    )),
                                        Html.X().Panel().ID("pnlTpl").Layout(LayoutType.HBox)
                                       .ItemsFromPartial("ViewNotes", Model)
                                        )
                )
             )
    Click image for larger version. 

Name:	NoteHistory_Ext.Net.png 
Views:	15 
Size:	41.8 KB 
ID:	7300

    Please refer image,
    Left side in the image is tree panel and right side is child partial view which contains tpl (XTemplate).
    On click of tree node item, need to populate right side tpl (child partial view) againwith different data.
    How to do that using javascript or jquery?
    To call that partial view from tree node item click , giving $.Ajax call to controller action and fetching list<model> for tpl.But unable to assign or baing that model to child partial view again.
    here is 'Shownotehistory' javascript function -
     var ShowNoteHistory = function (id, text) {
            $("#TplNoteHistory").empty();
            $.ajax({
                url: '@(Url.Action("ShowNoteHistoryByNode","Note"))',
                data: { nodeID: id, NodeText: text },
                datatype: "json",
                type: "GET",
                success: function (data) {    
    //data contains List<model> for tpl (right side partial view)    
    }
    });
    };
    Controller code :-
      public ActionResult ShowNoteHistoryByNode(string nodeID, string NodeText)
            {
                string[] noteDetail = nodeID.Split('_');
                string nodeLevel = noteDetail[0]; 
                string levelDataID = noteDetail[1];
                List<NoteDTO> notes = new List<NoteDTO>();
                int functionalityID = 0;
                switch (Convert.ToInt32(nodeLevel))
                {
                    case 1:
                        functionalityID = 1; 
                        break;
                    case 2:
                        functionalityID = 9;
                        break;
                    default:
                        break;
                }
                notes = coreServiceProxy.ReadAllNote().TheEntity;
                NoteDTO note = new NoteDTO();
                notes = notes.Where(s => s.FunctionalityId == functionalityID && s.FunctionalityDataId != 0).ToList();
    
                //Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
                //pr.ContainerId = "NoteHistoryContainer";
                //pr.ViewName = "ViewNotes";
                //pr.Model = notes;
                //return pr;
    
                return Json(new { success = true, model = notes }, "application/json", Encoding.UTF8, JsonRequestBehavior.AllowGet);
            }
    Last edited by Daniil; Dec 10, 2013 at 11:47 AM. Reason: [CLOSED]
  2. #2
    Hi @alscg,

    Quote Originally Posted by alscg View Post
    But unable to assign or baing that model to child partial view again.
    Do you mean that
    data: { nodeID: id, NodeText: text }
    is not passed to the controller action?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @alscg,



    Do you mean that
    data: { nodeID: id, NodeText: text }
    is not passed to the controller action?
    Thanks for your quick reply.
    No , It is passing to controller. but I have a problem to open or refresh child partial view as per that NodeID and Node Text.
    I am trying to reload or open child partial view from javascript -
    var ShowNoteHistory = function (id, text) {
            $("#TplNoteHistory").empty();
            $.ajax({
                url: '@(Url.Action("ShowNoteHistoryByNode","Note"))',
                data: { nodeID: id, NodeText: text },
                datatype: "json",
                type: "GET",
                success: function (data) {   
    //data contains List<model> for tpl (right side partial view)   
    App.PnlTpl.load(data);
    }
    });
    
    };

    In above javascript success function, I have model in data variable which is filtered by NodeID and NodeText.
    I need to pass that or assign that model to child partial view to refresh it with new data.
    Please suggest me the way for -
    How to pass model to partial view from javascript and reload it?
    or How to reload partial view from controller itself with filtered model / new data as per nodeID and Text selected by user?
  4. #4
    1. A DirectEvent or DirectMethod call to a controller action returing a PartialViewResult.
    http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

    The Model data you can send as parameters.

    or

    2. A container's Loader with AutoLoad="false". Just call a container's reload method when you need to reload the container.
    http://mvc.ext.net/#/Dynamic_Partial...Partial_Items/

Similar Threads

  1. Replies: 1
    Last Post: Jul 30, 2013, 3:36 PM
  2. [CLOSED] Partial View
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jul 16, 2013, 1:16 PM
  3. [CLOSED] Set Button's Direct Event by Javascript (Jquery)
    By mcfromero in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 05, 2012, 3:05 PM
  4. [CLOSED] [2.1] MVC Partial View
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 23, 2012, 12:04 PM
  5. Javascript not work in partial view mvc.ext.net
    By theblackcat_2902 in forum 1.x Help
    Replies: 9
    Last Post: Aug 24, 2011, 10:31 AM

Posting Permissions