如何使用 post jquery ajax 调用将数据从下拉列表传递到操作方法以保存数据

Question

我在将数据保存到数据库时遇到以下错误：

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

我正在尝试将下拉选择值文本中的值存储到数据库中。请注意，将数据保存到数据库后出现错误。

使用 #Id 我可以存储国家、州和城市的 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 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);
}

如何使用 post jquery ajax 调用将数据从下拉列表传递到操作方法以保存数据

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

asp.net

ajax

model-view-controller

jquery

asp.net-mvc-5