0

I have a page which list all Countries in a tabular form and view has a model like below:

@model IEnumerable<Country>

On the same page I have a link that allows the user to create a new Country via a modal popup(defined within that page)

<a operation="add" id="btnNewCountry" data-toggle="modal" data-target="#myModal" href="#">Add New Country</a>

Model popup snippet looks like below:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
@using (Html.BeginForm("ManageCountry", "Admin", FormMethod.Post, new { enctype ="multipart/form-data" }))
{
 <label for="module-text">Country Name</label>
 <input type="text" id="txtName" name="name" />

 <button type="submit" class="btn btn-primary">Save changes</button>
}

As soon as the user presses submit button, the control quickly reaches the Controller Action.

Now the challenge is I am not able to figure out how to apply Client Side validation on the CountryName textbox (something like @Html.ValidationMessagefor and Required) on the "Add New Country" Popup as the modal of the page( which is IEnumerable) is different from the Modal Popup (which works only on a single Country Object)

Please help!!

CuriousBuddy
  • 179
  • 1
  • 8
  • 21
  • 1
    Why do you have ` –  Dec 20 '14 at 08:04
  • Thanks Stephen..let me try that..I will get back shortly on this with the results – CuriousBuddy Dec 20 '14 at 09:03
  • Thanks a ton, An absolute solution..Did not know how I cannot thought in that direction. – CuriousBuddy Dec 20 '14 at 09:35
  • One more issue I am seeing is if there are two fields, and I post the form without entering anything in any of them , it shows the ValidationMessage for both, and if I enter the value in any one of them, it post the form without prompting message for other field which is still blank?? – CuriousBuddy Dec 20 '14 at 10:20
  • @CuriousBuddy, You need to post your updated code or ask a new question (and next time you post a message, click on the 'help' button) –  Dec 20 '14 at 11:20
  • @StephenMuecke, I have posted another question with entire code snippet as suggested: [Question Posted](http://stackoverflow.com/questions/27580609/client-side-validation-showing-strange-behavior-on-bootstrap-modal-mvc-view) – CuriousBuddy Dec 20 '14 at 13:57

1 Answers1

0

First of all, you need to make sure that you have included the client-side validation framework to your bundles:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js","));

Then you can use the the [Required] Annotation on your property like this:

[Required]
public string CountryName {get; set;}

And now you can use the:

@Html.ValidationMessageFor(x => x.Model.CountryName)

to show the error message in the view.

EDIT:

If the browser supports HTML5, you can also just use ' required="" ' like this:

<input type="text" name="CountryName" required="">

EDIT:

Based on your comment, I would recommend you to use ViewModels. The simplest approach that requires no mapping, is to make a ViewModel like this:

[Required]
public List<Country> Countires { get; set; }

And in your controller, you can bind your data to the ViewModel Like this:

//This is the call, that returns an IEnumerable
var countries = _repository.GetCountries().ToList();

var viewModel = new ViewModel(){
     Countries = countries,
}

This way you don't work with the EF query directly in the view.

MichaelCleverly
  • 2,473
  • 1
  • 24
  • 33