MVC 5 - Edit View Multiple Actions

manikandan r

9y1.6k.NET

I have implemented CRUD functionality in ASP.NET MVC5 application.

In my Edit View, I have few text input fields and a upload file button.

My Question is with my Upload file and Save Button. How do i achieve both inputs and upload file in same actionresult? Let me know any other good coding practice to achieve this.

Below is my Edit ActionResult:

[HttpGet]         public ActionResult Edit(int? id)         {             if (id == null)                 return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);                 Product product = objDBContext.Products.Find(id);                 if (product == null)                       return HttpNotFound();                 else                     return View(product);         }

 [HttpPost]        public ActionResult Edit(HttpPostedFileBase file)        {            try            {                if (file.ContentLength > 0)                {                    var fileName = Path.GetFileName(file.FileName);                    var path = Path.Combine(Server.MapPath("~\\App_Data\\Images"), fileName);                    file.SaveAs(path);                }                ViewBag.Message = "Upload successful";                return RedirectToAction("Index");            }            catch            {                ViewBag.Message = "Upload failed";                return RedirectToAction("Uploads");            }        }

Maintaining the upload button in Edit View itself as below:

<div class="form-group">             @Html.Label("Upload Image", new { @class = "control-label col-md-2" })             <fieldset>                 <div class="editor-field">                     @Html.TextBox("file", "", new { type = "file" })                 div>                 <div class="editor-field">                     <input type="submit" value="Upload" />                 div>             fieldset>         div>

<div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="submit" value="Save" class="btn btn-default" />             div>         div>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

manikandan r9y ago
to make it clear. attached my Edit view for your reference.

What would be the Code for upload button and Save Button?

Both the buttons are in same view. In the Save button i am capturing image URL also in the database.

Let me know for More questions.
manikandan r9y ago
Hi,
What is the return type of this action result? i need to savechanges to database before i return the view?

Please send the Code for Edit including save changes.

Note - We are Saving the inputs (2 textboxes and 1 image column) during edit into the database single table . So the Edit ActionResult should by accepting input fields and upload image url changes.
Manas Mohapatra9y ago
Try like below:

Add below code in view:
<form action="/profile/Edit"  method="post" enctype="multipart/form-data">

    <label for="photo">Photo:label>
    <input type="text" name="inputRole" id="inputRole" />
    <input type="file" name="photo" id="photo" />

    <input type="submit" value="Upload" />
form>

Add following code in Controller's action
public ActionResult Edit(FormCollection data)
{
     String roleValue1 = formCollection["inputRole"]; // inputRole is name attribute of text box

     HttpPostedFileBase photo = Request.Files["photo"]; // photo is name attribute of upload control

    if(photo != null && photo.ContentLength > 0)
    {
        var fileName = Path.GetFileName(photo.FileName);
        photo.SaveAs(Path.Combine(directory, fileName));
    }
}