Basic partial view render

Question

In my view, I have a form I want to dynamically render. This form is wrapped around a larger form:

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

In my controller:

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

I have a partial view named DisplayWorkOrder.cshtml .

Several questions:

• How can I render this partial view with the data I receive from the FindWorkOrder controller?
• When I press the submit button in the ajax form, the whole form submits. How can I only limit it to that specific area?

My intended functionality is for the ajax form to submit (without the whole form submitting) and populate <div id="workOrders"> with data that I queried.

Thanks.

Answer 1

1

To render the partial view , you can do this

@Html.RenderPartial("DisplayWorkOrder")

If you want to pass a model to the Partial view,you can do this

@Html.RenderPartial("DisplayWorkOrder",Model)

If you want to pass a proprty of the model to the Partial view,you can do this

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

Assiming that you have a model binded to the initial (parent) view from where you want to call the partial view. You should be returning the Model /View Model in your Action called "FindWorkOrder" .Something like this

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

and in your Main View

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

2

To Avoid submitting the enitire form, you could do a jquery ajax call from your script with the data you want to send. I would keep the (only one) form tag at the outer level and change the submit button to normal button control.

$("#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.
                                 }
         });    
});