c# - 基本局部 View 渲染

Question

在我看来，我有一个要动态呈现的表单。这个表格包裹着一个更大的表格:

<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>

在我的 Controller 中:

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

我有一个名为 DisplayWorkOrder.cshtml 的局部 View .

几个问题:

• 如何使用从 FindWorkOrder 接收到的数据呈现此部分 View Controller ？
• 当我按下 ajax 表单中的提交按钮时，整个表单都会提交。我如何才能将其限制在特定区域？

我的预期功能是提交 ajax 表单(无需提交整个表单)并填充 <div id="workOrders">使用我查询的数据。

谢谢。

Answer 1

1

要渲染局部 View ，你可以这样做

@Html.RenderPartial("DisplayWorkOrder")

如果你想将模型传递给分部 View ，你可以这样做

@Html.RenderPartial("DisplayWorkOrder",Model)

如果你想将模型的属性传递给局部 View ，你可以这样做

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

假设您有一个模型绑定(bind)到要调用局部 View 的初始(父) View 。您应该在名为“FindWorkOrder”的操作中返回模型/ View 模型。类似这样

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

要避免提交完整的表单，您可以使用您要发送的数据从您的脚本执行 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.
                                 }
         });    
});