Question

我对MVC很新，让我试着用简单的英语解释我的场景：

我有一个带有模型的强类型mvc表单/页面（Product.cshtml），比如ProductViewModel。

此页面有两个搜索按钮，一个用于搜索并带来要添加到产品中的项目，另一个带来位置，最有可能是部分视图。

现在，我想要的是这些搜索结果以ajax形式工作而没有完整回发，然后当用户点击提交时，应使用模型绑定到表单来回发这些搜索（项目和位置）的结果按钮。

实现此功能的最佳方法是什么？

立即回应将受到赞赏。

我想，为了清晰起见，分享完整的代码很好：

我有一个表单（Service1.chtml），它有一个部分视图来显示用户（_TestUser一个局部视图：只读），然后是另一个部分视图（_PlotServiceRequestData），它应该有一个字段来搜索绘图并带回详细信息请点击其所有者名称和landuser等。

然后当我点击主窗体的提交按钮时，我应该能够从_PlotServiceRequestData局部视图中读取所有数据（主窗体）+新数据并将所有数据保存到数据库。

我正在尝试另外一个选项，即在Service1.cshtml上使用@ Ajax.ActionLink来调用_GetPlotDetails方法，然后将部分视图数据存储在TempData中，以便当用户点击时表单可以使用它提交“Service1.cshtml的按钮，这是一个正确的方法吗？”，如果我在局部视图中使用ajax.BeginForm然后将数据发布到

Service1控制器方法实际上是保存表单数据而不是更新部分视图，在这种方法中，即使我没有得到局部视图的模型数据。

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" />  <input type="submit" /> </form> <div id="result"></div>

<强>的Javascript

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

<强>控制器

public ActionResult Search(string query) { // Do something with query var model = GetSearchResults(query); return Partial("SearchResults", model) }

这应该有助于您走上正轨。 jQuery Form是一个很好的插件，是你应该考虑将表单帖子重新发送回服务器的主要内容。您可能还想研究使用jQuery的$.post和$.ajax函数，但这些函数需要更多的工作。

部分视图获取数据，然后发布结果以保存在数据库中

1 个答案: