CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3jquery-validateunobtrusive-javascript
Hcabnettek
Hcabnettek

Reputation: 12928

Html.ValidationMessageFor in partial view(ASP.NET MVC3)

Currently I have a partial view with a textbox and a ValidationMessageFor. This works fine and the message displays as expected when the input is not valid. I'm doing a little HTML refactoring and I want to bump up the validationMessageFor up to the view that currently contains the partial view. I almost have it working correctly but there is a couple of snags. 

@Html.ValidationMessageFor(m => m.Mileage, string.Empty, new { id = "spanMileageError", @class = "mileageErrorSpanClass" })

The model for this view is a vehicle object. The model for the partialView is a slightly different object

@Html.TextBoxFor(v => v.Vehicle.Mileage, new { placeHolder = mileagePlaceHolderText, id = Model.TextBoxId, maxlength = "7", @class="mileageTextBoxClass" })

This configuration gives a name to the textbox ("Vehicle.Mileage") but the Validation attribute ("data-valmsg-for") is equal to "Mileage" and not "Vehicle.Mileage".

How can I correct the ValidationMessageFor helper to emit the correct HTML to make this validation work?

Here is the rendered HTML of the current view prior to the HTML refactor

<input type="text" value="" placeholder="Enter Mileage" name="Vehicle.Mileage"     maxlength="7" id="textBoxMileage" data-val-range-min="1" data-val-range-max="999999" data-    val-range="Mileage must be a valid number between 1 and 999,999." data-val-number="The     field Mileage must be a number." data-val="true" class="mileageTextBoxClass input-    validation-error" autocomplete="off">

<span id="spanMileageError" data-valmsg-replace="true" data-valmsg-for="Vehicle.Mileage" class="mileageErrorSpanClass field-validation-error"><span htmlfor="textBoxMileage" generated="true" class="">Mileage must be a valid number between 1 and 999,999.</span></span>

And here is the HTML after the refactor

<input type="text" value="" placeholder="Enter Mileage" name="Vehicle.Mileage" maxlength="7" id="textBoxMileage" data-val-range-min="1" data-val-range-max="999999" data-val-range="Mileage must be a valid number between 1 and 999,999." data-val-number="The field Mileage must be a number." data-val="true" class="mileageTextBoxClass placeholder" autocomplete="off">
<span id="spanMileageError" data-valmsg-replace="true" data-valmsg-for="Mileage" class="field-validation-valid mileageErrorSpanClass"></span>

Notice the span is missing the inner span element that used to be present. Can anyone help me correct the problem here?

Thanks for any tips and tricks or possible solutions. Cheers,
~ck in San Diego

Upvotes: 0

Views: 9479

Answers (2)

David Glenn
David Glenn

Reputation: 24522

You could just use Html.TextBox() instead

@Html.TextBox("Mileage", Model.Vehicle.Mileage, new { placeHolder = mileagePlaceHolderText, id = Model.TextBoxId, maxlength = "7", @class="mileageTextBoxClass" })

Upvotes: 1

Davidson Sousa
Davidson Sousa

Reputation: 1353

I am a bit new to MVC but why not use the same model? Like this:

@model ProjectNamespace.Models.Vehicle

or like this:

@using ProjectNamespace.Models.Vehicle

I guess you could achieve the results you want.

Upvotes: 0

Related Questions