Populating dropdownlist with selectlist in ViewData

Question

I am trying to populate an HTML.Dropdownlist with a selectlist which is populated with a string value (a location address) and text (a location description) fields from a database call. I am passing the selectlist as viewdata to my view. The dropdown populates fine but when I go to use the value it is null or empty as seen by an alert I put in my javascript function. Here is the code Any ideas why "this.locations.value" is null:

My View code:

<script type="text/javascript">

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;


    function setDirections(fromAddress, toAddress, locale) {

        alert(toAddress);
        gdir.load("from: " + fromAddress + " to: " + toAddress,
        { "locale": locale });
    }

</script>

      <div id="maincontent2">
      <form action="#" onsubmit="setDirections(this.from.value, this.locations.value, 'en_US'); return false">

        <table>
        <tr><th align="left">From:&nbsp;</th>

        <td align="left" ><input type="text" id="fromAddress" name="from" size="35px"
        value="King of Prussia, PA"/></td>
        <th align="left">&nbsp;&nbsp;To:&nbsp;</th>
        <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td>
        </tr>
        <tr>
        <td></td>
        <td align="left">
        <br />
        <input name="submit" type="submit" value="Get Directions!" />
        </td>
        </tr>
        </table>
        <table>
        <tr>
        <td valign="top"><div id="drv_directions" style="width: 250px"></div></td>
        <td valign="top" style="padding-top:15px"><div id ="map_canvas"></div></td>
        </tr>
        </table>      
     </form>

My Controller Code:

    public ActionResult Directions()
    {
        uls_dbDataContext ulsdb_dc = new uls_dbDataContext();

        ViewData["OfficeLocations"] = new SelectList(ulsdb_dc.GetOfficeLocations(),"location_address", "location_name");

        ViewData["Title"] = "Directions";

        return View();
    }

Answer 1

Locations is a select and doesn't have a value property. To get the value of the selected option you need to use the selected index, find the correct option, and reference the value of the option. If you use jQuery you can, however, it will get the value of a select using the val() method of the jQuery object. I suggest jQuery since it will make the code simpler and MS will be supporting it with Visual Studio.

Example using jQuery:

<script type='text/javascript'>
    $(document).ready( function() {
       $('form').submit( function() {
          var fromAddress = $(this).find('#from').val();
          var toAddress = $(this).find('#locations').val();
          var locale = 'en-US';

          ....
          return false;
       });
    });
</script>

  <form action="#">

    <table>
    <tr><th align="left">From: </th>

    <td align="left" ><input type="text" id="fromAddress" name="from" size="35px"
    value="King of Prussia, PA"/></td>
    <th align="left">  To: </th>
    <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td>

    ...

Answer 2

Here is the code now working:

<script type="text/javascript">

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function setDirections(fromAddress, toAddress, locale) {

        gdir.load("from: " + fromAddress + " to: " + toAddress,
        { "locale": locale });
    }

    $(document).ready(function() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            gdir = new GDirections(map, document.getElementById("drv_directions"));
            GEvent.addListener(gdir, "load", onGDirectionsLoad);
            GEvent.addListener(gdir, "error", handleErrors);

            setDirections("King of Prussia", "1302 Conshohocken Road, Conshohocken, PA 19428", "en_US");
        }
        $('form').submit(function() {
            var fromAddress = $(this).find('#from').val();
            var toAddress = $(this).find('#locations').val();
            var locale = 'en-US';
            alert(fromAddress);
            alert(toAddress);
            setDirections(fromAddress, toAddress, locale);
            return false;
        });

    });

</script>