How to work with a partial view within a view for same model?

Question

I have a simple form with below functionalities.

1. First Part: It has a table which will display value from a database table, eg tblProfile and it contains three columns like profileid, profilename, description and in each row an edit button to edit values.

2. Second Part: In the same page, I have three text boxes to enter the value to the same database table, eg tblProfile . After clicking on the submit button it will insert the value into the table and will immediately display it on the table mentioned above and based on the last profileid it will show the top+1 id in the profileid textbox. If any edit button clicked on the table, these three text boxes will be populated with the values. After modification they have to be updated.

I have created a view which uses IEnumerable<MyModel> as model so that all the profile values are displayed in the table (strongly typed view). Now for the form part I have created a partial view which is also a strongly typed view but instead of IEnumerable<MyModel> it uses MyModel as its model type.

I amd confused about where I should put the Save, Update, Cancel etc. buttons: in the main view or in the partial. How to complete the functionality? I am using VS2010 SP1 and MVC4 and EF in the Main solution, which has one MVC project, an two folders: BusinessLayer and DataAccesLayer. The BusinessLayer folder contains separate class libraries for BO and BA, and the DataAccesLayer folder contains a class library file, and two other folders one for EF .edmx file and other one for DA class.

How can I implement this?

Answer 1

Simple approach: create one partial view for adding a new record, and another partial view for updating an existing record. The reason for this approach is to separate concerns of how your post-action should handle your request. Unless you add in a bool flag to tell the action whether the post command is to insert or update, it will not know what to do with the data. So, I suggest creating separate partials

// Insert partial "InsertPartialView"
@YourApp.Models.MyModel

@using (Html.BeginForm("InsertNewRecord", "Home"))
{
  // your field controls here

  <input type="submit" value="Add" />
}

---

// Update partial "UpdatePartialView"
@YourApp.Models.MyModel

@using (Html.BeginForm("UpdateRecord", "Home"))
{
  // your field controls here

  <input type="submit" value="Update" />
}

In your controller, use the "InsertNewRecord" action for adding new records, and "UpdateRecord" for updating an existing record.

Now initially, you can have your "insert" partial displayed in your View, so adding records requires no effort on the serve up this partial view.

<div id="partialDiv">
  @Html.Partial("InsertPartialView")
</div>

Now when you want to update a record, you'll need to make a call to the server to replace your "insert" partial with the "update" partial. You can do this by creating an "edit" ajax-action link that accommodates each record in your table:

@Ajax.ActionLink("Edit", "GetUpdatePartial", new { id = item.profileid }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "partialDiv" })

I'll explain this if you've never used the ajax link before. The first three params are the text of the link, the action's name, and the id of the item -- no different than a regular Html-actionlink. The 4th param lets us define our ajax options. The "GET" method is self-explanatory -- we are not processing any data on this call, only retrieving from the db. The InsertionMode option defines how our return data should be handled in the View. In this case, we want it to replace the current "insert" partial view, so we choose "replace". Lastly, we define the element where we want our partial view to be inserted, our named "partialDiv".

At this point, the only thing missing is the action for our ajax-call.

[HttpGet]
public PartialViewResult GetUpdatePartial(int id)
{
  var record = db.tblProfile.Single(r => r.profileid == id);

  return PartialView("UpdatePartialView", record);
}

This action uses the profileid from the "edit" ajax-link to retrieve its record from the db, and then we're returning the partial view with the record as its model. The result should be that this partial view will now be inserted into our "partialDiv", replacing the initial "insert" partial view.

Here are the other actions if you want them:

[HttpPost]
public ActionResult InsertNewRecord(MyModel model)
{
  if (model.IsValid)
  {
    db.tblProfile.Add(model);
    db.SaveChanges();
  }

  return RedirectToAction("Index");
}

---

public ActionResult UpdateRecord(MyModel model)
{
  if (model.IsValid)
  {
    db.Entry(model).State = EntityState.modified;
    db.SaveChanges();
  }

  return RedirectToAction("Index");
}

Hope that helps