I'm doing an asp.net mvc project and I have an action as below:
public ActionResult RegisterCustomer()
{
ViewBagInput();
ViewBag.ProvinceId = new SelectList(db.Province, "ID", "Title");
if (User.Identity.Name != null)
{
var user = db.Users.SingleOrDefault(u => u.Username == User.Identity.Name);
Role.RoleTitle = user.Roles.RoleTitle;
DataLayer.ViewModels.User.FullName = user.FirstName + " " + user.LastName;
}
return View();
}
this action returns the below view and sends the "ViewBag.ProvinceId" to this view(this viewbag sends the list of provinceID an ProvinceTitle to this view for showing in DropDownList for province that the Id of this dropdown is "ProvinceId"):
@using (Ajax.BeginForm("RegisterCustomer", "Customer", FormMethod.Post, new AjaxOptions()
{
OnSuccess = "success",
UpdateTargetId = "listUsers"
},
new { @Id = "theform" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="form-group has-feedback">
@Html.EditorFor(model => model.identificationNo, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.identificationNo) } })
@Html.ValidationMessageFor(model => model.identificationNo, "", new { @class = "text-danger" })
</div>
<div class="form-group has-feedback">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.FirstName) } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
<div class="form-group has-feedback">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.LastName) } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.DropDownList("ProvinceId", null, "- choose a province- ", htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.ProvinceId, "", new { @class = "text-danger" })
</div>
<div class="form-group has-feedback" id="divcities">
@Html.DropDownListFor(model => model.CityId, Enumerable.Empty<SelectListItem>(), "- choose a city -", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CityId)
</div>
}
And I have below jquery in this view :
@section Scripts{
<script type="text/javascript">
$(function() {
$("#ProvinceId").change(function() {
debugger;
$.ajax({
url: "/Customer/GetCities",
data: { stateid: $("#ProvinceId").find(":selected").val() },
type: "Post",
dataType: "Html",
success: function(result) {
$("#divcities").html(result);
},
error: function() {
alert("error!");
}
});
});
});
</script>
This jquery calls below action:
public ActionResult GetCities(int stateid)
{
ViewBag.CityId = new SelectList(db.City.Where(p => p.ProvinceID == stateid), "ID", "Title");
return PartialView("CityPartialViewForCustomer");
}
and this action returns below partialview:
@model DataLayer.ViewModels.CustomerViewModel
<div class="control">
@Html.DropDownList("CityId", null, "- Choose a City ... -", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CityId)
</div>
My first problem is that these place holders won't let me to type in this DropDownList and DropDownListFor and how can I solve this problem? The second problem and most important problem is that the DropDownList and DropDownListFor are not searchable.How can I solve this?