這是我運行代碼時的影像
這是我的控制器：
using ajaxcrud.DB.Core;
using ajaxcrud.DB.Data;
using ajaxcrud.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity.Migrations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ajaxcrud.Controllers
{
public class HomeController : Controller
{
private ajaxcrudContext db = new ajaxcrudContext();
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public JsonResult getOrderList()
{
var order = (from s in db.Orders
select new OrderFormModel
{
Id = s.Id,
FirstName = s.FirstName,
MiddleName = s.MiddleName,
LastName = s.LastName,
//OrderNumber = Convert.ToString(s.OrderNumber),
OrderNumber = s.OrderNumber,
OrderName = s.OrderName
}).ToList();
return Json(new { data = order.ToList() }, JsonRequestBehavior.AllowGet);
}
//public ActionResult saveOrder(int? id)
//{
// var model = new OrderFormModel();
// if (id != null)
// model.Id = Convert.ToInt32(id);
// model = PrepareOrderFormModel(model);
// return View(model);
//}
public ActionResult Index(int? id)
{
var model = new OrderFormModel();
if (id != null)
model.Id = Convert.ToInt32(id);
model = PrepareOrderFormModel(model);
return View(model);
}
public ActionResult saveOrder(OrderFormModel model)
{
if (ModelState.IsValid)
{
try
{
if (model.Id > 0)
{
//dito mo lagay edit mo if greater than 0 ibig sabigin may pinasa kang Id so papasok sya as edit
using (var db = new ajaxcrudContext())
{
var orderUpdate = db.Orders.FirstOrDefault(x => x.Id == model.Id);
orderUpdate.Id = model.Id;
orderUpdate.FirstName = model.FirstName;
orderUpdate.MiddleName = model.MiddleName;
orderUpdate.LastName = model.LastName;
orderUpdate.OrderName = model.OrderName;
orderUpdate.OrderNumber = model.OrderNumber;
db.Orders.AddOrUpdate(orderUpdate);
db.SaveChanges();
//return Json(orderUpdate, JsonRequestBehavior.AllowGet);
return RedirectToAction("index", new { model.Id });
}
}
else
{
//eto naman is for add
using (var db = new ajaxcrudContext())
{
var order = new Order
{
FirstName = model.FirstName,
MiddleName = model.MiddleName,
LastName = model.MiddleName,
OrderNumber = model.OrderNumber,
OrderName = model.OrderName,
};
db.Orders.Add(order);
db.SaveChanges();
return Json(order, JsonRequestBehavior.AllowGet);
}
}
}
catch (Exception ex)
{
ModelState.AddModelError("CustomError", ex.Message);
}
}
model = PrepareOrderFormModel(model);
return View(model);
}
public OrderFormModel PrepareOrderFormModel(OrderFormModel model)
{
//var Orders = db.Orders.ToList();
//model.Orders = Orders.Select(x => new SelectListItem
//{
// Text = x.LastName,
// Value = x.Id.ToString()
//});
if (model.Id > 0)
{
var order = db.Orders.Find(model.Id);
model.FirstName = order.FirstName;
model.LastName = order.LastName;
model.MiddleName = order.MiddleName;
model.OrderNumber = order.OrderNumber;
model.OrderName = order.OrderName;
}
return model;
}
public ActionResult Delete(OrderFormModel model)
{
if (model.Id > 0)
{
var orderId = db.Orders.FirstOrDefault(x => x.Id == model.Id);
db.Orders.Remove(orderId);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(model);
}
}
}
這是我的看法：
@using ajaxcrud.Models
@model ajaxcrud.Models.OrderFormModel
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<form>
@Html.HiddenFor(x => x.Id)
<div class="row">
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.FirstName, new { @class = "form-label" })
@Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", @id = "firstname", @name = "firstname" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.MiddleName, new { @class = "form-label" })
@Html.TextBoxFor(x => x.MiddleName, new { @class = "form-control", @id = "middlename", @name = "middlename" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.LastName, new { @class = "form-label" })
@Html.TextBoxFor(x => x.LastName, new { @class = "form-control", @id = "lastname", @name = "lastname" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.OrderNumber, new { @class = "form-label" })
@Html.TextBoxFor(x => x.OrderNumber, new { @class = "form-control", @id = "ordernumber", @name = "ordernumber" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.OrderName, new { @class = "form-label" })
@Html.TextBoxFor(x => x.OrderName, new { @class = "form-control", @id = "ordername", @name = "ordername" })
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm" id="btnSubmit">Save</button>
</div>
</form>
<br />
<br />
<br />
<br />
<table id="EmptyBox" class="display table table-striped" style="width: 100%">
<thead>
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Order Number</th>
<th>Order Name</th>
<th></th>
</tr>
</thead>
</table>
@*<a href="@Url.Action("add", "order")" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Add Order</a>*@
<script type="text/javascript">
var table;
$(function () { //load data table
table = $('#EmptyBox').DataTable({
"ajax": "@Url.Action("getOrderList", "home")",
"columns": [
{ "data": "FirstName" },
{ "data": "MiddleName" },
{ "data": "LastName" },
{ "data": "OrderNumber" },
{ "data": "OrderName" },
{
"render": function (data, type, full, meta) {
return "<button class='btn btn-primary btn-sm' onclick='edit(" full.Id ")'><i class='fas fa-user-edit'></i></button> <button class='btn btn-danger btn-sm' onclick='del(" full.Id ")'><i class='fas fa-user-edit'></i></button>"
}
}
]
});
});
// eto is function papuntang controller na kung saan kinukuha nya yung onclick na edit
function edit(id) {
window.location.href = "@Url.Action("index", "home")?id=" id;
}
function del(id) {
window.location.href = "@Url.Action("delete", "home")?id=" id;
}
$('#btnSubmit').on('click', function () { //submit textbox value to data table
//var order = {};
//order.FirstName = $('#firstname').val();
//order.MiddleNAme = $('#middlename').val();
//order.LastName = $('#lastname').val();
//order.OrderNumber = $('#ordername').val();
//order.OrderName = $('#ordername').val();
var order = $('form').serialize();
$.ajax({
type: 'POST',
url: "@Url.Action("saveOrder", "Home")",
data: order,
dataType: 'json',
success: function (data) {
//alert('Successfully saved!');
//table();
table.html(data);
console.log(data)
//table.clear();
//table.ajax.reload();
//table.draw();
},
error: function (err) {
console.log(err);
}
})
});
</script>
我想將資料表更新為與文本框中的值相同。我嘗試在我的模型狀態中執行 ModelState.Clear 以洗掉文本框，但它不起作用。我的問題是當我單擊更新我的資料表更新但文本框中的值沒有更新時。請幫我解決這個問題。謝謝！
uj5u.com熱心網友回復：
在 jquery 中在提交按鈕單擊事件（ajax 呼叫的成功事件）上撰寫明文框值函式，如下所示：
$('#btnSubmit').on('click', function () { //submit textbox value to data table
var order = $('form').serialize();
$.ajax({
type: 'POST',
url: "@Url.Action("saveOrder", "Home")",
data: order,
dataType: 'json',
success: function (data) {
//alert('Successfully saved!');
//table();
table.html(data);
console.log(data)
//table.clear();
//table.ajax.reload();
//table.draw();
// Clear text box values
$('#firstname').val("")
$('#middlename').val("")
// clear another fields here
},
error: function (err) {
console.log(err);
}
})
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416086.html
標籤：