Dynamic Controls In MVC4 using Jquery:
View Code:
@using (Html.BeginForm("AddShippingLocation", "Location", "POST"))
{
<input type="hidden" id="hdncountryid" />;
<input type="hidden" id="hdnstateid" />;
<input type="hidden" id="hdncityeid" />;
<input type="hidden" id="hdnAddress1" />;
<input type="hidden" id="hdnAddress2" />;
<input type="hidden" id="hdnZipCode" />;
<input type="hidden" id="hdnPhone" />;
<input type="hidden" id="hdnExtension" />;
<input type="hidden" id="hdnFax" />;
eCRM.Controllers.eCRM_Masters.LocationController dp = new eCRM.Controllers.eCRM_Masters.LocationController();
eCRM_Entity.eCRM_MastersEntities1 entities = new eCRM_Entity.eCRM_MastersEntities1();
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem { Text = "-Select Country-", Value = "Selects items" });
var cat = (from c in entities.tbl_Country select c).ToArray();
for (int i = 0; i < cat.Length; i++)
{
list.Add(new SelectListItem
{
Text = cat[i].CountryName,
Value = cat[i].CountryId.ToString(),
Selected = (cat[i].CountryId == 0)
});
}
ViewData["danhsach"] = list;
<div>
<legend>***********Shipping Address**********</legend>
</div>
<div id='AppSelectorGroup'>
<div id="AppSelectorBox_1" style="display: block; float: left;">
<div class="editor-field">
@Html.DropDownList("CountryId", (IEnumerable<SelectListItem>)ViewData["danhsach"],
new { @class = "CssCategory", id = "CountryId" })
@Html.DropDownList("State_Id", new SelectList("State_Id", "StateName"), new { @class = "CssSubcategory", id = "State_Id" })
@Html.DropDownList("CityId", new SelectList("CityId", "CityName"), new { @class = "CssSubcategorycity", id = "CityId" })
Address1
@Html.TextBox("Address1", null, new { id = "Address11" })
Address2
@Html.TextBox("Address2", null, new { id = "Address21" })
ZipCode
@Html.TextBox("ZipCode", null, new { id = "ZipCode1" })
Phone
@Html.TextBox("Phone", null, new { id = "Phone1" })
Extension
@Html.TextBox("Extension", null, new { id = "Extension1" })
Fax
@Html.TextBox("Fax", null, new { id = "Fax1", @class = "deleteAppselector" })
</div>
</div>
<div class="clear-fix"></div>
</div>
<p>
<input type="submit" value="Save" name="Command" id="btn1" />
<input type="submit" value="Cancel" name="Command" />
</p>
//Page Validation
<script type="text/javascript">
$("#btn1").click(function (e) {
debugger;
// e.preventDefault();
var CountryId = $('#CountryId option:selected').val();
var StateId = $('#State_Id option:selected').val();
var CityId = $('#CityId option:selected').val();
if (CountryId == 0) {
alert("Please select country.")
return false;
}
if (StateId == 0) {
alert("Please select State.")
return false;
}
if (CityId == 0) {
alert("Please select City.")
return false;
}
var address1 = $("#Address11").val();
if (address1 == '') {
alert("Please enter address1");
return false;
}
var Address21 = $("#Address21").val();
if (Address21 == '') {
alert("Please enter Address2");
return false;
}
var ZipCode1 = $("#ZipCode1").val();
if (ZipCode1 == '') {
alert("Please enter ZipCode");
return false;
}
var Phone1 = $("#Phone1").val();
if (Phone1 == '') {
alert("Please enter Phone");
return false;
}
var Extension1 = $("#Extension1").val();
if (Extension1 == '') {
alert("Please enter Extension");
return false;
}
var Fax1 = $("#Fax1").val();
if (Fax1 == '') {
alert("Please enter Fax");
return false;
}
///////////////////////////
var hdncountryid = $("#hdncountryid").val();
var CountryId2 = $(hdncountryid + ' option:selected').val();
var hdnstateid = $("#hdnstateid").val();
var StateId2 = $(hdnstateid + ' option:selected').val();
var hdncityeid = $("#hdncityeid").val();
var Cityid2 = $(hdncityeid + ' option:selected').val();
///////////////////////////////
// var CountryId = $('#CountryId option:selected').val();
// var StateId = $('#State_Id option:selected').val();
// var CityId = $('#CityId option:selected').val();
if (CountryId2 == 0) {
alert("Please select country.")
return false;
}
if (StateId2 == 0) {
alert("Please select State.")
return false;
}
if (Cityid2 == 0) {
alert("Please select City.")
return false;
}
var address11 = $("#hdnAddress1").val();
if (address11 == '') {
alert("Please enter address1");
return false;
}
var Address212 = $("#hdnAddress2").val();
if (Address212 == '') {
alert("Please enter Address2");
return false;
}
var ZipCode12 = $("#hdnZipCode").val();
if (ZipCode12 == '') {
alert("Please enter ZipCode");
return false;
}
var Phone11 = $("#hdnPhone").val();
if (Phone11 == '') {
alert("Please enter Phone");
return false;
}
var Extension11 = $("#hdnExtension").val();
if (Extension11 == '') {
alert("Please enter Extension");
return false;
}
var Fax11 = $("#hdnFax").val();
if (Fax11 == '') {
alert("Please enter Fax");
return false;
}
});
$('#CountryId').change(function () {
var CountryId = $(this).val();
var URLS1 = '@Url.Action("GetState")' + '?CountryId=' + CountryId;
$.getJSON(URLS1, function (dataS1) {
$('#State_Id').html(dataS1);
});
});
$('#State_Id').change(function () {
var StateId = $(this).val();
var URLC1 = '@Url.Action("GetCity")' + '?StateId=' + StateId;
$.getJSON(URLC1, function (dataC1) {
$('#CityId').html(dataC1);
});
});
//Dropdown Selection Change event...
function onSelectChangeCountry() {
var hdncountryid = $("#hdncountryid").val();
var CountryId = $(hdncountryid + ' option:selected').val();
var URLS1 = '@Url.Action("GetState")' + '?CountryId=' + CountryId;
$.getJSON(URLS1, function (dataS1) {
var hdnstateid = $("#hdnstateid").val();
$(hdnstateid).html(dataS1);
});
}
function onSelectChangeState() {
var hdnstateid = $("#hdnstateid").val();
var StateId = $(hdnstateid + ' option:selected').val();
var URLC1 = '@Url.Action("GetCity")' + '?StateId=' + StateId;
$.getJSON(URLC1, function (dataC1) {
var hdncityeid = $("#hdncityeid").val();
$(hdncityeid).html(dataC1);
});
}
</script>
//Dynamic Code ...For Genrate DropDownlist and Text Boxs//
<script type="text/javascript">
//Jquery for handling the Click Event and Creating the Dynamic Controls:
//----------Begin: For Creating App Selector Groups---------------//
var deleteAppSelectror = $(".deleteAppselector").length;
/* For Adding the Control */
$("#addAppSelector").click(function () {
debugger;
if (deleteAppSelectror == 10) {
$("#addAppSelector").hide();
$("#removeAppSelector").show();
//alert("Only 10 URLs are allowed");
return false;
}
else {
$("#addAppSelector").show();
$("#removeAppSelector").show();
}
deleteAppSelectror++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'AppSelectorBox__' + deleteAppSelectror);
var URL = '@Url.Action("Getcountry")';
newTextBoxDiv.append('<div class="editor-label"><label>Shipping Address: </label></div>' +
'<select name="CountryId" onChange="onSelectChangeCountry();" id="CountryId' + deleteAppSelectror + '" class="valid" style = "width:80px"> </select>'
+
' <select name="State_Id" onChange="onSelectChangeState();" id="State_Id' + deleteAppSelectror + '" class="valid" style = "width:80px"> </select>' +
' <select name="CityId" id="CityId' + deleteAppSelectror + '" class="valid" style = "width:80px"> </select>' +
'Address1<div class="editor-field"><input type="text" name="Address1" id="Address1' + deleteAppSelectror + '" value="" />' +
'Address2<input type="text" name="Address2" id="Address2' + deleteAppSelectror + '" style="margin-left:8px;" value="" />' +
'ZipCode<input type="text" name="ZipCode" id="ZipCode' + deleteAppSelectror + '" style="margin-left:8px;" value="" />' +
'Phone<input type="text" name="Phone" id="Phone' + deleteAppSelectror + '" style="margin-left:8px;" value="" />' +
'Extension<input type="text" name="Extension" id="Extension' + deleteAppSelectror + '" style="margin-left:8px;" value="" />' +
'Fax<input type="text" name="Fax" class="deleteAppselector" id="Fax' + deleteAppSelectror + '" style="margin-left:8px;" value="" />' +
'</div><div class="clear-fix"></div>');
$.getJSON(URL, function (data) {
var ddlcountry = '#CountryId' + deleteAppSelectror;
$(ddlcountry).html(data);
var ddlstate = '#State_Id' + deleteAppSelectror;
var ddlcity = '#CityId' + deleteAppSelectror;
$("#hdncountryid").val(ddlcountry);
$("#hdnstateid").val(ddlstate);
$("#hdncityeid").val(ddlcity);
var Address1 = '#Address1' + deleteAppSelectror;
var Address2 = '#Address2' + deleteAppSelectror;
var ZipCode = '#ZipCode' + deleteAppSelectror;
var Phone = '#Phone' + deleteAppSelectror;
var Extension = '#Extension' + deleteAppSelectror;
var Fax = '#Fax' + deleteAppSelectror;
$("#hdnAddress1").val(Address1);
$("#hdnAddress2").val(Address2);
$("#hdnZipCode").val(ZipCode);
$("#hdnPhone").val(Phone);
$("#hdnExtension").val(Extension);
$("#hdnFax").val(Fax);
})
newTextBoxDiv.appendTo("#AppSelectorGroup");
if (deleteAppSelectror == 10) {
$("#addAppSelector").hide();
$("#removeAppSelector").show();
return false;
}
return true;
});
/* For Removing the Control */
$("#removeAppSelector").click(function () {
debugger;
if (deleteAppSelectror == 1) {
$("#removeAppSelector").hide();
$("#addAppSelector").show();
return false;
}
else {
$("#removeAppSelector").show();
$("#addAppSelector").show();
}
$('.deleteAppselector').last().parent().parent().remove();
deleteAppSelectror--;
if (deleteAppSelectror == 1) {
$("#removeAppSelector").hide();
$("#addAppSelector").show();
return false;
}
return true;
});
//----------End: For Creating App Selector Groups---------------//
</script>
}
Hope it will help u...enj...
No comments:
Post a Comment