基本局部視圖渲染

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>

在我的控制器中：

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

我有一個名為DisplayWorkOrder.cshtml的局部視圖。

幾個問題：

• 如何使用從FindWorkOrder控制器收到的數據來呈現此局部視圖？
• 當我按ajax表單中的“提交”按鈕時，整個表單都會提交。 我如何只能將其限制在該特定區域？

我想要的功能是讓ajax表單提交（不提交整個表單），並用我查詢的數據填充<div id="workOrders"> 。

謝謝。

Answer 1

1

要渲染局部視圖，您可以執行此操作

@Html.RenderPartial("DisplayWorkOrder")

如果要將模型傳遞到“局部”視圖，則可以執行此操作

@Html.RenderPartial("DisplayWorkOrder",Model)

如果要將模型的屬性傳遞給Partial視圖，則可以執行此操作

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

假設您有一個要綁定到初始（父）視圖的模型，該模型是您要從其中調用部分視圖的位置。 您應該在名為“ FindWorkOrder”的操作中返回Model / View Model。類似這樣的事情

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.
                                 }
         });    
});