Change connection using PartialView

Author: ArtemProsvirnin

MVC/Controllers/ChangeConnectionController.cs

@@ -9,10 +9,23 @@ namespace MVC_Samples.Controllers
 {
     public class ChangeConnectionController : Controller
     {
+        private string _instanceId = "ChangeConnection";
+
         public ActionResult Index()
         {
             // Get an instance of the QueryBuilder object
-            var qb = QueryBuilderStore.Get("ChangeConnection");
+            var qb = QueryBuilderStore.Get(_instanceId);
+
+            if (qb == null)
+                qb = CreateQueryBuilder();
+
+            return View(qb);
+        }
+
+        public ActionResult WithPartiaView()
+        {
+            // Get an instance of the QueryBuilder object
+            var qb = QueryBuilderStore.Get(_instanceId);
 
             if (qb == null)
                 qb = CreateQueryBuilder();
@@ -23,7 +36,7 @@ public ActionResult Index()
         private QueryBuilder CreateQueryBuilder()
         {
             // Create an instance of the QueryBuilder object
-            var qb = QueryBuilderStore.Create("ChangeConnection");
+            var qb = QueryBuilderStore.Create(_instanceId);
 
             SetNorthwindXml(qb);
 
@@ -33,7 +46,20 @@ private QueryBuilder CreateQueryBuilder()
         [HttpPost]
         public ActionResult Change(string name)
         {
-            var queryBuilder = QueryBuilderStore.Get("ChangeConnection");
+            ChangeConnection(name);
+            return new EmptyResult();
+        }
+
+        [HttpPost]
+        public PartialViewResult ChangePartial(string name)
+        {
+            var qb = ChangeConnection(name);
+            return PartialView("_queryBuilder", qb);
+        }
+
+        public QueryBuilder ChangeConnection(string name)
+        {
+            var queryBuilder = QueryBuilderStore.Get(_instanceId);
 
             queryBuilder.MetadataContainer.Clear();
 
@@ -44,7 +70,7 @@ public ActionResult Change(string name)
             else
                 SetDb2Xml(queryBuilder);
 
-            return new EmptyResult();
+            return queryBuilder;
         }
 
         private void SetNorthwindXml(QueryBuilder qb)

MVC/MVC.csproj

@@ -238,6 +238,8 @@
     <Content Include="Views\SubQueryResultsPreviewDemo\Index.cshtml" />
     <Content Include="Views\MobileDemo\Index.cshtml" />
     <Content Include="Views\BootstrapTheming\Index.cshtml" />
+	<Content Include="Views\ChangeConnection\WithPartiaView.cshtml" />
+	<Content Include="Views\ChangeConnection\_queryBuilder.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />

MVC/Views/ChangeConnection/WithPartiaView.cshtml

@@ -0,0 +1,49 @@
+@{
+    ViewBag.Title = "Switch Database Connections Demo";
+}
+
+<div class="row">
+    <div class="col-md-12">
+        <h1>Switch Database Connections Demo</h1>
+        <p>Switching between different database connections at run time.</p>
+        <div>
+            <h3 style="display: inline">Connect to:</h3>
+            <button class="change">NorthwindXmlMetaData</button>
+            <button class="change">Db2XmlMetaData</button>
+            <button class="change">SQLite</button>
+        </div>
+    </div>
+    <div class="col-md-12 query-builder-container"></div>
+</div>
+
+@section scripts
+{
+    <script>
+        $('.change').click(function() {
+            $.ajax({
+                type: 'POST',
+                url: '/ChangeConnection/ChangePartial',
+                data: {
+                    name: this.innerText
+                },
+                success: function (data) {
+                    if (window.AQB != null)
+                        AQB.Web.dispose();
+
+                    $('.query-builder-container').html(data);
+
+                    AQB.Web.onQueryBuilderReady(function (qb) {
+                        qb.on(qb.Events.SqlChanged, function () {
+                            isQueryChanged = true;
+                        });
+                        qb.on(qb.Events.SQLTextChanged, function () {
+                            isQueryChanged = true;
+                        });
+                    });
+
+                    AQB.startApplication();
+                }
+            });
+        });
+    </script>
+}

MVC/Views/ChangeConnection/_queryBuilder.cshtml

@@ -0,0 +1,33 @@
+@using ActiveQueryBuilder.Web.MVC
+@model ActiveQueryBuilder.Web.Server.QueryBuilder
+
+@{
+    ViewBag.Title = "Switch Database Connections Demo";
+    var controls = Html.QueryBuilder(Model);
+}
+
+@controls.GetHtml()
+<div class="qb-ui-layout">
+    <div class="qb-ui-layout__top">
+        <div class="qb-ui-layout__left">
+            <div class="qb-ui-structure-tabs">
+                <div class="qb-ui-structure-tabs__tab">
+                    <input type="radio" id="tree-tab" name="qb-tabs" checked />
+                    <label for="tree-tab">Database</label>
+                    <div class="qb-ui-structure-tabs__content">
+                        @controls.ObjectTreeView().GetHtml()
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="qb-ui-layout__right">
+            @controls.SubQueryNavigationBar().GetHtml()
+            @controls.Canvas().GetHtml()
+            @controls.StatusBar().GetHtml()
+            @controls.Grid().GetHtml()
+        </div>
+    </div>
+    <div class="qb-ui-layout__bottom">
+        @controls.SqlEditor().GetHtml()
+    </div>
+</div>

MVC/Views/Home/Index.cshtml

@@ -176,6 +176,13 @@
                 <a class="btn btn-default" href="@Url.Action("Index", "ChangeConnection")">Run &raquo;</a>
             </p>
         </div>
+        <div class="col-md-4">
+            <h3>Switch Database Connections. Partial view</h3>
+            <p>Switching between different database connections at run time using PartialView</p>
+            <p>
+                <a class="btn btn-default" href="@Url.Action("WithPartiaView", "ChangeConnection")">Run &raquo;</a>
+            </p>
+        </div>
     </div>
 
     <div class="row">