使用Ajax Beginform加載不同的局部視圖

我剛剛創建了一個小型測試項目，以查看是否可以在ASP.NET MVC Razor頁面上加載不同的局部視圖，但似乎我沒有這樣做。而不是用「部分」替換「部分」div，它會打開「部分」作爲新頁面...使用Ajax Beginform加載不同的局部視圖

任何人都可以告訴我我做錯了什麼嗎？

現狀：

概述/ Index.cshtml：

@model dynamic 

@{ 
    ViewBag.Title = "title"; 
} 

<h2>title</h2> 

@Html.Partial("AnotherPartial")

概述/ AnotherPartial.cshtml：

@model dynamic 

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 

@{ 
    ViewBag.Title = "title"; 
} 

    <h2>title</h2> 
    @using(Ajax.BeginForm("Post", "Overview", new AjaxOptions{InsertionMode = InsertionMode.Replace, UpdateTargetId = "partial", HttpMethod = "POST"})) 
    { 
     <button type="submit">Submit</button> 
    } 
<div id="partial"> 
</div>

報告/ Partial.cshtml：

@model dynamic 

@{ 
    ViewBag.Title = "title"; 
} 

<h2>Partial</h2>

OverviewCont輥：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace AjaxWebTest.Controllers 
{ 
    public class OverviewController : Controller 
    { 
     // GET: Overview 
     public ActionResult AnotherPartial() 
     { 
      return PartialView(); 
     } 

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

     [HttpPost] 
     public PartialViewResult Post() 
     { 
      return PartialView("~/Views/Report/Partial.cshtml"); 
     } 
    } 
}

ReportController：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace AjaxWebTest.Controllers 
{ 
    public class ReportController : Controller 
    { 
     // GET: Report 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult Partial() 
     { 
      return PartialView(); 
     } 
    } 
}

編輯：找到了解決辦法：

發現問題，jQuery的不是我的網頁上定義的，所以不顯眼的Ajax js文件沒有正確加載。增加了以下參考我之前不顯眼的Ajax包括：

<script src="~/Scripts/jquery-1.10.2.js"></script>

來源

2015-12-29 Jonathan De Badrihaye

爲什麼使用HttpMethod'GET'？使用'POST'。 –

@teovankot我的不好，已經離開它，因爲我正在嘗試與兩個HttpMethods，不幸的是這並沒有解決它...更新我的帖子 –

只是一個野生的gess。你有嘗試把你的div內的形式？ –

發現問題，jQuery的不是我的網頁上定義的，所以不顯眼的Ajax js文件沒有正確加載。添加以下引用之前我不顯眼的Ajax包括：

<script src="~/Scripts/jquery-1.10.2.js"></script>

來源

2015-12-29 14:41:37

你應該把你的主視圖的Scripts節你不顯眼的Ajax腳本引用。

@model dynamic 

@{ 
    ViewBag.Title = "title"; 
} 

<h2>Main Index page title</h2> 

@Html.Partial("AnotherPartial") 

@section Scripts 
{ 
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
}

在佈局文件中，加載jQuery庫後在最底部調用@RenderSection("scripts", required: false)。 unobtrusive-ajax腳本期望jQuery可用/已經加載。

<div id="pageContent"> 
    @RenderBody() 
</div> 
@Scripts.Render("~/bundles/jquery") 
@RenderSection("scripts", required: false)

所以，如果你想從您的其他視圖下執行一些JS文件，你需要包括那些在腳本部分，這樣當頁面完全呈現，它會被添加到下（其他dependeny後類似jQuery的庫被加載）;

來源

2015-12-29 14:47:01 Shyju

使用Ajax Beginform加載不同的局部視圖

回答

相關問題