Question

I have a cshtml form where I am inputting a title and text, and what I wish to achieve is that if everything is valid, ie the data entry was successful, I display an image panel, and get the ID of the new entry so that I can use it inside the image panel.

At the moment I have the following :-

Controller :-

[HttpPost]
public ActionResult Create(Project project)
{
  var model = new CompositeImageModel(0);
  if (ModelState.IsValid)
  {
    model = new CompositeImageModel(project.ProjectID);
    ViewBag.ProjectID = project.ProjectID;
    db.Projects.Add(project);
    db.SaveChanges();

    return RedirectToAction("Index");
  }

  ViewBag.ProjectID = 0;

  return View(model);
}

CSHTML:=

<script type="text/javascript">
$(document).ready(function () {
  var imageList = $('#imageList'),
      submitButt = $('#submitButt');

  //hide the imageList initially
  imageList.hide(); //hide all but the first paragraph

  //when the user clicks on the create button, display the imageList
  submitButt.click(function () {
    imageList.fadeIn('slow');
  });
});
</script>

@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)

  <fieldset>
    <legend>Project</legend>

    <div class="editor-label">
      @Html.LabelFor(model => model.projectModel.ProjectTitle)
    </div>
    <div class="editor-field">
      @Html.TextBoxFor(model => model.projectModel.ProjectTitle, new { style = "width:460px" })
      @Html.ValidationMessageFor(model => model.projectModel.ProjectTitle)
    </div>

    <div class="editor-label">
      @Html.LabelFor(model => model.projectModel.ProjectText)
    </div>
    <div class="editor-field">
      @Html.TextAreaFor(model => model.projectModel.ProjectText, new { cols = 55, @rows = 5 })
      @Html.ValidationMessageFor(model => model.projectModel.ProjectText)
    </div>

    <div id='submitButt'>
      <input type="submit" value="Create" />
    </div>
  </fieldset>
}

<div id='imageList'>
  <h2>Upload Image(s)</h2>

  @{ Html.RenderPartial("~/Views/File/ImageUpload.cshtml", new MvcCommons.Models.CompositeImageModel((int)ViewBag.ProjectID)); }

</div>
<div>
  @Html.ActionLink("Back to List", "Index")
</div>

My idea was to check for the ModelState.IsValid inside the jQuery script, and if Is.Valid, then display the imagePanel and retrieve the ProjectID inside the ViewBag.

However I am not sure how to retrieve this, and if after all its the best idea, or maybe there is a better idea out there.

Thanks for your help and time

Answer 1

At the end I went for Unobtrusive Ajax, after seeing this excellent tutorial