How to pass data from dropdown list to action method to save data using post jquery ajax call

Question

I'm getting below error while saving data into database:

Procedure or function 'AddName' expects parameter '@CountryName', which was not supplied.

I'm trying to store a value from drop-down selected value text into database. Note that I'm getting the error after data saved into database.

Using #Id I'm able to store Id of country, state & city, but I want to store name of the country, state & city, how to fix the error.

My Stored Procedure:

Create procedure [dbo].[AddName]    
(    
    @CountryName varchar(100),
    @StateName varchar(100),
    @CityName varchar(100)
)    
as    
begin    
   Insert into DropdownName values(@CountryName, @StateName, @CityName)    
End

$("#btnSave").click(function() {
  if ($("#CountryId").val() != "" && $("#StateId").val() != "" && $("#CityId").val() != "") {

    $.ajax({
      type: "POST", //HTTP POST Method
      url: "Home/Index", // Controller/View
      data: { //Passing data
        CountryName: $("#CountryId option:selected").text(), //Reading text box values using Jquery
        StateName: $("#StateId option:selected").text(),
        CityName: $("#CityId option:selected").text(),
        CountryId: $("#CountryId").val(),
        StateId: $("#StateId").val(),
        CityId: $("#CityId").val()
      },
      success: function() {
        alert('Data saved');
      },
      error: function() {
        alert('Error occurred');
      }
    });
  }
});

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
{ 
  @Html.DropDownListFor(m => m.CountryId, Model.Countries, "Please select")
  <br />
  <br /> 
  @Html.DropDownListFor(m => m.StateId, Model.States, "Please select")
  <br />
  <br /> 
  @Html.DropDownListFor(m => m.CityId, Model.Cities, "Please select")
  <br />
  <br />
  <input type="submit" value="Submit" id="btnSave" /> 
}

[HttpPost]
public ActionResult Index(CascadingModel model)
{
  AddDetails(model);
  return View(model);
}

public void AddDetails(CascadingModel obj)
{
  string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
  using (SqlConnection con = new SqlConnection(constr))
  {
    SqlCommand com = new SqlCommand("AddName", con);
    com.CommandType = CommandType.StoredProcedure;
    com.Parameters.AddWithValue("@CountryName", obj.CountryName);
    com.Parameters.AddWithValue("@StateName", obj.StateName);
    com.Parameters.AddWithValue("@CityName", obj.CityName);
    con.Open();
    com.ExecuteNonQuery();
    con.Close();
  }
}

Model:

public class CascadingModel
{
  public CascadingModel()
  {
    this.Countries = new List<SelectListItem>();
    this.States = new List<SelectListItem>();
    this.Cities = new List<SelectListItem>();
  }

  public List<SelectListItem> Countries { get; set; }
  public List<SelectListItem> States { get; set; }
  public List<SelectListItem> Cities { get; set; }

  public int CountryId { get; set; }
  public int StateId { get; set; }
  public int CityId { get; set; }

  public string CountryName { get; set; }
  public string StateName { get; set; }
  public string CityName { get; set; }
}

Answer 1

Please add this in you cshtml view.

Note: in your view you have set input type="submit" it means submit form with reload page and also you have manage jquery event calling ajax method.

cshtml view

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
{ 
  @Html.DropDownListFor(m => m.CountryId, Model.Countries, "Please select")
  <br />
  <br /> 
  @Html.DropDownListFor(m => m.StateId, Model.States, "Please select")
  <br />
  <br /> 
  @Html.DropDownListFor(m => m.CityId, Model.Cities, "Please select")
  <br />
  <br />
  <input type="button" value="Submit" id="btnSave" /> 
}

Jquery Code

$("#btnSave").click(function() {
  if ($("#CountryId").val() != "" && $("#StateId").val() != "" && $("#CityId").val() != "") {

    $.ajax({
      type: "POST", //HTTP POST Method
      url: "@Url.Action("Index", "Home")", // Controller/View
      data: { //Passing data
        CountryName: $("#CountryId option:selected").text(), //Reading text box values using Jquery
        StateName: $("#StateId option:selected").text(),
        CityName: $("#CityId option:selected").text(),
        CountryId: $("#CountryId").val(),
        StateId: $("#StateId").val(),
        CityId: $("#CityId").val()
      },
      success: function() {
        alert('Data saved');
      },
      error: function() {
        alert('Error occurred');
      }
    });
  }
});

Controller Code

[HttpPost]
public ActionResult Index(CascadingModel model,FormCollection fomr)
{
  //also check FormCollection  data

  AddDetails(model);
  return View(model);
}