Develop Reference

Cascading (Dependent) DropDownList using ASP.NET MVC

I have implemented Cascading (Dependent) DropDownList using ASP.NET MVC.
This is the tutorial
Now I need show alert message box after insert data and redirect on Index page in ASP.NET MVC.
To show alert message in ASP.NET MVC after insert data using store procedure from MySQL database, I have write the code like as shown below.
<script type="text/javascript">
$(function () {
var msg = '#ViewData["result"]';
if (msg > 0)
{
alert("User Details Inserted Successfully");
window.location.href = "#Url.Action("Index", "Home")";
}
});
</script>
The data is correctly registered in the database table and the alert message box after insert data it's show.
But the redirect to index.cshtml not working because all the DropDownList on the form are empty except the first DropDownList that populates correctly.
window.location.href = "#Url.Action("Index", "Home")";
I mean that all other (populated cascading) DropDownList are enabled but empty.
I need redirect to Index Action page and being able to reload a new record, with this redirection it is impossible because the populated cascading DropDownList remain empty... instead of disabled and populated from value of first dropdownlist...
How to do resolve this?
Thanks.
Update 2021-01-02
#section Scripts {
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/DatePicker.js");
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(function () {
var msg = '#ViewData["result"]';
console.log(msg);
if (msg > 0)
{
alert("User Details Inserted Successfully");
var url = "#Url.Action("Index", "Home")";
window.location.href = url;
}
});
</script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$.validator.addMethod('date',
function (value, element) {
if (this.optional(element)) {
return true;
}
var ok = true;
try {
$.datepicker.parseDate('dd/mm/yy', value);
}
catch (err) {
ok = false;
}
return ok;
});
$("#thedate").datepicker(options);
$(function () {
$(".loading").hide();
$("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");
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{type: "' + id + '", value: "' + value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var dropDownId;
var list;
switch (id) {
case "CountryId":
list = response.States;
DisableDropDown("#TicketId");
DisableDropDown("#CityId");
dropDownId = "#TicketId";
list = response.Ticket;
PopulateDropDown("#TicketId", list);
break;
case "TicketId":
list = response.States;
DisableDropDown("#StateId");
PopulateDropDown("#StateId", list);
break;
case "StateId":
dropDownId = "#CityId";
list = response.Cities;
DisableDropDown("#CityId");
PopulateDropDown("#CityId", list);
dropDownId = "#CityId2";
list = response.Cities2;
PopulateDropDown("#CityId2", list);
$("#GPS").val(response.GPS);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="">[ === Select === ]</option>');
}
function PopulateDropDown(dropDownId, list) {
var modal = $('<div />');
modal.addClass("modalBackground");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
setTimeout(function () {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
$(".loading").hide();
$('.modalBackground').remove();
}
}, 1000);
}
</script>
}
update controller
[HttpPost]
public ActionResult Index(PersonModel person)
{
MTsqlinsert(person); //Insert values in the database
if (ModelState.IsValid)
{
PersonModel personModel = new PersonModel();
person.Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
person.States = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + countryId, "StateName", "StateId");
person.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + stateId, "CityName", "CityID");
ViewData["result"] = "1";
return RedirectToAction("Index");
}
return View(person);
}
[HttpGet]
[OutputCache(NoStore = true, Duration = 60, VaryByParam = "*")]
public ActionResult Index()
{
PersonModel personModel = new PersonModel
{
Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
};
return View(personModel);
}

Jquery colorbox not working after gridview page change

I am having issue with Jquery colorbox with gridview paging.
When First time page is loaded colorbox is working fine but when I change gridview page through paging its not working.
Here is my javascript code
<script type="text/javascript">
$(document).ready(function () {
$(".example6").colorbox({
iframe: true, innerWidth: 425, innerHeight: 173, onClosed: function () {
($get('<%= btnInsertData_dummy.ClientID %>')).click();
}
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
$(".example6").colorbox({
iframe: true, innerWidth: 425, innerHeight: 173, onClosed: function () {
var path = sender._postBackSettings.sourceElement.pathname;
var myArray = new Array();
myArray = path.split('/');
if (myArray[1].toString() != "Default.aspx") {
($get('<%= btnInsertData_dummy.ClientID %>')).click();
}
}
});
}
</script>
and in gridview I am binding hyperlink on Rowdatabound
if (e.RowType != GridViewRowType.Data) return;
var securrityKey = e.GetValue("str_securitykey");
System.Web.UI.WebControls.HyperLink grdHyper =
grid.FindRowCellTemplateControl(e.VisibleIndex, null, "grdhyper")
as System.Web.UI.WebControls.HyperLink;
if (securrityKey.ToString() != "")
{
grdHyper.Visible = false;
}
else
{
var number = e.GetValue("lng_rndnum");
var lngId = e.GetValue("lng_id");
grdHyper.CssClass = "example6 cboxElement";
grdHyper.NavigateUrl = "GenerateSecurityKey.aspx?number=" + number.ToString() + "&id=" + lngId.ToString();
}
and its not working after paging is clicked

Change your code from add_endRequest to add_pageLoaded in your jquery code. And remove your (document).ready(function(){ jquery code and placed your code of colorbox method inside add_pageLoaded method. Hope this might solve your issue.

ajax calendar control not reset

I have an ajax calendar control used in my form for to date and from date.
The issue with it is, if I select date from previous year and click on reset button, the textbox containing date gets cleared but now when focus is set on the textbox the calendar control shows month of the year previously selected.
Is there any way we can reset calendar control as well on click of the reset button?
function Reset(divs) {
$(".ui-tooltip-content").parents('div').remove();
ClearErrorMsg();
$('#' + divs + ' input[type="text"]').val('');
$('#' + divs + ' select').val('');
$('#' + divs + ' input[type="text"]').attr({ "value": "" });
var BrwsrType = BrowserType();
if (BrwsrType == 'IE') {
$('#' + divs + ' select option').each(function () {
$("select option").removeAttr('selected');
})
};
$("select").each(function (i) {
$('select :nth-child(1)').attr('selected', 'selected')
$('select')[i].options[0].selected = true
});
var txtpagesize = $get('txtPageSize');
if (txtpagesize != null) {
txtpagesize.value = txtpagesize.attributes["defValue"].value;
$('#' + txtpagesize.id).attr({ "value": txtpagesize.attributes["defValue"].value });
}
HideDialog();
try {
Page_ClientValidate('');
}
catch (er) {
}
return false;
}
and the function which is called on reset button is as follows
function ResetForm() {
Reset('Search');
$(".dropdown").each(function () {
$('.dropdown :nth-child(1)').attr('selected', 'selected')
});
isValidDate($get('txtBeginDate'));
isValidDate($get('txtEndDate'));
HideCallOut();
$get('txtBeginDate').defaultValue = "";
$get('txtEndDate').defaultValue = "";
return false;
}

<script type="text/javascript" >
function resetcalendar()
{
$find("_Calendar").set_selectedDate(null);
$("[id*=Calendar]").val("");
$(".ajax__calendar_active").removeClass("ajax__calendar_active");
return false;
}
</script>
where _Calendar is the BehaviorID of Calendarextender and Calendar is the ID of Calendarextender
Hope this helps
Happy Coding

not able to display employee details in html table in view using json

I have got problem with displaying employee details in view when the user clicks the button on view..
when the user clicks the button the employee details(both id and name) will be called through the JSON and displaying data in html table, for that purpose I have written like this in my view
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(function () {
$('#submitbtnn').click(function () {
var table = $('#parenttable');
var url = '/EmpDetails/GetEmployees/';
$.getJSON(url, function (data) {
$.each(data, function (key, Val) {
var user = '<tr><td>' + Val.EmployeeId + '<td><tr>' + '<tr><td>' + Val.EmployeeName + '<tr><td>'
table.append(user);
});
});
});
});
</script>
#{
ViewBag.Title = "GetEmployeesByName";
}
<h2>GetEmployeesByName</h2>
#using (Html.BeginForm())
{
<table id ="parenttable"></table>
<input id="submitbtnn" type="Submit" value="Submit1" />
}
and this is my controller, here i am returning json data to view
namespace MvcSampleApplication.Controllers
{
public class EmpDetailsController : Controller
{
[HttpGet]
public ActionResult GetEmployees()
{
List<EmployeeClass> employees = new List<EmployeeClass>();
EmployeeClass employee1 = new EmployeeClass { EmployeeId=1, EmployeeName = "Rams"};
EmployeeClass employee2 = new EmployeeClass { EmployeeId = 2, EmployeeName = "joseph" };
EmployeeClass employee3 = new EmployeeClass { EmployeeId = 3, EmployeeName = "matt" };
employees.Add(employee1);
employees.Add(employee2);
employees.Add(employee3);
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
}
but I am getting http 404 resource not found error, when i am trying to access this url
http://localhost/EmpDetails
would any one pls suggest any ideas and any suggestions on this,that would be very greatful to me..
Many thanks...
Modified View
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(function () {
$('#submitbtnn').click(function () {
var table = $('#parenttable');
var url = #Url.Action("GetEmployees","EmpDetails")
//alert("hi");
$.getJSON(url, function (data) {
//alert("hi");
$.each(data, function (Val) {
var user = '<tr><td>' + Val.EmployeeId + Val.EmployeeName + '<tr><td>'
table.append(user);
});
});
return false;
});
});
</script>
#{
ViewBag.Title = "GetEmployeesByName";
}
<h2>GetEmployeesByName</h2>
#using (Html.BeginForm())
{
<div class="temptable">
<table id ="parenttable"></table>
</div>
<input id="submitbtnn" type="Submit" value="Submit1" />
}
I am not able to hit second Alert Function inside JavaScript function.

You forgot to cancel the default action of the button by returning false from the click handler:
$('#submitbtnn').click(function () {
var table = $('#parenttable');
var url = '/EmpDetails/GetEmployees/';
$.getJSON(url, function (data) {
$.each(data, function (key, Val) {
var user = '<tr><td>' + Val.EmployeeId + '<td><tr>' + '<tr><td>' + Val.EmployeeName + '<tr><td>'
table.append(user);
});
});
return false; // <!-- This is very important
});
By not canceling the default action, when you click on the submit button, the browser submits the form and redirects away from the page to the action of the form leaving no time for the AJAX request to ever execute.

Try using this as your url #Url.Action("GetEmployees","EmpDetails")

Try this
$(function () {
$('#submitbtnn').click(function () {
var table = $('#parenttable');
$.ajax({
url: 'GetEmployees',
type: 'POST',
data: JSON.stringify({ table: table }),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
var rowcount = data.employees.length;
for (var i = 0; i < rowcount; i++) {
var user = '<tr><td>' + employees[i].EmployeeId + employees[i].EmployeeName + '<tr><td>'
table.append(user);
}
});
},
error: function () {
alert('fail');
}
});
return false;
});

Adding jquery click event for UpdatePanel

I am using this code for binding asp.net gridview with right click contextmenu using jQuery but every time when I click it (use option in menu list) it reloads the page. What should I do if I want to use an UpdatePanel?
function fnView() {
var lnkView = document.getElementById('<%=lnkView.ClientID %>');
var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
lnkView.click();
}
function fnDelete() {
var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
lnkDelete.click();
}
jQuery.fn.setEvents = function (e) {
var me1 = jQuery(this);
return this.each(function () {
var me = jQuery(this);
me.click(function (e) {
$("div").filter("[type=ContextMenu]").hide();
fnSetMenu(me.children(':first-child').text(), e.pageX, e.pageY);
});
});
};
function fnSetMenu(productID, left, top) {
if ($("#Menu" + productID).html() == null) {
var strMenuHTML = "<div type=\"ContextMenu\" id=\"Menu" + productID + "\" class=\"contextMenuClass\" mouseonmenu=\"1\"><table style='width:100%;'><tr><td onclick=fnView()>View Product</td></tr><tr><td onclick=fnDelete()>Delete Product</td></tr></table></div>";
$("body").append(strMenuHTML);
$.post("MenuHandler.ashx", {}, function (response) {
$("#Menu" + productID).html(response);
});
}
$("#Menu" + productID).css({ top: top + "px", left: left + "px" }).show();
}
$(document).ready(function () {
$("#gvProducts tr.ShowContext").setEvents();
}
);
$(document).click(function (e) {
$clicked = $(e.target);
if (!($clicked.parents().hasClass("ShowContext") || $clicked.hasClass("contextMenuClass") || $clicked.parents().hasClass("contextMenuClass"))) {
$("div").filter("[type=ContextMenu]").hide();
}
});

use jQuery's live function to bind an event inside updatepanel
or
go through this link
http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels