Как передать данные из выпадающего списка в метод действия, чтобы сохранить данные с помощью ajax-вызова post jquery

Question

Я получаю ошибку ниже при сохранении данных в базе данных:

Процедура или функция AddName ожидает параметр '@CountryName', который не был предоставлен.

Я пытаюсь сохранить значение из выпадающего текста выбранного значения в базе данных. Обратите внимание, что я получаю сообщение об ошибке после сохранения данных в базе данных.

Использование #Id Я могу сохранить идентификатор страны, штата и города, но хочу сохранить название страны, штата и города, как исправить ошибку.

Моя хранимая процедура:

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();
  }
}

Модель:

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

Пожалуйста, добавьте это в виде cshtml.

Примечание: в вашем view вы установили ввод type="submit", что означает отправку form со страницы перезагрузки, а также у вас естьуправлять событием jquery, вызывая метод ajax.

Просмотр cshtml

@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" /> 
}

Код запроса

$("#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');
      }
    });
  }
});

Код контроллера

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

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