MVC 3使用局部視圖來添加新上市阿賈克斯

修訂但同樣的問題：MVC 3使用局部視圖來添加新上市阿賈克斯

我建立一個網站與MVC 3，並遇到了一個很大的路障。在個人資料頁面上，用戶可以創建他們中心提供的新列表。我已經使用局部視圖爲該頁面的「_CenterProfile」部分創建了完美的作品。我已經實現了創建列表作爲頁面和模型的主要焦點，它也完美地工作。我想使用Ajax創建數據庫條目以及填充或更新配置文件頁面上顯示的列表。這是問題出在哪裏。

當我點擊提交按鈕而不是更新目標元素時，頁面翻轉到一個不存在的「CreateListing」頁面../Exchange/CreateListing。我瘋了，試圖讓這個功能起作用，不管我嘗試什麼，它都做同樣的事情。列表填充到數據庫，頁面從/ Exchange/Profile更改爲/ Exchange/CreateListing。

我確定有人在那裏可以幫助我，我已經到了最後期限了，過去這個頭疼的事情會爲我節省很多時間。

「簡介」觀點：

 @model Exchange.Models.CreateListingModel 

@{ 
    ViewBag.Title = "Profile"; 
} 

<h2>Profile</h2> 

@Html.Action("_CenterProfile") 

<br /> 
@using (Ajax.BeginForm("CreateListing", "Exchange", new AjaxOptions 
{ 
    HttpMethod = "Get", 
    UpdateTargetId = "centerListings", 
    InsertionMode = InsertionMode.Replace 
})) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>CreateListingModel</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.productName) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.productName) 
      @Html.ValidationMessageFor(model => model.productName) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.forSale) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.forSale) 
      @Html.ValidationMessageFor(model => model.forSale) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.forTrade) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.forTrade) 
      @Html.ValidationMessageFor(model => model.forTrade) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.price) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.price) 
      @Html.ValidationMessageFor(model => model.price) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.unit) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.unit) 
      @Html.ValidationMessageFor(model => model.unit) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.catagoryID) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.catagoryID) 
      @Html.ValidationMessageFor(model => model.catagoryID) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.description) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.description) 
      @Html.ValidationMessageFor(model => model.description) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.imageURL) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.imageURL) 
      @Html.ValidationMessageFor(model => model.imageURL) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.activeListing) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.activeListing) 
      @Html.ValidationMessageFor(model => model.activeListing) 
     </div> 
    </fieldset> 

    <p> 
     <input type="submit" value="CreateListing" /> 
    </p> 
} 

    <table id="centerListings"> 

    </table> 


<p> 
    @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) | 
    @Html.ActionLink("Back to List", "Index") 
</p>

CreateListing控制器：

public PartialViewResult CreateListing(CreateListingModel model) 
{ 
    mmjc.CreateListing(model.catagoryID, model.productName, model.forSale, model.forTrade, model.price, model.unit, model.description, model.imageURL, model.activeListing); 
    var listings = mmjc.GetCenterListings(); 
    return PartialView("_CenterListings", listings); 
}

_CenterListings PartialView：

@model IEnumerable<Exchange.Models.Listing> 

<table id="centerListings"> 
    <tr> 
     <th> 
      CatagoryID 
     </th> 
     <th> 
      ProductName 
     </th> 
     <th> 
      ToSell 
     </th> 
     <th> 
      ToTrade 
     </th> 
     <th> 
      PricePerUnit 
     </th> 
     <th> 
      Unit 
     </th> 
     <th> 
      Description 
     </th> 
     <th> 
      ImgPath 
     </th> 
     <th> 
      ProfileID 
     </th> 
     <th> 
      ActiveListing 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.CatagoryID) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ProductName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ToSell) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ToTrade) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.PricePerUnit) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Unit) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ImgPath) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ProfileID) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ActiveListing) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.ListingsID }) | 
      @Html.ActionLink("Details", "Details", new { id=item.ListingsID }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.ListingsID }) 
     </td> 
    </tr> 
} 

</table>

來源

2011-10-12 Phatjam98

大家好。所以我在這裏解決了我自己的問題。似乎很多人都有這個相同的問題。修復非常簡單，讓我感覺非常無聊。

所有你需要做的是包括

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

在你_layout或主視圖。沒有它，Ajax.BeginForm就沒用了，並且會繼續重定向到PartialViewResult。

來源

2011-10-13 05:27:46 Phatjam98

我想你應該在提供UpdateTargetId您AjaxOptions：

new AjaxOptions { HttpMethod = "Post", 
        UpdateTargetId = "idOfSomeHtmlContainer" }

使用此屬性，您可以指定應該使用AJAX調用的響應更新頁面的哪一部分。使用你現在的代碼，ASP.NET MVC不知道頁面的哪一部分需要用你的action方法返回的視圖進行更新。

來源

2011-10-12 06:47:28

即使使用UpdateTargetId我也無法獲得正確的結果。表單使用Ajax明確發佈，但不是更新我新創建的和ID'd表，而是將我帶到一個甚至不存在的通用分部視圖。這最終令人沮喪。 – Phatjam98

你是什麼意思'不存在的通用局部視圖'？如果可能的話，嘗試查看發送到服務器的內容以及返回的內容（使用Chrome/IE/Firefox開發人員工具或Fiddler）。構建異步webapps時，這通常會有很大幫助。 –

我想你想指定必要的Ajax選項來替換創建列表表單的內容 - 即要替換的元素的Id和更新模式。

來源

2011-10-12 06:50:08 Xhalent

MVC 3使用局部視圖來添加新上市阿賈克斯

回答

相關問題