如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

我看了幾個例子，其中Ajax可以用來更新divs或其他元素與id。我一直無法找到一個使用Ajax和Razor視圖的示例來幫助我處理以下問題。如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

我的頁面在頂部的標準菜單，機身中間，和頁腳。沒有真正的需要每次更新頁眉和頁腳。實際上，我的頁面只需要根據頁面上的菜單點擊和動作鏈接更新正文的一部分。我正在使用VS 2012創建的Internet模板進行測試，如果這有助於我不必使用一堆代碼片段混淆此請求。我正在使用Razor視圖和C＃編碼偏好。

因此，考慮到默認_Layout.cshtml文件，我將如何加載關於通過Ajax網頁即RenderBody（）節？我試着與一個div我纏RenderBody（）調用相匹配的UpdateTargetId添加Ajax.BeginForm（......）我_Layout.cshtml文件大約一個格，返回從我的控制器的局部視圖，但是這不是完全正確。我所得到的只是我的部分觀點。（關於頁面沒有菜單，頁腳等僅僅是關於頁面上的代碼）

會有人友好地共享一個鏈接，演示此功能或親切分享代碼，做我想做的事情，即交換索引視圖與關於沒有完整頁面刷新的視圖？我錯過的一些解釋會很好，但我確信我可以從一個堅實的例子中推斷出我錯了。一如既往，您的時間非常感謝。

編輯：使用賈森的建議 _Layout.cshtml

<nav> 
    <ul id="menu"> 
     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
     <li>@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })</li> 
     <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
    </ul> 
</nav>

....

在我的DIV ID = 「身體」

@RenderSection("featured", required: false) 
<section class="content-wrapper main-content clear-fix"> 
    @RenderBody() 
</section>

..... 的HomeController的.cs

public ActionResult About() 
{ 
    ViewBag.Message = "Your app description page."; 

    return PartialView(); 
}

......

來源

2013-05-07 Budoray

下面是一個簡單的例子與jquery。 About部分被id="body"注入到div中。

<button>About</button> 
<div id="body"></div> 

$(function() { 
    $("button").on("click", function(e) { 
     $.get("Home/About").done(function(result) { 
      $("#body").html(result); 
     }); 
    }); 
));

控制器動作

[HttpGet] 
public ActionResult About() 
{ 
    return PartialView("About"); 
}

關於。CSHTML

@{ Layout = null } 
<h2>Home/About</h2> 
<p>Blah... </p>

編輯：也許一個更好的例子是使用一個鏈接，而不是

@Html.ActionLink("About", "About", "Home", null, new { @class="menu-button" }) 
<div id="body"></div> 

$(function() { 
    $(".menu-button").on("click", function(e) { 
     e.preventDefault(); 
     var url = $(this).attr("href"); 
     $.get(url).done(function(result) { 
      $("#body").html(result); 
     }); 
    }); 
});

編輯：沒有jQuery的要使用Ajax.ActionLink()代替Ajax.BeginForm()

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { }) 
<div id="body"></div>

來源

2013-05-07 17:57:43 Jasen

同樣的問題。使用@ Ajax.ActionLink（...）只顯示Home/About Blah文本。請參閱上面代碼中的編輯。 – Budoray 2013-05-07 19:36:52

你是否包含jquery和jquery.unobtrusive *腳本？ – Jasen 2013-05-07 20:21:07

啊。我錯誤地認爲他們與其他jQuery腳本捆綁在一起。將它們添加到我的_Layout.cshtml頁面的頭部，一切都很好。 – Budoray 2013-05-07 20:37:20

在您的HomeController.cs

public PartialViewResult About() 
{ 
    ViewBag.Message = "Your app description page."; 

    return PartialView(); 
}

在你_Layout.cshtml不要忘記導入：像以前

<script src="~/Content/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="~/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

來源

2016-08-25 17:21:34

剛纔這個問題已經回答了。即使是這樣，這個答案只是一個評論 – Aleksandar 2016-08-25 17:25:26

如何使用Ajax更新VS 2012 Internet模板的RenderBody（）部分？

回答

相關問題