Post values from modal dialog partial view to controller

Question

I have a view name "Edit":

@model EMMS.ViewModels.MaintenanceViewModel

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset style="width: 800px;">
        <legend>Maintenance Details</legend>
        <div class="editor">
            @Html.LabelFor(model => model.EquipmentID)
            @Html.TextBoxFor(model => model.EquipmentID, new { style = "width: 200px;" })
            @Html.ValidationMessageFor(x => x.EquipmentID)
        </div>
    </fieldset>
    <div id="dialog-validate-user" style="display: none;">
        @Html.Partial("_ValidateUser")
    </div>
}

It contains a jquery UI dialog that populates with the partial view below:

@{
    ViewBag.Title = "_ValidateUser";
}

<h3>User Verification Required</h3>
<p>Please enter your network login credentials.</p>
@using (Html.BeginForm("Edit", "Maintenance", FormMethod.Post)) {
    <div>
        <p>
            <span>User Name:</span>
            @Html.TextBox("UserName")
        </p>
        <p>
            <span>Password:</span>
            @Html.Password("Password")
        </p>
    </div>
}

I want to pass the values of the UserName and Password inputs back to the Maintenance controller's edit (post) actionresult. The action result looks like this:

[HttpPost]
public ActionResult Edit(MaintenanceViewModel maintenanceViewModel, string UserName, string Password)
{
}

When I breakpoint the ActionResult, UserName and Password are always null. They are not part of a viewmodel, just parameters i need to pass to the edit method.

Any help is appreciated

Answer 1

Important:

When you use jQuery UI dialog on that div, it's removing it from the form. That is why they are null.

You can see in my jsFiddle here.

If I were you, I would separate out the forms so they aren't nested.

Edit View:

@model EMMS.ViewModels.MaintenanceViewModel

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset style="width: 800px;">
        <legend>Maintenance Details</legend>
        <div class="editor">
            @Html.LabelFor(model => model.EquipmentID)
            @Html.TextBoxFor(model => model.EquipmentID, new { style = "width: 200px;" })
            @Html.ValidationMessageFor(x => x.EquipmentID)
        </div>
    </fieldset>
}
<div id="dialog-validate-user" style="display: none;">
     @Html.Partial("_ValidateUser")
</div>

_ValidateUser Partial:

@{
    ViewBag.Title = "_ValidateUser";
}

<h3>User Verification Required</h3>
<p>Please enter your network login credentials.</p>
@using (Html.BeginForm("Login", "Maintenance", FormMethod.Post))
{
    <div>
        <p>
            <span>User Name:</span>
            @Html.TextBox("UserName")
        </p>
        <p>
            <span>Password:</span>
            @Html.Password("Password")
        </p>
    </div>
}

Controller:

[HttpPost]
public ActionResult Login(string UserName, string Password)
{
    // do something here with the login
}

The beauty of MVC is proper separation.

Keep in mind as well, the point of a custom ViewModel is to combine fields such as these.

Additionally:

After getting a little bit more information on what the requirements are, the best possible solution here would be to remove the form on the partial and add the Username and Password to the ViewModel :)