How to access data in partialview loaded using Ajax

Question

I'm currently building a website where I have to update two separate targets from a single Ajax.BeginForm. I got it working by using an additional container to container the two separate targets. As in:

1. Original Form

   @model Mod1
   @using (Ajax.BeginForm("LoadData", new AjaxOptions{UpdateTargetID = "Div1"}))
   {
     <select id="sel1" name="sel1" onchange="$(this.form).submit">
       // ...
     </select>
   }
   @using (Ajax.BeginForm("ProcessData", new AjaxOptions{UpdateTargetID = "Div2"}))
   {
     <div id="Div1"></div>
       // ...
     <input type="submit" value="GO!" />
   }
   

2. Code File

   public ActionResult LoadData(int sel1)
   {
     // loading data from database
     return PartialView(mod1);
   }
   

3. Partial View

   @model Mod2
   <select id="sel2" name="sel2">
     @foreach (var item in Model.SelectItems)
     {
       <option value="@item.Value">@item.Text</option>
     }
   </select>
   
   @foreach (var item in Model.CheckBoxItems)
   {
     <label>@item.Text<input type="checkbox" id="chk1" name="chk1" value="@item.Value"></label>
   }
   

For the processing method, I have tried:

    public ProcessData(Mod1 mod1, string[] chk1, int sel2)

However I am unable to retrieve the values for either chk1 or sel2 upon form submission. examination of chk1 and sel2 in Debug mode, chk1 is null while sel2 is 0 (no such value in the select options). Can anyone please offer some insight into the reason for this and also how I can go about solving it. Thank you in advance.

Answer 1

If I understand you correctly you can do what you want y having two submit buttons on the same form, each calling a separate action method. That way each submit button will have access to all the fields in the form. For a detailed explanation of how you can do that see my answer here:

How to use ajax link instead of submit button for form?

Edit

In response to comment: the action method LoadData should return a partial view that contains the other two controls and have the whole begin form included in it:

@using (Ajax.BeginForm("LoadData", new AjaxOptions{
                                                UpdateTargetID = "Div1",
                                                InsertionMode = InsertionMode.Replace
                                                  })) 
{
    <select id="sel1" name="sel1" onchange="$(this.form).submit">
    // ...
    </select>
}
<div id="Div1">
</div>
<div id="Div2">
</div>

Move this to another partial view:

    @using (Ajax.BeginForm("ProcessData", new AjaxOptions{UpdateTargetID = "Div2"}))
    {

        // ...
        <input type="submit" value="GO!" />
    }