Multiple forms in one view page

Question

I'm working on an application that handles employee's profile.

I have 3 forms (all in the same controller) in a single view page, but it only saves the 1st form. And when i save the 2nd form, it clears the values of the 1st and 3rd form.

Here is my code:

Views/EMPs/Index:

@using (Html.BeginForm("Edit", "EMPs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="personalsubmit" class="btn btn-success" />
        </div>
    </div>
}

@{ Html.RenderAction("Index", "EMP_REFERENCE", new { id = Model.eMP.lineno });}

@using (Html.BeginForm("Edit", "EMPs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="jobsubmit" class="btn btn-success" />
        </div>
    </div>
}

 @{ Html.RenderAction("Index", "EMP_BENEFITS", new { id = Model.eMP.lineno });}

@using (Html.BeginForm("Edit", "EMPs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="otherssubmit" class="btn btn-success" />
        </div>
    </div>
}

EMPsController

 public ActionResult Edit([Bind(Include = "lineno,EMPNO,IDNO..")] EMP eMP)
        {
            if (ModelState.IsValid)
            {
                if (Request.Form["personalsubmit"] != null)
                {
                    db.Entry(eMP).State = EntityState.Modified;
                    db.SaveChanges();

                }
                if (Request.Form["jobsubmit"] != null)
                {
                    db.Entry(eMP).State = EntityState.Modified;
                    db.SaveChanges();

                }
                if (Request.Form["otherssubmit"] != null)
                {
                    db.Entry(eMP).State = EntityState.Modified;
                    db.SaveChanges();

                }

                return Redirect(Request.UrlReferrer.PathAndQuery);
            }
            return View(eMP);
       }

I couldn't put them all in one form, because i used an ajax beginForm between them for another crud method. Since I've read that nested forms are not recommended.

Is there a way to save one form without it clearing the values of the other forms?

score 1 · Answer 1 · answered Mar 12 '20 at 04:15

Is there a way to save one form without it clearing the values of the other forms?

You could simply use ajax.beginform for each of those forms; How to use Simple Ajax Beginform in Asp.net MVC 4?
Or you could make your own ajax implementation https://www.c-sharpcorner.com/blogs/using-ajax-in-asp-net-mvc
Or you could just go ahead and bind everything on your model;

// don't need to specify which properties to bind, all of the available properties in your view will be bound to the model on POST
public ActionResult Edit(EMP eMP)
{
   if(eMP.FirstName!=null ...){
      // ... do some checking depending on what values are submitted
   }
   // save profile here
   // when you return the view
   return View(eMP);
}

but for this method you need to only have 1 form for Personal,Job, and Others.


@{ Html.RenderAction("Index", "EMP_REFERENCE", new { id = Model.eMP.lineno });}

@{ Html.RenderAction("Index", "EMP_BENEFITS", new { id = Model.eMP.lineno });}

@using (Html.BeginForm("Edit", "EMPs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <!--put all your employee input fields here-->
    <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="submit" class="btn btn-success" />
        </div>
    </div>

   <!--put all your job input fields here-->
   <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="submit" class="btn btn-success" />
        </div>
    </div>

    <!--put all your others input fields here-->
    <div class="form-group">
        <div class="pull-right">
            <input type="submit" value="Update" name="submit" class="btn btn-success" />
        </div>
    </div>
}

Thank you for the suggestions, but i couldn't use just one form for the Personal, Job and Others since the RenderAction inbetween those forms are the ajax beginForm (it will then be a nested form), also, it would rearrange their order category — Athena, Mar 12 '20 at 05:20
@AthenaLouisePaz the only way I could think of is 1 & 2, through ajax. — Jerdine Sabio, Mar 12 '20 at 05:24
@Athena Cool, goodluck. If you're impeded, be sure to include your full view code (html). — Jerdine Sabio, Mar 12 '20 at 05:56

Multiple forms in one view page

1 Answers1