Ajax請求獲取局部視圖

Question

我有這樣的主視圖：

<％@頁標題= 「」 語言= 「C＃」 的MasterPageFile = 「〜/查看/共享/的Site.Master」 繼承=」 System.Web.Mvc.ViewPage」％>

指數

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script> 

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

<h2> 
    Index</h2> 

<script type="text/javascript"> 
    $(function() { 
     $('#mylink').click(function() { 
      $('#resultpartial1').load(this.href); 
      return false; 
     }); 
    }); 

    $(function() { 
     $('#mysecondlink').click(function() { 
      $('#resultpartial1').load(this.href, { id: 123 }); 
      return false; 
     }); 
    }); 
</script> 

<%= Html.ActionLink("click me","Partial1","Foo",new MyViewModel { Foo = "123" , Bar="456" },new { id = "mylink" }) %> 
<%= Html.ActionLink("click me second link","Partial2", "Foo", new { id = "123" }, new { id = "mysecondlink" } 

）％>

和控制器是這樣的：

public class FooController : Controller 
{ 
    // 
    // GET: /Foo/ 

    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Partial1(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = new MyViewModel { Bar = "a", Foo = "1" }; 
     return View(model); 
    } 

    public ActionResult Partial2(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = new MyViewModel { Bar = "b", Foo = "2" }; 
     return View(model); 
    } 
} 

}

和局部視圖所示：

<％@控制語言= 「C＃」 繼承= 「System.Web.Mvc.ViewUserControl」 ％ >

的Foo： 酒吧：

<％@控制語言= 「C＃」 繼承=「System.Web.Mvc.ViewUserControl 「％>

富： 酒吧：

我總是得到通過控制器操作設定值。我想在視圖中設置值並傳遞到局部視圖。我怎樣才能做到這一點 ？

Answer 1

假設你有一個視圖模型

public class MyViewModel 
{ 
    public string Foo { get; set; } 
    public string Bar { get; set; } 
} 

和控制器：

public class FooController: Controller 
{ 
    public ActionResult Partial1(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = ... 
     return View(model); 
    } 

    public ActionResult Partial2(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     SomeOtherViewModel model = ... 
     return View(model); 
    } 

} 

相應的局部視圖：

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%> 
<div>Foo: <%= Html.DisplayFor(x => x.Foo) %></div> 
<div>Bar: <%= Html.DisplayFor(x => x.Bar) %></div> 

終於在你的主視圖，你可以有一個鏈接：

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mylink" } 
) %> 
<div id="resultpartial1" /> 

這可以Ajax化：

$(function() { 
    $('#mylink').click(function() { 
     $('#resultpartial1').load(this.href); 
     return false; 
    }); 
}); 

現在當然如果ID參數只能與你能做到這一點的JavaScript稱爲：

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    null, 
    new { id = "mylink" } 
) %> 

然後：

$(function() { 
    $('#mylink').click(function() { 
     $('#resultpartial1').load(this.href, { id: 123 }); 
     return false; 
    }); 
}); 

---

更新：

而對於第二個鏈接：

<%= Html.ActionLink(
    "click me second link", 
    "Partial2", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mysecondlink" } 
) %> 
<div id="resultpartial2" /> 

然後：

$(function() { 
    $('#mysecondlink').click(function() { 
     $('#resultpartial2').load(this.href, { id: 123 }); 
     return false; 
    }); 
}); 

Answer 2

什麼似乎是問題？

模式與兩個環節應該是（如果你使用jQuery）：

$(function(){ 
    // attach link clicking functionality to call controller action via Ajax 
    $("#LinkID").click(function(evt) { // reference 1 below 
     evt.preventDefault(); 
     $.ajax({ 
      type: "GET", 
      url: $(this).attr("href"), // if link has the correct URL 
      success: function(data) { 
       $("#containerID").append(data); 
      }, 
      error: function(xhr, status, err) { 
       // Handle error ie. alert() 
      } 
     }); 
    }); 

    // add code for the second link 
}); 

如果這兩個環節的工作是相同的，那麼你可以在在線參考1改變選擇，包括在其兩個鏈接。但是，如果他們使用不同的容器，則可以將容器選擇器作爲自定義屬性添加到鏈接，並且仍然只使用單一功能。相應地更改代碼。

你可以使用通常的

<%= Html.ActionLink("Link text", "action", "controller", null, new { id = "LinkID" }) %> 

所以也要，你可以按照上面的代碼使用正確的網址放在你的主視圖鏈接。使用控制器操作返回您需要在客戶端上顯示的部分視圖。