How to save view script to js file

  1. #1

    How to save view script to js file

    Hi all,
    I want to save views (as Ext.Net.PartialViewResult returns) script into js file as a function and call that function instead of request from server for showing that view.
    i.e on mvc example "Ajax_Linked_Combos" page http://mvc.ext.net/#/Form_ComboBox/Ajax_Linked_Combos/
    when you click "Source Code" button, a request post to http://mvc.ext.net/Source/GetSourceTabs and get this as response

    {script:"Ext.net.ResourceMgr.destroyCmp(\"App.tpwe1086434434\");App.we1086434434.add({id:\"tpwe1086434434\",border:false,xtype:\"tabpanel\",items:[{id:\"tptwe10864344340\",loader:{loadMask:{showMask:true},paramsFn:function(){ return {\"file\":\"/Areas/Form_ComboBox/Views/Ajax_Linked_Combos/Index.cshtml\"}; },renderer:\"frame\",url:\"/Source/GetSourceFile\"},title:\"Index.cshtml\",iconCls:\"#PageWhiteCode\"},{id:\"tptwe10864344341\",loader:{loadMask:{showMask:true},paramsFn:function(){ return {\"file\":\"/Areas/Form_ComboBox/Controllers/Ajax_Linked_CombosController.cs\"}; },renderer:\"frame\",url:\"/Source/GetSourceFile\"},title:\"Ajax_Linked_CombosController.cs\",iconCls:\"#PageWhiteCsharp\"},{id:\"tptwe10864344342\",loader:{loadMask:{showMask:true},paramsFn:function(){ return {\"file\":\"/Areas/Form_ComboBox/Models/Ajax_Linked_CombosModel.cs\"}; },renderer:\"frame\",url:\"/Source/GetSourceFile\"},title:\"Ajax_Linked_CombosModel.cs\",iconCls:\"#PageWhiteCsharp\"}],activeTab:0});"}
    i want to save this as a js function in a file, if possible after build

    function getSourceTabs() {
    Ext.net.ResourceMgr.destroyCmp("App.tpwe1086434434");App.we1086434434.add({id:"tpwe1086434434",border:false,xtype:"tabpanel",items:[{id:"tptwe10864344340",loader:{loadMask:{showMask:true},paramsFn:function(){ return {"file":"/Areas/Form_ComboBox/Views/Ajax_Linked_Combos/Index.cshtml"}; },renderer:"frame",url:"/Source/GetSourceFile"},title:"Index.cshtml",iconCls:"#PageWhiteCode"},{id:"tptwe10864344341",loader:{loadMask:{showMask:true},paramsFn:function(){ return {"file":"/Areas/Form_ComboBox/Controllers/Ajax_Linked_CombosController.cs"}; },renderer:"frame",url:"/Source/GetSourceFile"},title:"Ajax_Linked_CombosController.cs",iconCls:"#PageWhiteCsharp"},{id:"tptwe10864344342",loader:{loadMask:{showMask:true},paramsFn:function(){ return {"file":"/Areas/Form_ComboBox/Models/Ajax_Linked_CombosModel.cs"}; },renderer:"frame",url:"/Source/GetSourceFile"},title:"Ajax_Linked_CombosModel.cs",iconCls:"#PageWhiteCsharp"}],activeTab:0});
    }
    and not request to server to get this view, but just call this function.

    i found ComponentLoader.ToConfig(AbstractComponent component, bool registerResources) method and i thought something like
    public class ViewsJs
    {
      public static string test()
     {
       var win=
         X.Window().Title("Test")
           .Items(
                     X.Panel()
                       .Items(
                                 X.TextField()
                       )
          ).ToCOmponent();
       var result=ComponentLoader.ToConfig(win,true);
       return result;
     }
    }
    and use this function to get script, but it returns "x.res" etc as result. how can i get script like PartilaViewResult returns, if possible after build.
  2. #2
    just for example, suppose that i have action methods and views like this,

    public class TestController : Controller
    {
      public ActionResult Test1()
      {
          var pvr = new Ext.Net.MVC.PartialViewResult("pnlContent")
          {
              WrapByScriptTag = false,
              ClearContainer = true,
              RenderMode = RenderMode.AddTo,
              ViewName="Test1"
          };
          return pvr;
      }    
     
      public ActionResult Test2()
      {
          var pvr = new Ext.Net.MVC.PartialViewResult("pnlContent")
          {
              WrapByScriptTag = false,
              ClearContainer = true,
              RenderMode = RenderMode.AddTo,
              ViewName = "Test2"
          };
          return pvr;
      }
    }
    Test1.cshtml
    @{
        var X = Html.X();
    }
    @(
      X.Panel().Title("Test1").Layout(LayoutType.Column).Width(500).Height(400)
       .Items(
             X.FormPanel().ColumnWidth(0.5)
              .Items(
                    X.Hidden().DataIndex("Id"),
                    X.NumberField().DataIndex("PersNo"),
                    X.TextField().DataIndex("PersName")
              ),
            X.Container().ColumnWidth(0.3)
             .Items(
                    X.Image().ImageUrl("images/default.png")
             )
       )
    )
    Test2.cshtml

    @{
        var X = Html.X();
    }
    @(
      X.Panel().Title("Test2").Width(500).Height(400)
       .Items(
              X.DisplayField().FieldLabel("Name").DataIndex("PersName"),
              X.Image().ImageUrl("images/default.png")
       )
    )
    /Test/Test1 action method returns
    {script:"Ext.ComponentManager.onAvailable(\"pnlContent\",function(){Ext.net.addTo(\"pnlContent\", [{height:400,width:500,xtype:\"panel\",items:[{xtype:\"form\",columnWidth:0.5,items:[{id:\"iddff7a6d82c16e9af\",xtype:\"hiddenfield\",dataIndex:\"Id\"},{id:\"ida3f54ceb7010e9af\",xtype:\"numberfield\",dataIndex:\"PersNo\",decimalSeparator:\",\"},{id:\"idb27d966ed43081af\",xtype:\"textfield\",dataIndex:\"PersName\"}],url:unescape(\"%2fTest%2fTest1%3f_dc%3d1452896455694\"),waitMsgTarget:\"\"},{xtype:\"container\",columnWidth:0.3,items:[{xtype:\"netimage\",imageUrl:\"images/default.png\"}]}],layout:\"column\",title:\"Test1\"}], true);});"}
    and /Test/Test2 action method returns
    {script:"Ext.ComponentManager.onAvailable(\"pnlContent\",function(){Ext.net.addTo(\"pnlContent\", [{height:400,width:500,xtype:\"panel\",items:[{id:\"id92d982347d844f9d\",xtype:\"displayfield\",fieldLabel:\"Name\",dataIndex:\"PersName\"},{xtype:\"netimage\",imageUrl:\"images/default.png\"}],title:\"Test2\"}], true);});"}
    i want to get this scripts and save as js functions like
    function test1(){
    Ext.ComponentManager.onAvailable("pnlContent",
    	function(){
    		Ext.net.addTo("pnlContent", [
    			{
    				height:400,width:500,xtype:"panel",
    				items:[
    					{
    						xtype:"form",columnWidth:0.5,
    						items:[
    							{id:"iddff7a6d82c16e9af",xtype:"hiddenfield",dataIndex:"Id"},
    							{id:"ida3f54ceb7010e9af",xtype:"numberfield",dataIndex:"PersNo",decimalSeparator:","},
    							{id:"idb27d966ed43081af",xtype:"textfield",dataIndex:"PersName"}
    						],
    						url:unescape("%2fTest%2fTest1%3f_dc%3d1452896455694"),waitMsgTarget:""
    					},
    					{
    						xtype:"container",columnWidth:0.3,
    						items:[
    							{xtype:"netimage",imageUrl:"images/default.png"}
    						]
    					}
    				],
    				layout:"column",title:"Test1"
    			}
    		], 
    		true
    		);
    	}
    );
    }
    
    function test2(){
    Ext.ComponentManager.onAvailable("pnlContent",
    	function(){
    		Ext.net.addTo("pnlContent", [
    			{
    				height:400,width:500,xtype:"panel",
    				items:[
    					{
    						id:"id92d982347d844f9d",xtype:"displayfield",fieldLabel:"Name",dataIndex:"PersName"
    					},
    					{
    						xtype:"netimage",imageUrl:"images/default.png"
    					}
    				],
    				title:"Test2"
    			}
    		], 
    		true);
    	}
    );
    }
    how can i achieve this?
  3. #3
    I found HtmlHelper extension method ExtPartial but it doesnt have a parameter for clearContainer

    public static IHtmlString ExtPartial(this HtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData = null, object model = null, TempDataDictionary tempData = null, IDMode idMode = 2, string controlId = null, string containerId = null, int index = 0, string ns = null, RenderMode mode = 1, bool wrapByScriptTag = true, bool singleControl = false, bool items = false, string controlToRender = null, Container.Config containerConfig = null)
    and it returns an unnecessary div string for partial view which has window in it.

    firstly i add this extension method which i found here
    public static class Extensions
    {
        public static HtmlHelper GetHtmlHelper(this Controller controller)
        {
            var viewContext = new ViewContext(controller.ControllerContext, new FakeView(), controller.ViewData, controller.TempData, TextWriter.Null);
            return new HtmlHelper(viewContext, new ViewPage());
        }
    
        public class FakeView : IView
        {
            public void Render(ViewContext viewContext, TextWriter writer)
            {
                throw new InvalidOperationException();
            }
        }
    }
    and add some test actions and views

    
    public ActionResult Test1()
    {
        var pvr = new Ext.Net.MVC.PartialViewResult("pnlContent")
        {
            WrapByScriptTag = false,
            ClearContainer = true,
            RenderMode = RenderMode.AddTo,
            ViewName = "Test1"
        };
        return pvr;
    }
    
    public ActionResult Test2()
    {
        var pvr = new Ext.Net.MVC.PartialViewResult("pnlContent")
        {
            WrapByScriptTag = false,
            ClearContainer = true,
            RenderMode = RenderMode.AddTo,
            ViewName = "Test2"
        };
        return pvr;
    }
    
    public ActionResult Test3()
    {
        var pvr = new Ext.Net.MVC.PartialViewResult()
        {
            WrapByScriptTag = false,
            ViewName = "Test3"
        };
        return pvr;
    }
    
    public ActionResult Test()
    {
        var pvr = new Ext.Net.MVC.PartialViewResult("pnlContent")
        {
            WrapByScriptTag = false,
            ClearContainer = true,
            RenderMode = RenderMode.AddTo,
            ViewName = "Test"
        };
        var test1 = getScript(Test1());
        var test2 = getScript(Test2());
        var test3 = getScript(Test3());
        pvr.ViewBag.test1 = test1;
        pvr.ViewBag.test2 = test2;
        pvr.ViewBag.test3 = test3;
    
    
        return pvr;
    }
    
    private string getScript(ActionResult r)
    {
        string result = "";
        if (r is Ext.Net.MVC.PartialViewResult)
        {
            var h = this.GetHtmlHelper();
            var ePvr = r as Ext.Net.MVC.PartialViewResult;
            var ep = h.ExtPartial(ePvr.ViewName, ePvr.ViewData, ePvr.Model, ePvr.TempData, ePvr.IDMode, ePvr.ControlId,
                ePvr.ContainerId, ePvr.Index, ePvr.Namespace, ePvr.RenderMode, ePvr.WrapByScriptTag,
                ePvr.SingleControl, ePvr.Items, ePvr.ControlToRender, ePvr.ContainerConfig
            );
            result = ep.ToHtmlString();
        }
        return result;
    }
    Test.cshtml (to see result strings)
    @using Ext.Net;
    @using Ext.Net.MVC;
    @{
        var X = Html.X();
        string test1 = ViewBag.test1;
        string test2 = ViewBag.test2;
        string test3 = ViewBag.test3;
    }
    @(
     X.Panel().Title("Test").Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig() {Align=VBoxAlign.Stretch })
       .Items(
              X.TextArea().FieldLabel("Test1").Value(test1),
              X.TextArea().FieldLabel("Test2").Value(test2),
              X.TextArea().FieldLabel("Test3").Value(test3)
       )
    )
    Test3.cshtml

    @using Ext.Net;
    @using Ext.Net.MVC;
    @{
        var X = Html.X();
    }
    @(
      X.Window().Title("Test3")
       .Width(300).Height(300)
       .Items(
                X.Hidden().DataIndex("Id"),
                X.NumberField().DataIndex("PersNo"),
                X.TextField().DataIndex("PersName")
       )
    )
    /Test/Test3 action method returns
    {script:"Ext.onReady(function(){new Ext.window.Window({height:300,renderTo:Ext.getBody(),width:300,items:[{id:\"id3f93d9cbbc957a91\",xtype:\"hiddenfield\",dataIndex:\"Id\"},{id:\"idc976e8c825383691\",xtype:\"numberfield\",dataIndex:\"PersNo\",decimalSeparator:\",\"},{id:\"iddb39785371b3e291\",xtype:\"textfield\",dataIndex:\"PersName\"}],title:\"Test3\"}).show();});"}
    but getScript(Test3()) returns
    <div id="idfa8655e4782d77e8"></div>{script:"Ext.onReady(function(){new Ext.window.Window({height:300,renderTo:Ext.getBody(),width:300,items:[{id:\"id8855c98010d677e8\",xtype:\"hiddenfield\",dataIndex:\"Id\"},{id:\"idd4888ecaea08b7e8\",xtype:\"numberfield\",dataIndex:\"PersNo\",decimalSeparator:\",\"},{id:\"id878ddb94170d03e8\",xtype:\"textfield\",dataIndex:\"PersName\"}],title:\"Test3\"}).show();});"}
    and also getScript(Test2()); returns (false for clearContainer parameter)
    {script:"Ext.ComponentManager.onAvailable(\"pnlContent\",function(){Ext.net.addTo(\"pnlContent\", [{height:400,width:500,xtype:\"panel\",items:[{id:\"id243baf90b7e95c08\",xtype:\"displayfield\",fieldLabel:\"Name\",dataIndex:\"PersName\"},{xtype:\"netimage\",imageUrl:\"images/default.png\"}],title:\"Test2\"}], false);});"}
  4. #4
    dont you have any suggestions?
  5. #5
    can i get partialview's script without request an action, maybe in application_start method of global.asax or some other place?

Similar Threads

  1. Replies: 14
    Last Post: Mar 26, 2015, 10:22 AM
  2. Replies: 3
    Last Post: Apr 16, 2014, 4:53 PM
  3. Replies: 5
    Last Post: Nov 17, 2012, 11:20 AM
  4. Replies: 1
    Last Post: Nov 02, 2012, 4:07 AM
  5. Replies: 0
    Last Post: Apr 19, 2012, 4:32 PM

Tags for this Thread

Posting Permissions