Jquery 使用Ajax将视图中的多个实例传递给控制器
我尝试使用AJAX从视图向控制器发送Jquery 使用Ajax将视图中的多个实例传递给控制器,jquery,ajax,model-view-controller,Jquery,Ajax,Model View Controller,我尝试使用AJAX从视图向控制器发送列表 每个影院都有一个影院名称（字符串）、影院编号（int）、家庭影院ID（int）、行数（int） 此处为型号代码： public class MovieTheaters { [Key] public int MovieTheatersID { get; set; } public int HomeCinemaID { get; set; } public string Theat
列表
每个影院都有一个影院名称（字符串）、影院编号（int）、家庭影院ID（int）、行数（int）
此处为型号代码：
public class MovieTheaters
{
[Key]
public int MovieTheatersID { get; set; }
public int HomeCinemaID { get; set; }
public string TheatersName { get; set; }
public int NumberHall { get; set; }
public int RowAmount { get; set; }
//FK .
public virtual HomeCinema HomeCinema { get; set; }
public virtual ICollection<Rows> Rows { get; set; }
}
公共级电影
{
[关键]
public int moviethersid{get；set；}
public int HomeCinemaID{get；set；}
公共字符串剧院名称{get；set；}
public int NumberHall{get；set；}
公共整数行数{get；set；}
//FK。
公共虚拟家庭影院家庭影院{get；set；}
公共虚拟ICollection行{get；set；}
}
用户输入他需要多少剧院，然后for loop提供了创建剧院的选项
查看代码：
@model CimenaCityProject.Models.MovieTheaters
@{
ViewBag.Title = "Create";
}
<h2>Create New Theatres</h2>
@Html.AntiForgeryToken()
@{
int? maxNumberOfTheatres = ViewBag.number;
if (!maxNumberOfTheatres.HasValue)
{
maxNumberOfTheatres = 1;
}
}
@using (Html.BeginForm("Create", "Theatres", FormMethod.Post, new { name = "TheatresForm", id = "TheatresForm" }))
{
@Html.ValidationSummary(true)
<table>
<tbody>
@for (int i = 0; i < maxNumberOfTheatres.Value; i++)
{
<tr>
<td id="NewTheaters">
@ViewBag.ErrorMassage
<div style="position:relative; top: 0px; left: 205px; width: 278px;">
@string.Format("Theares Number {0}", i + 1)
</div>
<div>
<br />
<div class="form-group">
@Html.LabelFor(model => model.HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("HomeCinemaID")
@Html.ValidationMessageFor(model => model.HomeCinemaID)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model.TheatersName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TheatersName)
@Html.ValidationMessageFor(model => model.TheatersName)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model.NumberHall, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.NumberHall)
@Html.ValidationMessageFor(model => model.NumberHall)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model.RowAmount, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.RowAmount)
@Html.ValidationMessageFor(model => model.RowAmount)
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
}
<div class="form-group">
<div class="col-lg-push-9">
<input type="submit" name="Create" value="Create" id="Create" />
</div>
</div>
<div id="divLoading" style="display: none; align-items: center">
<img src="~/Image/Elements/ajax-loader.gif" />
</div>
<div id="divResult"></div>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
@model CimenaCityProject.Models.moviet
@{
ViewBag.Title=“创建”；
}
创建新剧院
@Html.AntiForgeryToken（）
@{
int？maxNumberOfTheatres=ViewBag.number；
如果（！MaxNumberOfTheaters.HasValue）
{
maxNumberOfTheatres=1；
}
}
@使用（Html.BeginForm（“Create”、“theaters”、FormMethod.Post、new{name=“theateresform”，id=“theateresform”}））
{
@Html.ValidationSummary（true）
@for（int i=0；i
@LabelFor（model=>model.TheatersName，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.TheatersName）
@Html.ValidationMessageFor（model=>model.TheatersName）
@LabelFor（model=>model.NumberHall，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.NumberHall）
@Html.ValidationMessageFor（model=>model.NumberHall）
@LabelFor（model=>model.RowAmount，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.RowAmount）
@Html.ValidationMessageFor（model=>model.RowAmount）
}
}
@ActionLink（“返回列表”、“索引”）
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
}
Ajax代码：
<script type="text/javascript">
$(document).on('#TheatresForm' ,function () {
var NewTheaters = [];
$('table tbody tr td').each(function () {
NewTheaters.push({
HomeCinemaID: $('#HomeCinemaID').val(),
TheatersName: $('#TheatersName').val(),
NumberHall: $('#NumberHall').val(),
RowAmount: $('#RowAmount').val()
});
});
$('#divLoading').show()
$.ajax({
url: '@Url.Action()',
type: 'POST',
traditional : true,
data: JSON.stringify(NewTheaters),
contentType: 'application/json; charset=utf-8',
success: function (result) {
success(result)
},
error: function (result) {
alert(result.responseText + "Error")
$('#divLoading').hide()
}
});
function success(result) {
alert("success")
$('#divResult').html(result)
$('#divLoading').hide()
}
});
$（文档）.on（#theateresform'，function（）{
var=[]；
$（'table tbody tr td'）。每个（函数（）{
推({
HomeCinemaID:$（'#HomeCinemaID'）.val（），
剧院名称：$（“#剧院名称”）.val（），
NumberHall:$（'#NumberHall'）.val（），
行金额：$（“#行金额”）.val（）
});
});
$（'#divLoading'）.show（）
$.ajax({
url:“@url.Action（）”，
键入：“POST”，
传统的：是的，
数据：JSON.stringify（newt），
contentType:'application/json；charset=utf-8'，
成功：功能（结果）{
成功（结果）
},
错误：函数（结果）{
警报（result.responseText+错误）
$（'#divload'）.hide（）
}
});
功能成功（结果）{
警惕（“成功”）
$（'#divResult'）.html（结果）
$（'#divload'）.hide（）
}
});
控制器代码
// GET: /Theatres/Create
public ActionResult Create(int? id, int? number)
{
if (id == null)
{
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName");
number = 1;
ViewBag.number = number;
}
else
{
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == id).ToArray(), "HomeCinemaID", "CinemaName");
ViewBag.number = number;
}
ViewBag.ErrorMassage = "";
return View();
}
// POST: /Theatres/Create
[HttpPost]
public ActionResult Create( List<MovieTheaters> NewTheaters)
{
foreach (var movietheaters in NewTheaters)
{
if (db.Theaters.Where(x => x.TheatersName == movietheaters.TheatersName && x.HomeCinemaID == movietheaters.HomeCinemaID).FirstOrDefault() == movietheaters)
{
ViewBag.ErrorMassage = "You cant add this Theatres again. Choose another name.";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == movietheaters.HomeCinemaID).ToArray(), "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID);
return View(movietheaters);
}
else
{
if (ModelState.IsValid)
{
db.Theaters.Add(movietheaters);
db.SaveChanges();
return RedirectToAction("Create", "Rows", new { id = movietheaters.MovieTheatersID, rwcpcty = movietheaters.RowAmount, last = 1 });
}
}
ViewBag.ErrorMassage = "Try again later";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID);
return View(movietheaters);
}
ViewBag.ErrorMassage = "Try again later";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName");
return View();
}
//获取：/theaters/Create
公共操作结果创建（int？id，int？number）
{
if（id==null）
{
ViewBag.HomeCinemaID=新的选择列表（db.HomeCinemas，“HomeCinemaID”，“CinemaName”）；
数字=1；
ViewBag.number=编号；
}
其他的
{
ViewBag.HomeCinemaID=新建选择列表（db.HomeCinemas.Where（x=>x.HomeCinemaID==id）.ToArray（），“HomeCinemaID”，“CinemaName”）；
ViewBag.number=编号；
}
ViewBag.error按摩=”；
返回视图（）；
}
//张贴/剧院/创建
[HttpPost]
公共行动结果创建（列表）
{
foreach（新加热器中的无功电动加热器）
{
if（db.Theaters.Where（x=>x.TheatersName==MovietHeathers.TheatersName&&x.HomeCinemaID==MovietHeathers.HomeCinemaID）.FirstOrDefault（）==MovietHeathers）
{
ViewBag.error按摩=“您不能再添加此剧院。请选择其他名称。”；
ViewBag.HomeCinemaID=新建选择列表（db.HomeCinemas.Where（x=>x.HomeCinemaID==MovietHeathers.HomeCinemaID）.ToArray（），“HomeCinemaID”，“CinemaName”，MovietHeathers.HomeCinemaID）；
返回视图（电影）；
}
其他的
{
if（ModelState.IsValid）
{
db.剧院。添加（电影加热器）；
db.SaveChanges（）；
返回Re
@model List<CimenaCityProject.Models.MovieTheaters>
@{
var selectlist = (SelectList)ViewBag.HomeCinemaID;
}
@using (Html.BeginForm("Create", "Theatres", FormMethod.Post, new { name = "TheatresForm", id = "TheatresForm" }))
{
@Html.ValidationSummary(true)
<table>
<tbody>
@for (int i = 0; i < maxNumberOfTheatres.Value; i++)
{
<tr>
<td id="NewTheaters">
@ViewBag.ErrorMassage
<div style="position:relative; top: 0px; left: 205px; width: 278px;">
@string.Format("Theares Number {0}", i + 1)
</div>
<div>
<br />
<div class="form-group">
@Html.LabelFor(model => model[i].HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model[i].HomeCinemaID,selectlist)
@Html.ValidationMessageFor(model => model[i].HomeCinemaID)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].TheatersName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].TheatersName)
@Html.ValidationMessageFor(model => model[i].TheatersName)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].NumberHall, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].NumberHall)
@Html.ValidationMessageFor(model => model[i].NumberHall)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].RowAmount, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].RowAmount)
@Html.ValidationMessageFor(model => model[i].RowAmount)
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
}
<div class="form-group">
<div class="col-lg-push-9">
<input type="button" name="Create" value="Create" id="Create" onclick="SaveTheatre()" />
</div>
</div>
<div id="divLoading" style="display: none; align-items: center">
<img src="~/Image/Elements/ajax-loader.gif" />
</div>
<div id="divResult"></div>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
function SaveTheatre() {
$.ajax({
url: '@Url.Action("Create","Home")',
type: 'POST',
data: $('form:first').serializeArray(),
success: function(result) {
success(result)
},
error: function(result) {
alert(result.responseText + "Error") $('#divLoading').hide()
}
});
}
function success(result) {
alert("success") $('#divResult').html(result) $('#divLoading').hide()
}
// GET: /Theatres/Create
public ActionResult Create(int? id, int? number)
{
if (id == null)
{
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName");
number = 1;
ViewBag.number = number;
}
else
{
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == id).ToArray(), "HomeCinemaID", "CinemaName");
ViewBag.number = number;
}
ViewBag.ErrorMassage = "";
return View();
}
// POST: /Theatres/Create
[HttpPost]
public ActionResult Create( List<MovieTheaters> NewTheaters)
{
foreach (var movietheaters in NewTheaters)
{
if (db.Theaters.Where(x => x.TheatersName == movietheaters.TheatersName && x.HomeCinemaID == movietheaters.HomeCinemaID).FirstOrDefault() == movietheaters)
{
ViewBag.ErrorMassage = "You cant add this Theatres again. Choose another name.";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas.Where(x => x.HomeCinemaID == movietheaters.HomeCinemaID).ToArray(), "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID);
return View(movietheaters);
}
else
{
if (ModelState.IsValid)
{
db.Theaters.Add(movietheaters);
db.SaveChanges();
return RedirectToAction("Create", "Rows", new { id = movietheaters.MovieTheatersID, rwcpcty = movietheaters.RowAmount, last = 1 });
}
}
ViewBag.ErrorMassage = "Try again later";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName", movietheaters.HomeCinemaID);
return View(movietheaters);
}
ViewBag.ErrorMassage = "Try again later";
ViewBag.HomeCinemaID = new SelectList(db.HomeCinemas, "HomeCinemaID", "CinemaName");
return View();
}
@model List<CimenaCityProject.Models.MovieTheaters>
@{
ViewBag.Title = "Create";
var selectlist = (SelectList)ViewBag.HomeCinemaID;
}
<h2>Create New Theatres</h2>
@Html.AntiForgeryToken()
@{
int? maxNumberOfTheatres = ViewBag.number;
if (!maxNumberOfTheatres.HasValue)
{
maxNumberOfTheatres = 1;
}
}
@using (Html.BeginForm("Create", "Theatres", FormMethod.Post))
{
@Html.ValidationSummary(true)
<table>
<tbody>
@for (int i = 0; i < maxNumberOfTheatres.Value; i++)
{
<tr>
<td id="NewTheaters" style="width:700px">
@ViewBag.ErrorMassage
<div style="position:relative; top: 0px; left: 205px; width: 278px;">
@string.Format("Theares Number {0}", i + 1)
</div>
<div>
<br />
<div class="form-group">
@Html.LabelFor(model => model[i].HomeCinemaID, "HomeCinemaID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model[i].HomeCinemaID, selectlist)
@Html.ValidationMessageFor(model => model[i].HomeCinemaID)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].TheatersName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].TheatersName)
@Html.ValidationMessageFor(model => model[i].TheatersName)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].NumberHall, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].NumberHall)
@Html.ValidationMessageFor(model => model[i].NumberHall)
</div>
<br />
</div>
<div class="form-group">
@Html.LabelFor(model => model[i].RowAmount, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model[i].RowAmount)
@Html.ValidationMessageFor(model => model[i].RowAmount)
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
}
<div class="form-group">
<div class="col-lg-push-9">
<input type="button" name="Create" value="Create" id="Create" onclick="SaveTheatre()" />
</div>
</div>
<div id="divLoading" style="display: none; align-items: center">
<img src="~/Image/Elements/ajax-loader.gif" />
</div>
<div id="divResult"></div>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.sigmacape.unobtrusive-1.1.2.js"></script>
<script type="text/javascript">
function SaveTheatre() {
$.ajax({
url: '@Url.Action()',
type: 'POST',
traditional : true,
data: $('form:first').serializeArray(),
// contentType: 'application/json; charset=utf-8', ---> this will give you Exeption Invalid JSON Primitive!!
success: function (result) {
success(result)
},
error: function (result) {
alert(result.responseText + "Error")
$('#divLoading').hide()
}
});
}
function success(result) {
alert("success")
$('#divResult').html(result)
$('#divLoading').hide()
}
</script>