ASP.NET MVC 4 Multiple Post via Different Forms

asp.net MVC 4 multiple post via different forms

In an MVC view, you can have as many forms with as many fields as you need. To keep it simple, use a single view model with all the properties you need on the page for every form. Keep in mind that you will only have access to the form field data from the form that you submit. So, if you have a login form and registration form on the same page you would do it like this:

LoginRegisterViewModel.cs

public class LoginRegisterViewModel {
    public string LoginUsername { get; set; }
    public string LoginPassword { get; set; }

    public string RegisterUsername { get; set; }
    public string RegisterPassword { get; set; }
    public string RegisterFirstName { get; set; }
    public string RegisterLastName { get; set; }
}

YourViewName.cshtml

@model LoginRegisterViewModel

@using (Html.BeginForm("Login", "Member", FormMethod.Post, new {})) {

    @Html.LabelFor(m => m.LoginUsername)
    @Html.TextBoxFor(m => m.LoginUsername)

    @Html.LabelFor(m => m.LoginPassword)
    @Html.TextBoxFor(m => m.LoginPassword)

    <input type='Submit' value='Login' />

}

@using (Html.BeginForm("Register", "Member", FormMethod.Post, new {})) {

    @Html.LabelFor(m => m.RegisterFirstName)
    @Html.TextBoxFor(m => m.RegisterFirstName)

    @Html.LabelFor(m => m.RegisterLastName)
    @Html.TextBoxFor(m => m.RegisterLastName)

    @Html.LabelFor(m => m.RegisterUsername)
    @Html.TextBoxFor(m => m.RegisterUsername)

    @Html.LabelFor(m => m.RegisterPassword)
    @Html.TextBoxFor(m => m.RegisterPassword)

    <input type='Submit' value='Register' />

}

MemberController.cs

[HttpGet]
public ActionResult LoginRegister() {
     LoginRegisterViewModel model = new LoginRegisterViewModel();
     return view("LoginRegister", model);
}

[HttpPost]
public ActionResult Login(LoginRegisterViewModel model) {
 //do your login code here
}

[HttpPost]
public ActionResult Register(LoginRegisterViewModel model) {
 //do your registration code here
}

---

Do not forget, when calling BeginForm, you pass the Controller name without "Controller" attached:

@using (Html.BeginForm("Login", "Member", FormMethod.Post, new {}))

instead of:

@using (Html.BeginForm("Login", "MemberController", FormMethod.Post, new {}))

Handling multi-forms in one View in ASP.NET MVC 4

Your anchor tag's id has a capitol L on Link, while your jquery selector uses lower case. I believe selectors are case sensitive.

Multiple forms on mvc4 page, submit one form

I did some changes to make this code work!

1) Change the controller/view to Render each UserInfo as a strongly typed partial view:

// This method will receive an info to process, so the model binder will build the model    back in the server correctly
[HttpPost]
public ActionResult Index(Info userInfo)
{
  return RedirectToAction("Index");
}

// This method will render a partial view for a user info
[ChildActionOnly]
public ActionResult GetUserInfo(Info userInfo)
{
  return PartialView("_UserInfo", userInfo);
}

2) Change the view to render a partial view for each user info in the repository:

@model MVCFormsSubmitting.Models.FormsRepository
@{
   ViewBag.Title = "Index";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
@for (int i = 0; i < Model.UserInfo.Count; i++)
{
  {Html.RenderAction("GetUserInfo", Model.UserInfo[i]);}
}

3) Create a Partial view to render an user info "_UserInfo":

@model MVCFormsSubmitting.Models.Info

@using (Html.BeginForm("Index", "Forms", FormMethod.Post, new { id = "Form" + @Model.Id, name = "Form" + @Model.Id }))
{
  <b>@Html.EditorFor(m => m.Name)</b>
  <input id="button_@Model.Id" name="button_@Model.Id" type="submit" class="left btn btn- primary" value="Ret navne">
  <br/>
}

Working with Multiple forms in MVC4

Create a Javascript that checks if any of the required values in form 1 is set. If so, set focus on whatever element you want in form 2. Here's an example:

The html forms:

<form id="one">
    <input type="text" id="requiredFormField" value="some value previously entered" />
</form>
<form id="two">
    <input type="text" id="form2text" />
</form>

And the javascript:

$(document).ready(setFocusIfForm1Completed());
function setFocusIfForm1Completed()
{
    var expectedValue = $("#requiredFormField").val();
    if(expectedValue.length > 0)
    {
        $("#form2text").focus();
    }
}

I should add that I assume that you fill in form 1, then you submit (do a POST request to the server) which does some work, and then returns the same view but with at least some required value from form 1 populated (otherwise, this solution breaks).

MVC 4 - Pass Multiple forms to Controller Action from View using jQuery

Html wasn't designed for such things and, generally speaking, you're trying to break incapsulation. Nevertheless, assuming you're know what you are doing, the possible solution for this requirement may be manual population of javascript object (for POST) or concatination of query parameters (for GET) and submission of the result.

Here is an example how to do that: Merge values from two forms on submit

---

Related Topics