I have a partial view that has something like this
<%= Html.DropDownListFor(m => m.SelectedProductName, Model.ProductList, "Select a Product") %>
Now you can create a new product and edit an existing product. Both editing and creating use the same form. The create is on the main page on load up. Edit pops up in a jQuery UI model dialog and renders a new partial view.
So as far as the page is concerned I have 2 dropdown boxes with the same "id" which is bad since they should be unique. So how do I change the id? So when the edit loads it might have a id of "editSelectedProductName"?
I tried to do this in the view model
public string SelectedProductName{ get; set; }
ViewModelConstructor()
{
SelectedProductName = "EditSelectedProductName";
}
But it seems to not care and keeps using "SelectedProductName" as the product name
The DropDownList is generated using the Html. DropDownListFor Html Helper method. The first parameter is the Lambda expression for specifying the property that will hold the Selected Value of the DropDownList when the Form is submitted.
I can't find the documentation at the moment, but there is an overload for DropDownListFor that will accept an object-typed collection of attributes (HtmlAttributes is the parameter name.)
It will look something like this:
Html.DropDownListFor(model=>model.SomeProperty, new {@id="UniqueID1234"});
You can use Intellisense to find the overload that includes HtmlAttributes.
You can use a hardcoded jQuery:
$('select#[id of your select box]').attr('id', '[id that you want]');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With