title: MVC Ajax with Dynamic Partial View Creation
body: <p>How can I create dynamic ajax.actionlinks that will call dynamic partial views.</p>
  
  <p><strong>For example:</strong> </p>
  
  <ul>
  <li>I have a page that will generate x number of comments</li>
  <li>Each comment can be voted up or down (individually)</li>
  <li>The number of up votes and down votes are counted into a single integer</li>
  <li>Each comment div will have its own ajax.actionlink</li>
  <li>Each ajax.actionlink will pass to the controller the ID of the comment</li>
  <li>The controller will calculate the total votes and call the partial view to display back into the div with the correct ID.</li>
  </ul>
  
  <p><strong>What have I done so far:</strong></p>
  
  <ul>
  <li><p>I have been able to create successful ajax.actionlink</p></li>
  <li><p>That will call a controller and sum the votes</p></li>
  <li><p>That will call the partial view and display the votes</p></li>
  </ul>
  
  <p><strong>What is the issue</strong></p>
  
  <ul>
  <li>I don't want to hard code 30-100 different ajax.actionlinks to call 30-100 hard coded partial views.</li>
  </ul>
  
  <p><strong>How can I accomplish this dynamically?</strong></p>
  
  <p><strong>Existing Code:</strong></p>
  
  <p>My ajax.actionlink inside my razor view</p>
  
  <pre><code> @Html.Raw(Ajax.ActionLink("[replacetext]", "VoteUp",
                  new { UserPostID = @Model.Id },
                          new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                          "&lt;img src=\"/Images/up_32x32.png\" /&gt;"))
  </code></pre>
  
  <p>My div inside the same razor view to display the returning results from the partial view.</p>
  
  <pre><code>&lt;div id="CountVote" class="postvotes"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My controller </p>
  
  <pre><code>    public PartialViewResult VoteUp(int UserPostID)
      {
          try
          {
              UserVotes vote = new UserVotes();
              vote.SubmitedVote = 1;
              vote.UserId = Convert.ToInt32(Session["id"]);
              vote.UserPostID = UserPostID;
              ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
  
          }
           catch (Exception e)
          {
              xxx.xxx.xxxx().Raise(e);
          }
          return PartialView("_TotalVotes");
      }
  </code></pre>
  
  <p>And finally my partial view (_TotalVotes.cshtml)</p>
  
  <pre><code>@ViewBag.SumVotes
  </code></pre>
  
  <p>Now my main view for Viewpost shows the comments in a loop using the viewbag.</p>
  
  <pre><code>foreach (var item in (List&lt;UserComment&gt;)ViewData["Comments"])
              {
                  CommentVote = "cv" + i.ToString();
      &lt;div class="postlinewrapper"&gt;
          &lt;div class="postvotesframe"&gt;
              &lt;div class="postvotes"&gt;
                  @Html.Raw(Ajax.ActionLink("[replacetext]", "VoteUp",
                          new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                          "&lt;img src=\"/Images/up_32x32.png\" /&gt;"))
              &lt;/div&gt;
  
              &lt;div id="@CommentVote" class="@CommentVote"&gt;0&lt;/div&gt;
              &lt;div class="postvotes"&gt;
                  @Html.Raw(Ajax.ActionLink("[replacetext]", "VoteDown",
                          new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                          "&lt;img src=\"/Images/down_32x32.png\" /&gt;"))
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="postleftbar"&gt;
              @Html.Raw(item.Comment)
          &lt;/div&gt;
          &lt;div class="postrightbar"&gt;
              &lt;div&gt;
                  &lt;div class="post_spec"&gt;
                      &lt;div class="post_spec_title"&gt;Call Sign:  &lt;/div&gt;
                      &lt;div class="post_spec_detail"&gt;@item.CallSign&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="post_spec"&gt;
                      &lt;div class="post_spec_title"&gt;When:  &lt;/div&gt;
                      &lt;div class="post_spec_detail"&gt;@item.CommentDate.ToString("dd/MM/yyyy")&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
                  i += 1;
              }
  </code></pre>
  
  <p>I have implemented the login to increase or decrease votes up and down:</p>
  
  <pre><code> public PartialViewResult VoteUp(int userPostId)
          {
              try
              {
                  UserVotes vote = new UserVotes();
                  vote.SubmitedVote = 1;
                  vote.UserId = Convert.ToInt32(Session["id"]);
                  vote.UserPostID = userPostId;
                  ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
  
              }
               catch (Exception e)
              {
                  xxxx.xxxx.xxxx().Raise(e);
              }
              return PartialView("_TotalVotes");
          }
  
          public PartialViewResult VoteDown(int userPostId)
          {
              try
              {
                  UserVotes vote = new UserVotes();
                  vote.SubmitedVote = -1;
                  vote.UserId = Convert.ToInt32(Session["id"]);
                  vote.UserPostID = userPostId;
                  ViewBag.SumVotes = postRepository.InsertUserPostVote(vote);
  
              }
              catch (Exception e)
              {
                  xxx.xxxx.xxxx().Raise(e);
              }
              return PartialView("_TotalVotes");
          }
  </code></pre>
  
  <p>Now all this code works for 1 ajax call just fine, but what I need to is to display separate ajax calls for separate divs dynamically.</p>