基本局部视图渲染

本文关键字：视图 本局 | 更新日期: 2023-09-27 18:21:20

在我的视图中，我有一个要动态渲染的表单。这个表单被包裹在一个更大的表单上：

<form>
    //......stuff...
    @using (Ajax.BeginForm("FindWorkOrder", new AjaxOptions { 
        UpdateTargetId = "workOrders" }))
    {
        <input type="text" name="workOrder" />
        <input type="submit" value="Find" />
    }
    <div id="workOrders">
        @{ Html.RenderPartial("DisplayWorkOrder"); }
    </div>
</form>

在我的控制器中：

public ActionResult FindWorkOrder() 
{
    // do query, return a model
    return View();
}

我有一个名为DisplayWorkOrder.cshtml的局部视图。

几个问题：

  • 如何使用从FindWorkOrder控制器接收的数据来渲染此局部视图
  • 当我按下ajax表单中的提交按钮时，整个表单都会提交。我怎么能只把它限制在那个特定的区域

我想要的功能是让ajax表单提交（不需要提交整个表单），并用我查询的数据填充<div id="workOrders">。

谢谢。

基本局部视图渲染

1

要渲染部分视图，可以执行以下

@Html.RenderPartial("DisplayWorkOrder")

如果您想将模型传递到Partial视图，可以执行此

@Html.RenderPartial("DisplayWorkOrder",Model)

如果你想把模型的一部分传递给Partial视图，你可以这样做

@Html.RenderPartial("DisplayWorkOrder",Model.MyProperty)

假定您已将模型绑定到要调用局部视图的初始（父）视图。您应该在名为"FindWorkOrder"的操作中返回模型/视图模型

public ActionResult FindWorkOrder() 
{
   CustomerViewModel objCustVM=CustomerService.GetCustomerViewModel();  // just to get the customer model.
    return View(objCustVM);
}

并且在您的主视图中

@model MyProject.ViewModel.CustomerViewModel    
<h2>This will show the content from Partial View</h2>
@{    @Html.RenderPartial("DisplayWorkOrder",Model)}

2

为了避免提交enitire表单，您可以使用要发送的数据从脚本中执行jquery ajax调用。我会将（只有一个）表单标签保留在外部级别，并将提交按钮更改为普通按钮控件。

$("#submitWorkOrder").click(function(){
 //Do validation
  var id=233; //get customer id from wherever you have it
  ajaxUrl="Customer/SaveWorkOrder/"+id+"?workOrderId=$("#workOrder").val();
  $.ajax({
          url: ajaxUrl,  
          success: function(data){
                //do whatever with the result data.
                                 }
         });    
});
相关文章：