MVC3 Share DropDownList or Hidden value with multiple forms

Question

I have a jQuery dialog that holds multiple tabs, each tab contains a form, and the jQuery dialog contains a DropDownList with a "global" value that will be shared across all the tabs/forms.

The key is "Site", which is set either by a hidden field or by a drop down list depending on the result from the controller.

This is probably a very trivial task but I can't figure out how to do it (Still new to MVC3, JavaScript and web programming in general). I could grab the value in JavaScript by doing var value = $('#Site').val(); but I don't know how to send it to the controller since I can't save JS variables in C# variables but only vice versa. I use this command to submit the form: $('#' + tabid).submit();

Code:

<div id='jquery-dialog' title="Create new">

  @if (ViewBag.SiteList == null)
  {
    @Html.Hidden("Site", Request.Params["ForSite"])
  }
  else
  {
    @Html.DropDownList("Site", (SelectList)ViewBag.SiteList)
  }

  <div id="tabs">
    <ul>
      <li><a href="#tab0">Tab 0</a></li>
      <li><a href="#tab1">Tab 1</a></li>
    </ul>

    @using (Ajax.BeginForm("Create", null, new AjaxOptions() { HttpMethod = "POST" }, new { id = "tab0" }))
    {
      <div id="tab0">
        This is Tab 0
      </div>
    }

    @using (Ajax.BeginForm("Create", null, new AjaxOptions() { HttpMethod = "POST" }, new { id = "tab1" }))
    {
      <div id="tab1">
        This is Tab 1
      </div>
    }
  </div>
</div>

If I understood your question correctly this should help: http://stackoverflow.com/questions/4977858/pass-a-parameter-to-a-controller-using-jquery-ajax — JTMon, Jul 31 '12 at 09:32
Almost, but what I'm doing is adding an extra value to a form that I'm about to submit. Got it now though, thanks! :) — Shahin Dohan, Jul 31 '12 at 10:06

Marian Ban · Accepted Answer · 2012-07-31T10:08:41.493

1

You can do it with javascript. First, create a hiddenfield inside your form tags:

@using (Ajax.BeginForm("Create", null, new AjaxOptions() { HttpMethod = "POST" }, new { id = "tab0" }))
    {
      <div id="tab0">
        <input id="tab0Value" name="tab0Value" type="hidden" value="">
        This is Tab 0
      </div>
    }

Then when your submit button is clicked (before the form is sent) get the value from the dropDownList and set it to the hidden field:

var value = $('#Site').val();
$("#tab0Value").val(value);

edited Jul 31 '12 at 10:08

answered Jul 31 '12 at 09:56

Marian Ban

8,158
1
32
45

1

Thanks, it worked! one minor correction though: you need to set the "name" parameter in the hiddenfield or else the controller won't catch it: `` – Shahin Dohan Jul 31 '12 at 10:05
@ShahinDohan Thnaks, the name attribute was added. – Marian Ban Jul 31 '12 at 10:10

MVC3 Share DropDownList or Hidden value with multiple forms

1 Answers1