局部視圖獲取數據，然後後的結果數據庫

Question

救我很新的MVC，讓我試着解釋我的方案在樸素簡單英語：

我有一個強類型MVC格式/頁（ Product.cshtml）與模型，說ProductViewModel。

此頁面有兩個搜索按鈕，一個搜索並將要添加到產品的項目和其他項目引入到位置，最有可能是部分視圖。

現在，我想要的是，這些搜索結果以ajax形式工作，沒有完整的回發，然後這些搜索（項目和位置）的結果應該使用模型綁定到表單，當用戶點擊提交按鈕。

什麼可能是實現此功能的最佳方式？

立即回覆將不勝感激。

---

我認爲，其良好的共享爲了清楚的完整代碼：

我已經一種形式（Service1.chtml），其具有顯示用戶的局部視圖（_TestUser局部視圖：只讀） ，然後另一個局部視圖（_PlotServiceRequestData）應該有一個字段來搜索劇情，並帶回其所有者姓名和土地使用者等的詳細信息。

然後當我點擊主窗體的提交按鈕時，我應該能夠從_PlotServiceRequestData部分視圖讀取所有數據（主窗體）+新數據並將所有數據保存到數據庫。

我在嘗試使用另一個選項，即使用Service1.cshtml上的@ Ajax.ActionLink調用_GetPlotDetails方法，然後將部分視圖數據存儲在TempData中，以便在用戶單擊時可用於表單Service1.cshtml的「提交」按鈕，這是一個正確的方法嗎？，如果我在部分視圖中使用ajax.BeginForm，那麼數據會發布到

Service1控制器方法，它實際上是保存表單數據而不是更新partialview，並且在這個方法中我甚至沒有獲得局部視圖的模型數據。

Sevice1.cshtml: 

@model ViewModels.TestViewModel 

@{ 

    ViewBag.Title = 




"Service1"; 

} 

@ 




using (Html.BeginForm()) 

{ 

@Html.LabelFor(m => m.Title) 

@Html.EditorFor(m => m.Title) 

    @Html.Partial(




"_TestUser", Model) 






<div id="RequestPlotData"> 

     @Html.Partial(




"_PlotServiceRequestData", Model.requestData) 






</div> 






<button type="submit">Save Form</button> 

} 

@section Scripts { 

} 



_PlotServiceRequestData.cshtml: 

=============================== 



@model ViewModels.PlotServicesRequestDataViewModel 



< 













div id="RequestPlotData"> 



    @ 








using (Ajax.BeginForm("_GetPlotDetails", "Test", new AjaxOptions { UpdateTargetId = "RequestPlotData", Url = Url.Action("_GetPlotDetails","Test") })) 



    { 












<h1>Request Details</h1> 



　 












<div> 



     @Html.LabelFor(m => m.plotAddress) 



     @Html.EditorFor(m => m.plotAddress) 












<input type="submit" name="submit" value="Ajax Post" /> 












</div> 
















<div> 



     @Html.LabelFor(m => m.LandUser) 



     @Html.EditorFor(m => m.LandUser) 












</div> 












<div> 



     @Html.LabelFor(m => m.OwnerName) 



     @Html.EditorFor(m => m.OwnerName) 












</div> 



    } 



</ 













div> 





CONTROLLER: 

========== 





using 













System; 



using 













System.Collections.Generic; 



using 













System.Linq; 



using 













System.Web; 



using 













System.Web.Mvc; 




namespace 













TestNameSpace 



{ 












public class TestController : Controller 



    { 












// 












// GET: /Test/ 












public ActionResult Service1() 



     { 



      Injazat.AM.mServices. 








LocalDBEntities context = new Injazat.AM.mServices.LocalDBEntities(); 



TestViewModel model = 








new TestViewModel() { user = context.Users.First(), Title = "Land Setting Out", 



       requestData = 








new PlotServicesRequestDataViewModel() { ServiceNumber ="122345", TransactionDate="10/10/2033" } }; 
















return View(model); 



     } 



     [ 








HttpPost()] 












public ActionResult Service1(TestViewModel model) 



     { 



      PlotServicesRequestDataViewModel s = (PlotServicesRequestDataViewModel)TempData[ 








"Data"]; 



      TestViewModel vm = 








new TestViewModel() { user = model.user, requestData = s, Title = model.Title }; 












return View(vm); 



　 



     } 



     [ 








HttpGet()] 












//public PartialViewResult _GetPlotDetails(string add) 












public PartialViewResult _GetPlotDetails(PlotServicesRequestDataViewModel requestData) 



     { 
















//PlotServicesRequestDataViewModel requestData = new PlotServicesRequestDataViewModel() { plotAddress = add}; 



      requestData.OwnerName = 








"owner"; 



      requestData.LandUser = 








"landuser"; 



      TempData[ 








"Data"] = requestData; 












return PartialView("_PlotServiceRequestData", requestData); 



     } 



    } 



} 

Answer 1

您可以使用jQuery Form plugin這個。這使得將數據從表單發回服務器的過程非常簡單。表單將發佈到一個操作，該操作將返回一個部分視圖，然後您可以將其推送到您的UI中。爲了使這更容易，jQuery表單實際上有一個「目標」選項，它會自動更新服務器響應（即從搜索操作返回的部分視圖）。

查看

<form id="searchForm" action="@(Url.Action("Search"))" method="POST"> 
    <input name="query" type="text" /> <!-- order use Html.TextBoxFor() here --> 
    <input type="submit" /> 
</form> 
<div id="result"><!--result here--></div> 

的Javascript

$('#searchForm').ajaxForm({ 
target: '#result' 
}); 

控制器

public ActionResult Search(string query) 
{ 
    // Do something with query 
    var model = GetSearchResults(query); 

    return Partial("SearchResults", model) 
} 

這應該^ h切實地幫助你走上正確的軌道。 jQuery Form是一個很好的插件，並且你應該考慮將你的表單發送回服務器。你可能也想看看使用jQuery的$.post和$.ajax函數，但這些需要稍微多些工作。