Question

我正在尝试使用Ajax渲染部分视图来填充<div id="AjaxDiv"></div>元素。我可以用jQuery实现这个目标：

<input id="btnCompetitors" type="button" value="Get Competitors" />

<script>
        function loadCategoriesPartialView() {
            $('#AjaxDiv').load(@Url.Action("CategoriesPartial", "Dashboard"));
        }
    </script>

但我无法使用Ajax.ActionLink，我更喜欢。

    @Ajax.ActionLink("Categories", "CategoriesPartial", "Dashboard", new AjaxOptions()
{
    UpdateTargetId = "AjaxDiv",
    InsertionMode = InsertionMode.Replace
})

缺少什么？我尝试了各种额外的AjaxOptions，比如使用OnSuccess等调用相同的方法，但我不能正确地做到这一点。 Bundles适用于jquery（基本上是jquery + unobtrusiveAjax），所以希望相同的应该适用于Ajax帮助器。

Answer 1

试试这个

数据模型

public class DisplayData
{
   public int ID { get; set; }
   public DisplayData(int ID)
   {
          this.ID = ID;
   }
}

主视图（PartialDemo.cshtml）

  @model IEnumerable<MvcApplication5.Models.DisplayData>        
  @{
     ViewBag.Title = "PartialDemo";
   }
  <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
  <script src="../../Scripts/jquery.unobtrusive.min.js" type="text/javascript"></script>
  @Ajax.ActionLink("Click 1", "PartialDemo", "PartialDemo", new {Data= "1" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" })
  @Ajax.ActionLink("Click 2", "PartialDemo", "PartialDemo", new {Data= "2" }, new  AjaxOptions { UpdateTargetId = "rsvpmsg" })

 <div id="rsvpmsg">
       @{ Html.RenderPartial("PartialDemoUC", this.Model);}
 </div>

创建部分视图PartialDemoUC.cshtml

model IEnumerable<dynamic> 

@foreach(var items in Model)
{
   @items.ID   
}

行动方法

1）当你渲染视图和按下ajax按钮的时候，这将被称为第一个

 public ActionResult PartialDemo(string Data)
    {
       List<DisplayData> Display = new List<DisplayData>();

       if (Request.IsAjaxRequest())
       {
          if (Data == "1")
          {
             Display.Add(new DisplayData(3));
             Display.Add(new DisplayData(4));
          }
          else
          {
            Display.Add(new DisplayData(5));
            Display.Add(new DisplayData(6));
          }
          return PartialView("PartialDemoUC",Display);
       }
       else
       {
           Display.Add(new DisplayData(1));
           Display.Add(new DisplayData(2));
           return View("PartialDemo", Display);
       }
    }

Answer 2

看起来我忽略了这个问题，帮助者正确渲染。这是jQuery错了。正确的一个：

<input id="btnCategories" type="button" value="Get Categories" />

<div id="AjaxDiv"></div>

<script>
    $(function () {
        $("#btnCategories").click(function () {
            $("#AjaxDiv").load("@Url.Action("CategoriesPartial", "Dashboard")");
        });
    });
</script>

使用MVC部分视图的Ajax - Ajax.ActionLink不起作用，而jQuery则不行

2 个答案: