使用jquery将数据传递到MVC中的存储过程

Question

我是Jquery的新手。我想通过Ajax将数据传递到我的SQL数据库。

控制器内部：GetCountry方法从数据库进程中获取国家列表

public JsonResult GetCountries()
{
using(var db = GetContxt())
{
var eventCountries = db.Database.SqlQuery<LocationModel>(String.Format("Location.spGetCountries")).ToList();
return new JsonResult { Data = eventCountries, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}

还有一种将数据发送到数据库的方法：

[HttpPost]
public JsonResult SavePatient(LocationModel locationModel)
{
string connection = ConfigurationManager.ConnectionStrings["EnrollmentEntity"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connection))
{
SqlCommand cmd = new SqlCommand("Profile.spAddPatientProfile", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@FirstName", locationModel.FirstName));
cmd.Parameters.Add(new SqlParameter("@LastName", locationModel.LastName));
cmd.Parameters.Add(new SqlParameter("@IDNumber", locationModel.ID_Number));

cmd.Parameters.Add(new SqlParameter("@Line1", locationModel.Line1));
cmd.Parameters.Add(new SqlParameter("@Line2", locationModel.Line2));
cmd.Parameters.Add(new SqlParameter("@CountryIDFK", Int32.Parse(locationModel.CountryIDFK)));

cmd.Parameters.Add(new SqlParameter("@Message", SqlDbType.VarChar, 250)).Direction = ParameterDirection.Output;
try
{
conn.Open();
cmd.ExecuteNonQuery();
locationModel.Message = Convert.ToString(cmd.Parameters["@Message"].Value);
conn.Close();
}
catch (Exception e)
{
Console.WriteLine(e.Message);
}

}
return new JsonResult { Data = locationModel, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

现在这是我的Ajax方法，我想将数据发送到我的控制器方法

function SaveButton()
{
$.ajax({
url: "/Home/SavePatient",
type: "POST",
data: $("#frmHome").serialize(),
async: false,
error: function (xhr, status, error)
{
alert("was not successful xhr: " + xhr.value + " status: " + status.value + " error: " + error.value);
},
success: function (Record)
{
alert("was successful");
}
})
}

这些是我的HTML元素文本框和下拉列表

@{
ViewBag.Title = "Home Page";
}

@using PatientEnrollmentVS.Models;
@model LocationModel

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

@using (Html.BeginForm("SavePatient", "Home", FormMethod.Post, new { @id = "frmHome" }))
{
<div class="row">
<label>First Name</label>
@Html.TextBoxFor(x => x.FirstName, new { @class = "select-block" })
<label>Last Name</label>
@Html.TextBoxFor(x => x.LastName, new { @class = "select-block" })
</div>

<div class="row">
<label>ID Number</label>
@Html.TextBoxFor(x => x.ID_Number, new {@class = "select-block"})
</div>

<div class="row">
<label>DateOfBirth</label>
@Html.TextBoxFor(x => x.DateOfBirth, new { @class = "select-block" })
</div>
<div class="row">
<label>Countries</label>
@Html.DropDownListFor(x => x.CountryId, new List<SelectListItem>()
{ new SelectListItem()
{
Value = Model.CountryId,
Text = Model.CountryName,
Selected = true
}
}, "0", new { id = "dllGetCountries", @class = "select-block", name = "Countries" })
</div>
<div class="row">
<input type="button" value="Save Event" class="btn btn-primary" onclick="SaveButton()" />
</div>

Answer 1

var valdata = $("#frmHome").serialize();    
$.ajax({   
url: "/Controller/Method",   
type: "POST",   
dataType: 'json',   
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',   
data: valdata   
});