public class UserDetailModel
{
Display(Name = "CountryDetail")]
public List<Country> CountryDetail;
[Display(Name = "selectedcountry")]
public string SelectedCountry { get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
Controller :
public ActionResult Index()
{
UserDetailModel obj = new UserDetailModel();
obj.CountryDetail = new List<Country>()
{
new Country() { CountryId = 1, CountryName = "INDIA" },
new Country() { CountryId = 2, CountryName= "US" },
new Country() { CountryId = 3, CountryName= "Russia" },
new Country() { CountryId = 4, CountryName= "UK" }
};
return View(obj);
}
[HttpPost]
public void Save(FormCollection form, string selectedCountry)
{
}
namespace RegistrationForm.Models
{
public class UserDetailModel
{
[Display(Name = "CountryDetail")] public List<Country> CountryDetail;
[Display(Name = "selectedcountry")]
public string SelectedCountry { get; set; }
[Display(Name = "stateDetail")]
public List<State> StateDetail
{ get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
public class State
{
public int StateId { get; set; }
public string StateName { get; set; }
}
}
Controller:
public class GettingTextInDDLController : Controller
{
public ActionResult Index()
{
var obj = new UserDetailModel();
obj.CountryDetail = new List<Country>()
{
new Country() { CountryId = 1, CountryName = "INDIA" },
new Country() { CountryId = 2, CountryName= "US" },
new Country() { CountryId = 3, CountryName= "Russia" },
new Country() { CountryId = 4, CountryName= "UK" }
};
return View(obj);
}
public ActionResult FirstDdl(string selectedCountry)
{
var obj = new UserDetailModel();
if (selectedCountry == "INDIA")
{
obj.StateDetail = new List<State>()
{
new State() {StateId = 1, StateName = "Tamil Nadu"},
new State() {StateId = 2, StateName = "Karnataka"},
new State() {StateId = 3, StateName = "Delhi"},
new State() {StateId = 4, StateName = "J&K"}
};
}
else
{
//.... Bind states for other countries
obj.StateDetail = new List<State>()
{
new State() {StateId = 1, StateName = "Others"},
};
}
return Json(obj);
}
}
View
use @model RegistrationForm.Models.UserDetailModel in the first line of view
<script type="text/javascript">
function ddListChange() {
$.ajax({
url: '@Url.Action("FirstDdl", "GettingTextInDDL")',
data: { selectedCountry: $('#SelectedCountry option:selected').text() },
cache: false,
type: "POST",
success: function (data) {
var parsedJsonData = data.StateDetail.length;
var state = "<option value=`0`>Select City</option>";
for (var x = 0; x < parsedJsonData; x++) {
state += "<option value=" + data.StateDetail[x]["StateId"] + ">" + data.StateDetail[x]["StateName"] + "</option>";
}
$('#ddlstate').html(state).show();
},
error: function (reponse) { alert("error : " + reponse); }
});
}
</script>
<table>
<tr>
<td id="tdcountry">
@Html.DropDownListFor(a => a.SelectedCountry, new SelectList(Model.CountryDetail, "CountryId", "CountryName"),
new
{
onchange = "ddListChange()"
})
</td>
</tr>
<tr>
<td id="tdstate">
<select id="ddlstate" name="ddlstate" style="width: 200px">
<option>Select Country</option>
</select>
</td>
</tr>
</table>
Output
Before Selecting Country:
After Selecting it will populate list of states belong to Country India
In many scenario, it necessary to pop up the confirm alert box while deleting ,saving and editing information in Asp .Net MVC application. So let us discuss about how can we achieve using JQuery code .
Controller
Create simple controller and generating view based on the controller as shown below.
View (index)
As shown below code, we had created ConfirmationDialog function using javascript to show the popup with alert message. Next creating a AcionLink control which will show the popup by calling the javascript method in the onclick event.
<script type="text/javascript">
function ConfirmationDialog() {
if(confirm("Are you sure to continue?"))
return true;
else
return false;
}
</script>
@Html.ActionLink("Click to Confirm", "Confirmation", null, new { onclick = "return ConfirmationDialog()" })
OUTPUT:
If you click ok, it will redirect to the Confirmation view
Data validation play major role when developing web application. In Asp.net MVC, we can easily implement validation to application by using Data Annotation attribute to model. Data Annotation attribute classes are present in System.ComponentModel. DataAnnotations namespace. It is a common validation attributes which extend the built-in ASP.NET DataAnnotations (Required, Range, RegularExpression, StringLength etc.,). ASP.NET MVC uses jquery unobtrusive validation to perform client side validation.
MODEL
using System.ComponentModel.DataAnnotations;
namespace validation.Models
{
public class ValidationModel
{
[Required]
[Display(Name = "User name")]
[StringLength(20,ErrorMessage = "Name not be exceed 20 char")]
public string Name { get; set; }
[Required(ErrorMessage = "Email_id must not be empty")]
[RegularExpression(".+\@.+\..+", ErrorMessage = "Please Enter valid mail id")]
public string Email { get; set; }
[Required(ErrorMessage = "Please enter phone number")]
[RegularExpression(@"^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Enter valid number")]
public string Phone { get; set; }
[Required(ErrorMessage = "Please enter your address")]
public string Address { get; set; }
[Range(0,120,ErrorMessage = "Please enter between 0 to 120")]
public string Age { get; set; }
}
}
Below output shows the Email validation and Range validation
NOTE :
Validation for password comparsion
[DataType(DataType.Password)]
[Display(Name = "Confirm new password")]
[Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
Partial view is special view which renders a portion of view content. Partial can be reusable in multiple views. It helps us to reduce code duplication. In other word a partial view enables us to render a view within the parent view. A partial view is like as user control in Asp.Net Web forms that is used for code re-usability.Partial views helps us to reduce code duplication. The partial view is instantiated with its own copy of a ViewDataDictionary object which is available with the parent view so that partial view can access the data of the parent view.
In simple , partial view is a child-view/sub-view that you can include in a parent view
Step 1 :
Creating a MVC project by clicking New à Project
Step 2:
After selecting the project , and select visual c# with ASP .NET MVC 4 Web Application and change the name of the project and location then click ok button
Step 3:
After clicking ok it will open new wizard for choosing type of the application and engine. In that choose internet application and razor engine(what ever engine u going to use) and click ok
Step 4:
After clicking ok, the solution will structured like below screen
Step 5:
Now we going to create partial view to the default view(ie., index). Right click the Home folder as like below image and choose view option
Step 6:
After selecting view it will move to next wizard. In that choose Engin type and name of the partial view and click the “Create as a partial view” and click add button
Step 7:
Create sample paragraph inside the partial view and save
Step 8:
Call the partial view in the index by using @Html.Partial(“HeaderPartial”). “HeaderPartial” be the name of the partial view
Step 9:
Press F5 and see the content of partial view in the index view
Explanation : If you click first link… it will hide , because it will not fire particular event to fire but it will continue with next line in the function
Bur if you click on second link, it will not hide because it will move the end of the loop/function
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
