I Have been working on this for several days.i,m simply trying to get a couple of Cascading Dropdownlist to work.My dropdownlist for State did not populate.Ajax did not call direct error message alert show what i am doing wrong??
Here is my code
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
[Required]
[Display(Name ="User Name")]
public string UserName { get; set; }
public string Country { get; set; }
public string State { get; set; }
public string Role { get; set; }
public List<SelectListItem> Countries { get; set; }
public List<SelectListItem> States { get; set; }
public void CascadingModel()
{
this.Countries = new List<SelectListItem>();
this.States = new List<SelectListItem>();
}
public int CountryId { get; set; }
public int StateId { get; set; }
}
here is my controller
[AllowAnonymous]
[HttpGet]
public ActionResult Register()
{
RegisterViewModel model = new RegisterViewModel();
model.Countries = PopulateDropDown("SELECT Id, Name FROM Countries", "Name", "Id");
Country_Bind();
//State_Bind();
return View();
}
[HttpPost]
public JsonResult AjaxMethod(string type, int value)
{
RegisterViewModel model = new RegisterViewModel();
switch (type)
{
case "CountryId":
model.States = PopulateDropDown("SELECT Id, Name FROM States WHERE CountryId = " + value, "Name", "Id");
break;
//case "StateId":
// model.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + value, "CityName", "CityId");
// break;
}
ViewBag.State = model;
return Json(model);
}
public void Country_Bind()
{
DataSet ds = dblayer.Get_Country();
List<SelectListItem> countrylist = new List<SelectListItem>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
countrylist.Add(new SelectListItem { Text = dr["Name"].ToString(), Value = dr["Name"].ToString() });
}
ViewBag.Country = countrylist;
}
//public void State_Bind()
//{
// DataSet ds = dblayer.Get_State();
// List<SelectListItem> statelist = new List<SelectListItem>();
// foreach (DataRow dr in ds.Tables[0].Rows)
// {
// statelist.Add(new SelectListItem { Text = dr["Name"].ToString(), Value = dr["Name"].ToString() });
// }
// ViewBag.State = statelist;
//}
// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(int countryId, int stateId)
{
RegisterViewModel model = new RegisterViewModel();
model.Countries = PopulateDropDown("SELECT Id, Name FROM Countries", "Name", "Id");
model.States = PopulateDropDown("SELECT Id, Name FROM States WHERE CountryId = " + countryId, "Name", "Id");
if (ModelState.IsValid)
{
var user = new ApplicationUser { UserName = model.UserName, Email = model.Email};
var result = await UserManager.CreateAsync(user, model.Password);
if (result.Succeeded)
{
UserManager.AddToRole(user.Id, "Candidate");
await SignInManager.SignInAsync(user, isPersistent:false, rememberBrowser:false);
// For more information on how to enable account confirmation and password reset please visit http://go.microsoft.com/fwlink/?LinkID=320771
// Send an email with this link
// string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
// var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
// await UserManager.SendEmailAsync(user.Id, "Confirm your account", "Please confirm your account by clicking <a href=\"" + callbackUrl + "\">here</a>");
return RedirectToAction("Index", "Home");
}
AddErrors(result);
}
//model.Country =Country_Bind();
//model.State = State_Bind();
// If we got this far, something failed, redisplay form
return View(model);
}
here is Register.Cshtml
here is my Register.cshtml
@model Dem4Um_mod.Models.RegisterViewModel
@{
ViewBag.Title = "Register";
}
<h2>@ViewBag.Title.</h2>
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
@Html.ValidationSummary(true,"", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Country, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownList("Country", null, "Please select", new { @class = "form-control" })
@*@Html.DropDownList("Country", (IEnumerable<SelectListItem>)ViewData["Country"], "Please select", new { @class = "form-control" })*@
</div>
</div>
@*<div>
<select id="State" style="width:240px">---Select State---</select>
</div>*@
<div class="form-group">
@Html.LabelFor(m => m.State, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.StateId, new SelectList(string.Empty, "Value", "Text"), "Please select", new { @class = "form-control" })
@*@Html.DropDownListFor(m => m.State, null, "Please select", new { @class = "form-control" })*@
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
//var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("Id");
alert("ddlcountry change");
$.ajax({
type: "POST",
url: "Account/AjaxMethod",
data: '{type: "' + id + '", value: ' + value + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
alert("Nothing Went wrong");
var dropDownId;
var list;
switch (id) {
case "CountryId":
list = response.States;
DisableDropDown("#StateId");
//DisableDropDown("#CityId");
PopulateDropDown("#StateId", list);
break;
//case "StateId":
// dropDownId = "#CityId";
// list = response.Cities;
// DisableDropDown("#CityId");
// PopulateDropDown("#CityId", list);
// break;
}
},
failure: function (response) {
alert("Something Went wrong");
},
error: function (response) {
alert("Everything Went wrong");
}
});
});
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled");
$(dropDownId).empty().append('<option selected="selected" value="0">Please select</option>');
}
function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
}
$(function () {
if ($("#CountryId").val() != "" && $("#Id").val() != "") {
var message = "Country: " + $("#Id option:selected").text();
message += "
State: " + $("#Id option:selected").text();
alert("good work");
}
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
