Question

I have two models : Category and Picture which refers to two tables, Categories and Pictures respectively. The Category model has a navigation property to Picture model.

Now, I created a controller using Scaffolding feature with CRUD operations for Category. Following is the code :-

public ActionResult Create()
{
    ViewBag.ParentCategoryId = new SelectList(db.Categories, "Id", "Name");
    ViewBag.PictureId = new SelectList(db.Pictures, "Id", "PictureUrl");
    return View();
}

The automatically generated controller actions uses SelectList for listing the available Picture entries in the database and passes it down to dropdownlist for selection. This is not the ideal scenario since what I want is to unable the user to upload the Picture and then the reference is added to Category model. Later, the entries are saved to Categories and Pictures table.

Answer 1

First of all, I would like to thank @NickLarsen for making me believe that my understanding is good and i can achieve the task myself.

The problem was not that too tough but since i was new to Asp.net MVC, things were bit baffling. From the very start, I had the notion that i will be needing a ViewModel merging Category and Price classes and then a picture uploading API. But, somehow I wasn’t able to fit the pieces in right place. Therefore after various regression and research over the internet, I achieved the task in following manner :-

• First of all, I created a ViewModel

  public class CatPicView
  {
      public Category Category { get; set; }
      public Picture Picture { get; set; }
  }
  

• Second, I added the Uploadify javascript API

  <script type="text/javascript">
      $('#file_upload').uploadify({
          'uploader': '@Url.Content("~/uploadify/uploadify.swf")',
          'script': '@Url.Action("Upload", "Category")',
          'cancelImg': '@Url.Content("~/uploadify/cancel.png")',
          'buttonText': 'Upload',
          'folder': '@Url.Content("~/content/images")',
          'fileDesc': 'Image Files',
          'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
          'auto': true,
          'onComplete': function (event, ID, fileObj, response, data) {
                  var json = jQuery.parseJSON(response);
                  $("#pictureImage").html("<img src='"+json+"' alt='"+json+"' height='100px' width='100px'/>");
                  $("#Picture_PictureUrl").val(json);
                  $("#pictureRemove").show();
              }
          });
  </script>
  

• Hooked the API to following Server Function for renaming and saving to folder

  [HttpPost]
  public ActionResult Upload(HttpPostedFileBase fileData)
  {
      if (fileData != null && fileData.ContentLength > 0)
      {
          //var fileName = Server.MapPath("~/Content/Images/" + Path.GetFileName(fileData.FileName));
          int pictureCount = 800000;
          pictureCount += db.Pictures.Count();
          string extension = Path.GetExtension(fileData.FileName);
          string renamedImage = Server.MapPath("~/Content/Images/Categories/cat" + pictureCount + extension);
          fileData.SaveAs(renamedImage);
          return Json("/Content/Images/Categories/" + Path.GetFileName(renamedImage));
      }
      return Json(false);
  }
  

• And at last, rewrote the Category create Function as below for saving changes to DB

  [HttpPost]
  public ActionResult Create(CatPicView catPic)
  {
      if (ModelState.IsValid)
      {
          if (!String.IsNullOrEmpty(catPic.Picture.PictureUrl))
          {
              Picture picture = new Picture();
              picture.PictureUrl = catPic.Picture.PictureUrl;
              db.Pictures.Add(picture);
              catPic.Category.PictureId = picture.Id;
          }
          db.Categories.Add(catPic.Category);
          db.SaveChanges();
          return RedirectToAction("Index");
      }
      return View();
  }