使用 ajax 和 json 的 C# MVC 更新数据库
C# MVC update database with ajax and json
我在 C# MVC 视图上有一个简单的表单。表单收集用户的名字和姓氏,然后将数据发送给控制器。这是表格的样子:
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="col-md-12">
<label>First Name :</label>
<input class="form-control required" type="text" id="txtFirstName" required />
</div>
<div class="col-md-12">
<label>Last Name :</label>
<input class="form-control required" type="text" id="txtLastName" required />
</div>
<div class="col-md-12">
<br />
<input id="btnSave" class="btn btn-success" type="button" value="Save Product" />
<input id="btnCancel" class="btn btn-danger" type="button" value="Cancel" />
</div>
</div>
</div>
<div id="dvLoader" class="LoadingDiv" style="display: none;">
<table style="height: 100%; margin: auto;">
<tr>
<td style="vertical-align: middle;">
<center>
<img src="..\..\Images\loading-icegif.gif" alt="Loading" />
</center>
</td>
</tr>
</table>
</div>
我有这个 ajax 代码:
$(function () {
$('#btnSave').on('click', function () {
var FirstName = $("#txtFirstName").val();
var LastName = $("#txtLastName").val();
if (CheckRequiredFields()) {
$('#dvLoader').show();
$.ajax({
url: '@Url.Action("SaveAndUpdateProduct", "Home")',
type: 'POST',
data: JSON.stringify({ "FirstName": FirstName, "LastName": LastName }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#dvLoader').hide();
if (result.Status == "True") {
toastr.success(result.Message);
clear();
display();
}
else {
toastr.success(result.Message);
clear();
display();
}
}
});
}
});
});
而且,这是 HomeController.cs:
using CodingChallengeV4.Models;
using Docker.DotNet.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CodingChallengeV4.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
using (var ctx = new ContactContext())
{
var seedContact = new ContactOrig();
seedContact.FirstName = "seelFirst";
seedContact.LastName = "seedLast";
ctx.Contact.Add(seedContact);
ctx.SaveChanges();
}
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public JsonResult SaveAndUpdate(string FirstName, string LastName)
{
var result = new JSONMessage();
try
{
using (var ctx = new ContactContext())
{
//define the model
var contact = new ContactOrig();
contact.FirstName = FirstName;
contact.LastName = LastName;
ctx.Contact.Add(contact);
result.Status = "true";
result.ErrorMessage = "your product has been updated successfully..";
ctx.SaveChanges();
}
}
catch (Exception ex)
{
result.ErrorMessage = "We are unable to process your request at this time. Please try again later.";
result.Status = "false";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
当我执行代码并输入名字和姓氏并单击“保存”按钮时,会显示 dvLoader,但我在控制台中收到此错误:
POST http://localhost:4093/Home/SaveAndUpdateProduct 500 (Internal Server Error)
知道为什么 post 会产生这个错误吗?
谢谢!
首先,最好创建一个视图模型
public class NameViewModel
{
public string FirstName {get; set;}
public string LastName {get; set;}
}
尝试从 ajax
中删除内容类型:“application/json; charset=utf-8”
$.ajax({
url: "/Home/SaveAndUpdateProduct",
type: 'POST',
data: { FirstName: FirstName, LastName: LastName },
dataType: "json",
并修正动作
public JsonResult SaveAndUpdateProduct(NameViewModel model)
我在 C# MVC 视图上有一个简单的表单。表单收集用户的名字和姓氏,然后将数据发送给控制器。这是表格的样子:
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="col-md-12">
<label>First Name :</label>
<input class="form-control required" type="text" id="txtFirstName" required />
</div>
<div class="col-md-12">
<label>Last Name :</label>
<input class="form-control required" type="text" id="txtLastName" required />
</div>
<div class="col-md-12">
<br />
<input id="btnSave" class="btn btn-success" type="button" value="Save Product" />
<input id="btnCancel" class="btn btn-danger" type="button" value="Cancel" />
</div>
</div>
</div>
<div id="dvLoader" class="LoadingDiv" style="display: none;">
<table style="height: 100%; margin: auto;">
<tr>
<td style="vertical-align: middle;">
<center>
<img src="..\..\Images\loading-icegif.gif" alt="Loading" />
</center>
</td>
</tr>
</table>
</div>
我有这个 ajax 代码:
$(function () {
$('#btnSave').on('click', function () {
var FirstName = $("#txtFirstName").val();
var LastName = $("#txtLastName").val();
if (CheckRequiredFields()) {
$('#dvLoader').show();
$.ajax({
url: '@Url.Action("SaveAndUpdateProduct", "Home")',
type: 'POST',
data: JSON.stringify({ "FirstName": FirstName, "LastName": LastName }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#dvLoader').hide();
if (result.Status == "True") {
toastr.success(result.Message);
clear();
display();
}
else {
toastr.success(result.Message);
clear();
display();
}
}
});
}
});
});
而且,这是 HomeController.cs:
using CodingChallengeV4.Models;
using Docker.DotNet.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CodingChallengeV4.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
using (var ctx = new ContactContext())
{
var seedContact = new ContactOrig();
seedContact.FirstName = "seelFirst";
seedContact.LastName = "seedLast";
ctx.Contact.Add(seedContact);
ctx.SaveChanges();
}
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public JsonResult SaveAndUpdate(string FirstName, string LastName)
{
var result = new JSONMessage();
try
{
using (var ctx = new ContactContext())
{
//define the model
var contact = new ContactOrig();
contact.FirstName = FirstName;
contact.LastName = LastName;
ctx.Contact.Add(contact);
result.Status = "true";
result.ErrorMessage = "your product has been updated successfully..";
ctx.SaveChanges();
}
}
catch (Exception ex)
{
result.ErrorMessage = "We are unable to process your request at this time. Please try again later.";
result.Status = "false";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}
当我执行代码并输入名字和姓氏并单击“保存”按钮时,会显示 dvLoader,但我在控制台中收到此错误:
POST http://localhost:4093/Home/SaveAndUpdateProduct 500 (Internal Server Error)
知道为什么 post 会产生这个错误吗?
谢谢!
首先,最好创建一个视图模型
public class NameViewModel
{
public string FirstName {get; set;}
public string LastName {get; set;}
}
尝试从 ajax
中删除内容类型:“application/json; charset=utf-8”$.ajax({
url: "/Home/SaveAndUpdateProduct",
type: 'POST',
data: { FirstName: FirstName, LastName: LastName },
dataType: "json",
并修正动作
public JsonResult SaveAndUpdateProduct(NameViewModel model)