具有動態局部視圖創建的 MVC Ajax

如何創建將呼叫動態局部視圖的動態 ajax.actionlinks。

例如：

• 我有一個頁面會生成 x 條評論
• 每個評論都可以投票贊成或反對（單獨）
• 贊成票和反對票的數量計入一個整數
• 每個評論 div 都有自己的 ajax.actionlink
• 每個 ajax.actionlink 都會將評論的 ID 傳遞給控制器
• 控制器將計算總票數並呼叫部分視圖以顯示回具有正確 ID 的 div。

到目前為止我做了什麼：

• 我已經能夠創建成功的 ajax.actionlink
• 這將呼叫控制器並對選票求和
• 這將呼叫部分視圖並顯示投票

什麼問題

• 我不想硬編碼 30-100 個不同的 ajax.actionlinks 來呼叫 30-100 個硬編碼的局部視圖。

我怎樣才能動態地完成這個？

現有程式碼：

我的剃刀視圖中的 ajax.actionlink

@Html.Raw(Ajax.ActionLink("[replacetext]", "VoteUp",
               new { UserPostID = @Model.Id },
                       new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                       "<img src=\"/Images/up_32x32.png\" />"))

我的 div 在同一個 razor 視圖中顯示部分視圖的返回結果。

<div id="CountVote" class="postvotes"></div>

我的控制器

   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");
   }

最後是我的部分觀點（_TotalVotes.cshtml）

@ViewBag.SumVotes

現在，我的 Viewpost 主視圖使用 viewbag 循環顯示評論。

foreach (var item in (List<UserComment>)ViewData["Comments"])
           {
               CommentVote = "cv" + i.ToString();
   <div class="postlinewrapper">
       <div class="postvotesframe">
           <div class="postvotes">
               @Html.Raw(Ajax.ActionLink("[replacetext]", "VoteUp",
                       new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                       "<img src=\"/Images/up_32x32.png\" />"))
           </div>

           <div id="@CommentVote" class="@CommentVote">0</div>
           <div class="postvotes">
               @Html.Raw(Ajax.ActionLink("[replacetext]", "VoteDown",
                       new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "CountVote" }).ToHtmlString().Replace("[replacetext]",
                       "<img src=\"/Images/down_32x32.png\" />"))
           </div>
       </div>
       <div class="postleftbar">
           @Html.Raw(item.Comment)
       </div>
       <div class="postrightbar">
           <div>
               <div class="post_spec">
                   <div class="post_spec_title">Call Sign:  </div>
                   <div class="post_spec_detail">@item.CallSign</div>
               </div>
               <div class="post_spec">
                   <div class="post_spec_title">When:  </div>
                   <div class="post_spec_detail">@item.CommentDate.ToString("dd/MM/yyyy")</div>
               </div>
           </div>
           <br />
           <br />
       </div>
   </div>
               i += 1;
           }

我已經實現了登錄來增加或減少投票：

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");
       }

現在所有這些程式碼都適用於 1 個 ajax 呼叫，但我需要動態顯示單獨 div 的單獨 ajax 呼叫。

試試這個方法。

主視圖

我假設您有一個具有Comments評論項集合屬性的模型

@model MyNamespace.CommentAndOtherStuff

<ul>
   @foreach(item in Model.Comments)
   {
     <li>
         <a href="@Url.Action("VoteUp", "VoteControllerName", new { UserPostId = item.Id })" 
            class="vote-link"
            data-id="@item.Id">@item.Votes</a><img src="vote.jpg" />
     </li>
   }
</ul>

你的控制器只返回一個名為VoteResultJSON 的類。

[HttpPost]
public ActionResult VoteUp(int UserPostID)
{
   ...
   var model = new VoteResult
   {
       UserPostID = UserPostID,
       Votes = service.tallyVote(UserPostID)
   };

   return Json(model);
}

現在用 jQuery 事件處理程序連接所有這些並設置 AJAX 呼叫

$(document).ready(function() {

   $("a.vote-link").on("click", function(event) {
       event.preventDefault();
       var link = $(this);  // the link instance that was clicked
       var id = link.attr("data-id");
       var url = link.attr("href");

       $.ajax({
           url: url,
           type: "post"
       })
       .done(function(result) {
           // JSON result: { UserPostID: 1, Votes: 5 }

           // replace link text
           link.html(result.Votes);
       });
   });

});

但我想要一個部分視圖 html fagment。

[HttpPost]
public ActionResult VoteUp(int UserPostID)
{
   ...
   var model = new VoteResult
   {
       UserPostID = UserPostID,
       Votes = service.tallyVote(UserPostID)
   };

   return PartialView("_TotalVotes", model);
}

_TotalVotes 部分

@model MyNamespace.VoteResult

@if (Model.Votes < 0)
{
   <span class="unpopular">@Model.Votes</span>
}
else
{
   <span class="awesome">@Model.Votes</span>
}

並調整 AJAX 回調

.done(function(result) {
   link.html(result);
});

現在您可以為連結片段編寫一個助手，但在我看來它會混淆事物（這是一個判斷呼叫）。您真正需要的只是您的 javascript 將綁定的類名和數據 ID。

引用自：https://stackoverflow.com/questions/29583475