title: MVC Partial View Decoupling Example Code
body: <p>In my Current MVC Project, I have one view with so much functionality that is has become unmanageable. In order to resolve this issue, I started added funtionality to partial views and including them in the view but even this was a problem because the underlying javascript (jquery) was so interrelated and intertwinded that it was still a mess. The JS in one partial view would call a refresh method in another partial view and created a tighly coupled disaster. </p>
  
  <p>I decided I needed a way of decoupling the parital views from each other and from the container view.</p>
  
  <p>Here are a few of my objects</p>
  
  <ol>
  <li><p>Decouple the JS in my parital views so that one view does not need to know anything about another view or the container view.</p></li>
  <li><p>Namespace the JS code for each view so that I do not run into nameing conflicts between views.</p></li>
  <li><p>Create the pattern to maintian state on a page refresh (or link to this page)</p></li>
  <li><p>Put JS into sperate files that still support razor for URL resolution and other functions with one JS file per view or partial view.</p></li>
  <li><p>Use nameing conventions that allow someone who looks at the container view event wire up and initialization code to understand what is going on and where the refernces refer to.</p></li>
  <li><p>Be able to pass parameter data from the trigger event to the listeners.</p></li>
  </ol>
  
  <p>After doing some research and not finding to much information on this, I created a small demo that shows my first attampt at solving this issue. I am hoping that others can see what I am doing and provide even better ways of accomplishing this. In the demo, there are two partial views that communicate with each other without knowing anything about reach other. The contianing view is used to wire up the event handlers and call the functions when an event is raised.</p>
  
  <p>Here is the demo code</p>
  
  <p>The controler does nothing but returns the views and partial views.</p>
  
  <p>PartialViewDecoupleController.cs</p>
  
  <pre><code>namespace EngA.SandboxApplication.Controllers
  {
      public class PartialViewDecoupleController : Controller
      {
          // GET: PartialViewDecouple
          public ActionResult Index()
          {
              return View();
          }
  
          public PartialViewResult IndexJs()
          {
              return PartialView();
          }
  
          public PartialViewResult MenuPartialView()
          {
              return PartialView();
          }
  
          public PartialViewResult MenuPartialViewJs()
          {
              return PartialView();
          }
  
          public PartialViewResult DisplayPartialView()
          {
              return PartialView();
          }
  
          public PartialViewResult DisplayPartialViewJs()
          {
              return PartialView();
          }
  
  
      }
  }
  </code></pre>
  
  <p>The index view simply loads all the views   </p>
  
  <p>Index.cshtml</p>
  
  <pre><code>@Html.Hidden("id")
  
  @Html.Action("IndexJs", "PartialViewDecouple")
  
  @Html.Action("MenuPartialView","PartialViewDecouple")
  @Html.Action("MenuPartialViewJs", "PartialViewDecouple")
  &lt;br/&gt;
  &lt;br/&gt;
  @Html.Action("DisplayPartialView", "PartialViewDecouple")
  @Html.Action("DisplayPartialViewJs", "PartialViewDecouple")
  </code></pre>
  
  <p>The IndesJs file wires up the event handlers and marries the partail views together.<br>
  IndexJs.cshtml</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
      $(document).ready(function () {
  
          //Set up Event Handlers
          $(document).bind("MenuPartialView_onClick", function (e, p1) {
              $("#id").val(p1);
              displayPartialView.setup(p1);
  
          });
  
          $(document).bind("DisplayPartialView_onClick", function (e, message) {
              menuPartialView.message(message);
          });
  
          //Initialize Partial Views on refresh
          var id = $("#id").val();
          if (id!=null) displayPartialView.setup(id);
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Simply a container to recieve data and an button to raise an event.</p>
  
  <p>DisplayPartialView.cshtml</p>
  
  <pre><code>DisplayParitalView&lt;br/&gt;
  &lt;div id="display"&gt;default&lt;/div&gt;
  
  &lt;input type="button" name="ButtonSayHi" id="ButtonSayHi" value="Say Hi" onclick="displayPartialView.onButtonSayHiClick(this)" /&gt;
  </code></pre>
  
  <p>Below, "setup" displays a parameter that is passed to it.
  "onButtonSayHiClick" Raises and event</p>
  
  <p>DisplayPartialViewJs.cshtml </p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
      var displayPartialView = {
  
          setup: function (id) {
              $("#display").html(id);
          },
  
          onButtonSayHiClick: function (e) {
              var name = e.id;
              $(document).trigger("DisplayPartialView_onClick", [name]);
          }\
      };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Below, Two buttens to raise events.
   MenuPartialView.cshtml</p>
  
  <pre><code> MenuParitalView
  &lt;br/&gt;
  &lt;input type="button" name="ButtonOne" value="One" onclick="menuPartialView.onButtonOneClick(this)" /&gt;
  &lt;input type="button" name="ButtonTwo" value="Two" onclick="menuPartialView.onButtonTwoClick(this)" /&gt;
  </code></pre>
  
  <p>Below, Triggers raise events and message displays a message that is sent to it. 
   MenuPartialViewJs.cshtml</p>
  
  <pre><code> &lt;script language="javascript"&gt;
  
      var menuPartialView = {
  
          onButtonOneClick: function () {
              $(document).trigger("MenuPartialView_onClick", [1]);
          },
  
          onButtonTwoClick: function () {
              $(document).trigger("MenuPartialView_onClick", [2]);
          },
  
          message: function (message) {
              alert("Message: " + message);
          }
  
      };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>please let me know if you see better ways of accomplishing the same thing</p>
  
  <p>Thank you</p>
  
  <p>Earl</p>