views:

7704

answers:

5

Given the following classes and controller action method:

public School
{
  public Int32 ID { get; set; }
  publig String Name { get; set; }
  public Address Address { get; set; }
}

public class Address
{
  public string Street1 { get; set; }
  public string City { get; set; }
  public String ZipCode { get; set; }
  public String State { get; set; }
  public String Country { get; set; }
}

[Authorize(Roles = "SchoolEditor")]
[AcceptVerbs(HttpVerbs.Post)]
public SchoolResponse Edit(Int32 id, FormCollection form)
{
  School school = GetSchoolFromRepository(id);

  UpdateModel(school, form);

  return new SchoolResponse() { School = school };
}

And the following form:

<form method="post">
  School: <%= Html.TextBox("Name") %><br />
  Street: <%= Html.TextBox("Address.Street") %><br />
  City:  <%= Html.TextBox("Address.City") %><br />
  Zip Code: <%= Html.TextBox("Address.ZipCode") %><br />
  Sate: <select id="Address.State"></select><br />
  Country: <select id="Address.Country"></select><br />
</form>

I am able to update both the School instance and the Address member of the school. This is quite nice! Thank you ASP.NET MVC team!

However, how do I use jQuery to select the drop down list so that I can pre-fill it? I realize that I could do this server side but there will be other dynamic elements on the page that affect the list.

The following is what I have so far, and it does not work as the selectors don't seem to match the IDs:

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address.Country").fillSelect(data);
  });
  $("#Address.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address.State").fillSelect(data);
    });
  });
});
+32  A: 

From Google Groups:

Use two backslashes before each special character.

A backslash in a jQuery selector escapes the next character. But you need two of them because backslash is also the escape character for JavaScript strings. The first backslash escapes the second one, giving you one actual backslash in your string - which then escapes the next character for jQuery.

So, I guess you're looking at

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address\\.Country").fillSelect(data);
  });
  $("#Address\\.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address\\.State").fillSelect(data);
    });
  });
});

Also check out How do I select an element by an ID that has characters used in CSS notation? on the jQuery FAQ.

bdukes
Damn you're fast! Thank you!
Hellfire
I wonder what the rationalization is for requiring the developer to do this, it seems like a simple set of heuristics within jQuery would solve this problem, since there isn't anything wrong with ID's with periods in them...
Jason Bunting
If you didn't have to escape, how would you query an element with ID Address and class State (granted that if you know the ID you aren't adding much by specifying the class, but it should still be valid, I'd think)?
bdukes
For that reason, in CSS itself, you must escape a dot in an ID, too. All jQuery is doing is requiring you to follow the rules set out by CSS.
bdukes
You could also select by name instead of ID. For example, $('[name="Address.Country"]')
Funka
A: 

Just additional information: Check this ASP.NET MVC issue #2403.

Until the issue is fixed, I use my own extension methods like Html.TextBoxFixed, etc. that simply replaces dots with underscores in the id attribute (not in the name attribute), so that you use jquery like $("#Address_Street") but on the server, it's like Address.Street.

Sample code follows:

public static string TextBoxFixed(this HtmlHelper html, string name, string value)
{
    return html.TextBox(name, value, GetIdAttributeObject(name));
}

public static string TextBoxFixed(this HtmlHelper html, string name, string value, object htmlAttributes)
{
    return html.TextBox(name, value, GetIdAttributeObject(name, htmlAttributes));
}

private static IDictionary<string, object> GetIdAttributeObject(string name)
{
    Dictionary<string, object> list = new Dictionary<string, object>(1);
    list["id"] = name.Replace('.', '_');
    return list;
}

private static IDictionary<string, object> GetIdAttributeObject(string name, object baseObject)
{
    Dictionary<string, object> list = new Dictionary<string, object>();
    list.LoadFrom(baseObject);
    list["id"] = name.Replace('.', '_');
    return list;
}
gius
A: 

how do you escape a space in the name? for example if the id="left side" How would you escape the space between "left" and "side" so jquery can select this element?

This is really another question, not an answer.
Sohnee
+5  A: 

The Release Candidate of ASP.NET MVC that was just released fixed this issue, it now replaces the dots with underscores for the ID attribute.

<%= Html.TextBox("Person.FirstName") %>

Renders to

<input type="text" name="Person.FirstName" id="Person_FirstName" />

For more information view the release notes, starting on page 14.

Dale Ragan
I fail to see how this is a "fix" - why should ASP.NET MVC have to change the ID to something jQuery needs? I think jQuery is where the problem lies, not using a . in an ID.
Jason Bunting
the dot has special meaning in CSS to identify/combine classes, which is why having it in an ID is troublesome. The "problem" is not with jquery.
Funka
+3  A: 

You can't use a jQuery id selector if the id contains spaces. Use an attribute selector:

$('[id=foo bar]').show();

If possible, specify element type as well:

$('div[id=foo bar]').show();
Elliot Nelson
I prefer doing it this way than using the escape characters.... Obviously the best workaround is not to use periods in the id.
GordonB
good tips. I also use these in case of 'foo.bar'
Imrul