允許從MVC 4表單多個職位與同一頁面上的結果

Question

長篇大論出於需要：

我有一個強類型MVC 4表單。表單根據當前的URL參數動態構建。當用戶提交表單時，表單輸入數據被髮布到控制器，控制器完成它，然後控制器方法的結果需要顯示在表單下方。

具體來說，在我的情況下，結果是行項目票據數據。用戶可以根據需要多次提交提交，每次控制器的附加結果顯示在表單下方的同一頁面上;每個帖子都是添加的訂單項。 （通過調用外部webapi來請求/存儲訂單項，因此每次發生提交時，我都會使用我的控制器方法重建訂單項）。

我想要做的是不用每次刷新頁面來重新構建表單，而只需通過ajax調用更新表單下方的行項目。該表格的構建成本很高，因爲它也是通過外部web API調用構建的。即使表單本身不是，我的模型非常大，並且有很多數據。

我到目前爲止所嘗試的是將訂單項放入部分視圖中，我將在每次提交表單後更新這些部分視圖。我使用jQuery和Ajax提交表單。似乎正在發生的事情是提交表單，調用ajax方法，但我的控制器直接返回部分視圖和母版頁佈局。它不會返回到jQuery調用。這可能是Sitefinity，也可能是我做的完全錯誤的事情。

我到目前爲止是這樣的：http://beta.kentuckycenter.org/all-shows/jeff-beck。點擊此頁面上的「購買門票」以查看錶格。

提交表單（按「GO」），表單提交併僅返回部分視圖。

但它應該是這樣的（這是設計只）： http://www.kentuckycenter.org.staging01.spiiider.com/select-tickets.php

Sitefinity MVC小部件改變的複雜性是肯定的。我的設置是母版頁（Sitefinity模板是從母版頁構建的），然後是默認視圖和部分視圖。我試圖更新默認視圖中的部分視圖。

我已經嘗試了許多不同的方法，包括ajax.beginform形式，但我仍然無法得到一個局部視圖在默認視圖內返回。我無法在隱藏字段中傳遞原始SelectTicketsModel數據，因爲某些項目是其他模型的列表。

控制器操作簡單：

public ActionResult Index(string performanceID, string pageID) 
     { 
      var Model = new SelectTicketsModel(); 

      Model = Model.GetPerformanceDetails(performanceIDnew, productionID); 

      return View("Default", Model); 
     } 

     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Index(GetTicketsModel Model) 
     { 
      //call webapi to reserve tickets 
      ticketsReserved = Model.ReserveTickets(Model.PriceType, performanceID, numberOfTickets, zoneID, Model.Accessible); 

      if (ticketsReserved == numberOfTickets) 
      { 
       LineItemModel lineModel = new LineItemModel(); 
       //Fill LineItemModel from webpapi 
      } 

      return PartialView("TicketList", LineItemModel); 
     } 



public class SelectTicketsViewModel 
    { 
     public bool Results { get; set; } 
     public int PerformanceID { get; set; } 
     public Nullable<DateTime> PreSaleDateStart { get; set; } 
     public Nullable<DateTime> PreSaleDateEnd { get; set; } 
     public bool HideSYOS { get; set; } 
     public bool IsGeneralAdmission { get; set; } 
     public bool WillCallOnly { get; set; } 
     public bool IsOnSale { get; set; } 
     public bool IsSoldOut { get; set; } 
     public int MaxSeats { get; set; } 
     public int ZoneMapID { get; set; } 
     public string TimeSlot { get; set; } 
     public string Title { get; set; } 
     public DateTime PerformanceDate { get; set; } 
     public string Location { get; set; } 

     // Create Lists from Models below 
     public List<PriceZoneModel> PriceZones { get; set; } 
     public List<PriceTypeModel> PriceTypes { get; set; } 
     public List<LineItemModel> LineItems { get; set; } 
    } 

    public class PriceZoneModel 
    { 
     public int PriceZoneID { get; set; } 
     public string PriceZoneDescription { get; set; } 
     public int PriceTypeID { get; set; } 
     public string PriceTypeDescription { get; set; } 
     public decimal Price { get; set; } 
     public decimal BasePrice { get; set; } 
     public bool Available { get; set; } 
     public int AvailableCount { get; set; } 
     public int Rank { get; set; } 
    } 

    public class PriceTypeModel 
    { 
     public int PriceTypeID { get; set; } 
     public string PriceTypeDescription { get; set; } 
     public string PriceTypeShortDescription { get; set; } 
     public string Category { get; set; } 
     public bool IsDefaultPriceType { get; set; } 
     public bool IsPromo { get; set; } 
    } 

    public class LineItemModel 
    { 
     int id { get; set; } 
     bool AccessibleSeats { get; set; } 
     public List<SubLineItemModel> SubLineItems { get; set; } 
    } 

    public class SubLineItemModel 
    { 
     public string Section { get; set; } 
     public int NumberOfSeats { get; set; } 
     public string SeatNumber { get; set; } 
     public int SeatID { get; set; } 
     public decimal Price { get; set; } 
     public string PriceTypeDescription { get; set; } 
    } 

    public class GetTicketsModel 
    { 
     //Form Values needed to Reserve Tickets 
     public string NumberOfTickets { get; set; } 
     public string PriceType { get; set; } 
     public string ZoneID { get; set; } 
     public bool Accessible { get; set; } 
     public string PerformanceID { get; set; } 
    } 

Answer 1

如果返回的Ajax是一個新的頁面上開放，像你沒有使用不顯眼庫聲音。

請確保您的cshtml頁面或甚至佈局文件中包含以下文件（如果您在整個站點使用ajax）。

jquery.unobtrusive-ajax.js 

Where can one download Microsoft jQuery Unobtrusive Validation without using NuGet

從它的聲音，您在部分返回數據和更新所述前端元件的方法應該很好地工作。

我會看出來的唯一的事情是，你應該傳遞變量的模型，而不是類

 if (ticketsReserved == numberOfTickets) 
     { 
      LineItemModel lineModel = new LineItemModel(); 
      //Fill LineItemModel from webpapi 
     } 

     return PartialView("TicketList", lineModel); //<-- here 

編輯

是啊，我在你的測試環節了一下並且該頁面不包含unobtrusive-ajax.js。這應該能解決你的問題。

Answer 2

如果您將整個頁面作爲來自Ajax調用的控制器的響應，那麼這是一件很重要的事情。試着從你的行爲結果中返回你的列表作爲Json（items，allow get）而不是部分視圖？另外kendo observable或kendo grid將需求數據推送到observable也是很好的解決方案。