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

将数据保存到数据库时出现错误:

  

过程或函数'AddName'需要未提供的参数'@CountryName'。

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

我可以使用#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; }
}
luxiaofeng_374 回答:如何使用后jquery ajax调用将数据从下拉列表传递到操作方法以保存数据

请在您的cshtml视图中添加它。

注意:在您的view中,您设置了输入type="submit",这意味着在重新加载页面中提交form,并且您还拥有管理ajax方法的jquery事件。

  

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

jQuery代码

$("#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);
}
本文链接:https://www.f2er.com/3138719.html

大家都在问