我正在尝试创建可扩展的输入表，但遇到了一些问题。两者似乎都与脚本未运行有关，但我不确定。即使过去有任何按钮都无法使用。我不知道更改了什么，但是我没有更改添加或删除功能，但是它们不再起作用。提交按钮似乎并未触发控制器中的相应功能。
我尝试查找语法错误，但似乎没有任何错误。这些脚本似乎在引用视图的正确部分。
这是控制器：
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Promotion_Generator.Models.DataModels;
namespace Promotion_Generator.Controllers
{
public class PromotionController : Controller
{
private PromotionGeneratorEntities db = new PromotionGeneratorEntities();
public ActionResult BOGO()
{
return View();
}
[HttpPost]
public JsonResult BOGOSave(string BuyMemberData, string GetMemberData)
{
try
{
var BuySerializeData = JsonConvert.DeserializeObject<List<String>>(BuyMemberData);
foreach (var data in BuySerializeData)
{
}
var GetSerializeData = JsonConvert.DeserializeObject<List<String>>(GetMemberData);
foreach (var data in GetSerializeData)
{
}
db.SaveChanges();
}
catch (Exception)
{
return Json("fail");
}
return Json("success");
}
}
}
这是视图
@model Promotion_Generator.Models.BOGOModel
@{
ViewBag.Title = "BOGO";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2><b>Buy One Get One Free</b></h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<p class = "control-label col-md-2"><b>Promotion Code</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.PROMOTION_CODE, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PROMOTION_CODE, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Description</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.DESCRIPTION, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DESCRIPTION, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Start Date Time</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.START_DATE_TIME, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.START_DATE_TIME, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>End Date Time</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.END_DATE_TIME, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.END_DATE_TIME, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Percent Off</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.PERCENT_OFF, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PERCENT_OFF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<p class="control-label col-md-2"><b>Percent Off</b></p>
<div class="col-md-10">
@Html.EditorFor(model => model.BUY_MEMBERS, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PERCENT_OFF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group col-md-10">
<h3><b>Buy Products</b></h3>
<table id="buyProducts" class="table">
<thread>
<tr>
<th>
<p>Product UPC</p>
</th>
</tr>
</thread>
<tbody>
<tr>
<td>
@Html.EditorFor(modelItem => modelItem.BUY_MEMBERS, new { htmlAttributes = new { @class = "form-control" } })
</td>
<td>
<input type="button" value="Remove" onclick="T1Remove(this)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input class="btn btn-default" id="btnAdd1" type="button" name="name" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
<div class="form-group col-md-10">
<h3><b>Get Products</b></h3>
<table id="getProducts" class="table">
<thread>
<tr>
<th>
<p>Product UPC</p>
</th>
</tr>
</thread>
<tbody>
<tr>
<td>
@Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { @class = "form-control" } })
</td>
<td>
<input type="button" value="Remove" onclick="T2Remove(this)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input class="btn btn-default" id="btnAdd2" type="button" name="name" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="btnSubmit" value="Submit" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to Home", "Index", "Home")
</div>
@section scripts{
<script>
$(".btnAdd1").click(function () {
//Get the reference of the Table's TBODY element.
var tBody = $("#buyProducts > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Editor cell.
var cell = $(row.insertCell(-1));
cell.append("@Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { @class = "form-control" } })");
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "T1Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
//Clear the TextBoxes.
txtName.val("");
txtCountry.val("");
});
$(".btnAdd2").click(function () {
//Get the reference of the Table's TBODY element.
var tBody = $("#getProducts > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Editor cell.
var cell = $(row.insertCell(-1));
cell.append("@Html.EditorFor(modelItem => modelItem.GET_MEMBERS, new { htmlAttributes = new { @class = "form-control" } })");
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "T2Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
//Clear the TextBoxes.
txtName.val("");
txtCountry.val("");
});
function T1Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = $("#buyProducts")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
function T2Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = $("#getProducts")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
function BuyMembers() {
var BuyMembers = $(this).find('#BuyMembers').val();
return BuyMembers;
};
function GetMembers() {
var GetMembers = $(this).find('#GetMembers').val();
return GetMembers;
};
$('.btnSubmit').click(function () {
$.ajax({
url: '/Promotion/SaveData',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(BuyMembers),
data: JSON.stringify(GetMembers),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
</script>
}
当我按下“添加”，“删除”和“提交”按钮时，该脚本似乎没有运行，也没有添加或删除任何列。
答案 0 :(得分：0)
您当前正在将jQuery事件分配给类（$(".btnAdd1")）而不是ID（$("#btnAdd1")）。您可以更改事件以链接到ID值：
$("#btnAdd1").click(function () {
//...
}
$("#btnAdd2").click(function () {
//...
});
$('#btnSubmit').click(function () {
//...
});
或更改输入以具有事件的类别。这样可以解决点击事件不触发的问题。