Javascript jQuery代码没有’;在asp.net mvc中提交Ajax.BeginForm后无法正常工作
我试图将大问题最小化为小问题,因此创建了新的示例web项目;mvc在VS中为空。我在主控制器中创建了一个名为“索引”的视图。索引视图代码:Javascript jQuery代码没有’;在asp.net mvc中提交Ajax.BeginForm后无法正常工作,javascript,c#,jquery,ajax,asp.net-mvc,Javascript,C#,Jquery,Ajax,Asp.net Mvc,我试图将大问题最小化为小问题,因此创建了新的示例web项目;mvc在VS中为空。我在主控制器中创建了一个名为“索引”的视图。索引视图代码: @model WebApplication16.ViewModels.Home.IndexVM @{ ViewBag.Title = "Index"; } @Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders) @section scripts{ <script src=
@model WebApplication16.ViewModels.Home.IndexVM
@{
ViewBag.Title = "Index";
}
@Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders)
@section scripts{
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
$("#Type").change(function () {
$('#order-current > img').remove();
var currentOrder = "#Type_" + $("#Type").find('option:selected').text();
var $img = $(currentOrder).clone();
$img.removeClass("hidden");
$("#order-current").append($img);
$("#ajax-form").submit();
});
</script>
}
@model WebApplication16.ViewModels.Home.OrdersVM
<div id="result">
@using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
OnComplete = "OnCompleteAjaxForm()"
}, new { id = "ajax-form" }))
{
<div id="order-current">
</div>
<div>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control", style = "margin-top:10px;", id = "Name" })
@Html.ValidationMessageFor(x => x.Name)
</div>
<div>
@Html.DropDownListFor(x => x.Type, Model.TypeControlDataSource, new { @class = "form-control", style = "margin-top:10px;", id = "Type", onchange = "imageOnChangeEvent()" })
@Html.ValidationMessageFor(x => x.Type)
</div>
<div>
<p>@Model.Info</p>
</div>
<button type="submit" class="btn btn-primary" id="button_ok" name="ok"> OK</button>
}
</div>
从HomeController,字段信息被正确更新,但从“order current”div容器中注入的图片消失了。我尝试使用F12按钮查看Google Chrome中的错误,没有错误,但在“browserLink”脚本中出现了一个无限循环。我无法解释为什么。
我只想在提交ajax表单后,在容器中看到id=“order current”的注入图片。怎么做?我做错了什么 多亏了我的朋友,我终于解决了这个问题。更新“result”容器后,jQuery添加到此容器中的控件的所有事件都将取消固定。这就是它崩溃的原因。 使其正常工作的方法是创建一个函数并将其固定到AjaxBeginForm的事件OnComplete。每次通过ajax更新结果容器后,都会调用此函数。我在Home controller中也犯了一个小错误,因为我插入了一个错误的视图模型类。在所有的变化之后,它看起来是这样的; 家庭控制器代码:
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
IndexVM dataVM = new IndexVM();
GetControlsDataSource(dataVM.Orders);
return View(dataVM);
}
private static void GetControlsDataSource(OrdersVM dataVM)
{
List<SelectListItem> typeControlDataSource = new List<SelectListItem>();
foreach (var en in Enum.GetValues(typeof(TypeEnum)))
{
SelectListItem item = new SelectListItem();
item.Text = en.ToString();
item.Value = ((int)en).ToString();
typeControlDataSource.Add(item);
}
dataVM.TypeControlDataSource = typeControlDataSource;
}
[HttpPost]
public ActionResult Pay(IndexVM dataVM)
{
GetControlsDataSource(dataVM.Orders);
if (ModelState.IsValid)
{
dataVM.Orders.Info = "Info bla bla bla";
return PartialView("~/Views/Home/_Orders.cshtml", dataVM.Orders);
}
else
{
return View(dataVM);
}
}
}
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
IndexVM dataVM = new IndexVM();
GetControlsDataSource(dataVM.Orders);
return View(dataVM);
}
private static void GetControlsDataSource(OrdersVM dataVM)
{
List<SelectListItem> typeControlDataSource = new List<SelectListItem>();
foreach (var en in Enum.GetValues(typeof(TypeEnum)))
{
SelectListItem item = new SelectListItem();
item.Text = en.ToString();
item.Value = ((int)en).ToString();
typeControlDataSource.Add(item);
}
dataVM.TypeControlDataSource = typeControlDataSource;
}
[HttpPost]
public ActionResult Pay(OrdersVM dataVM)
{
GetControlsDataSource(dataVM);
if (ModelState.IsValid)
{
dataVM.Info = "Info bla bla bla";
return PartialView("~/Views/Home/_Orders.cshtml", dataVM);
}
else
{
return View(dataVM);
}
}
}
公共类HomeController:控制器
{
[HttpGet]
公共行动结果索引()
{
IndexVM dataVM=新的IndexVM();
GetControlsDataSource(dataVM.Orders);
返回视图(dataVM);
}
私有静态void GetControlsDataSource(OrdersVM dataVM)
{
List typeControlDataSource=新列表();
foreach(Enum.GetValues中的var en(typeof(TypeEnum)))
{
SelectListItem=新建SelectListItem();
item.Text=en.ToString();
item.Value=((int)en).ToString();
typeControlDataSource.Add(项);
}
dataVM.TypeControlDataSource=TypeControlDataSource;
}
[HttpPost]
公共行动结果支付(OrdersVM dataVM)
{
GetControlsDataSource(数据虚拟机);
if(ModelState.IsValid)
{
dataVM.Info=“Info bla bla bla”;
返回PartialView(“~/Views/Home/\u Orders.cshtml”,dataVM);
}
其他的
{
返回视图(dataVM);
}
}
}
索引视图:
@model WebApplication16.ViewModels.Home.IndexVM
@{
ViewBag.Title = "Index";
}
@Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders)
<div id="orders-container">
<img id="Type_I" src="~/App_Images/Type_I.png" class="img-responsive hidden" />
<img id="Type_II" src="~/App_Images/Type_II.png" class="img-responsive hidden" />
<img id="Type_III" src="~/App_Images/Type_III.png" class="img-responsive hidden" />
</div>
@section scripts{
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
function imageOnChangeEvent() {
$("#ajax-form").submit();
}
function OnCompleteAjaxForm() {
$('#order-current > img').remove();
var currentOrder = "#Type_" + $("#Type").find('option:selected').text();
var $img = $(currentOrder).clone();
$img.removeClass("hidden");
$("#order-current").append($img);
}
</script>
}
@model WebApplication16.ViewModels.Home.IndexVM
@{
ViewBag.Title=“Index”;
}
@Html.Partial(“~/Views/Home/_Orders.cshtml”,Model.Orders)
@节脚本{
函数imageOnChangeEvent(){
$(“#ajax表单”).submit();
}
函数OnCompleteAjaxForm(){
$('#order current>img')。删除();
var currentOrder=“#Type#”+$(#Type”).find('option:selected').text();
var$img=$(currentOrder).clone();
$img.removeClass(“隐藏”);
$(“#订单当前”)。追加($img);
}
}
_订单部分视图代码:
@model WebApplication16.ViewModels.Home.IndexVM
@{
ViewBag.Title = "Index";
}
@Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders)
@section scripts{
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
$("#Type").change(function () {
$('#order-current > img').remove();
var currentOrder = "#Type_" + $("#Type").find('option:selected').text();
var $img = $(currentOrder).clone();
$img.removeClass("hidden");
$("#order-current").append($img);
$("#ajax-form").submit();
});
</script>
}
@model WebApplication16.ViewModels.Home.OrdersVM
<div id="result">
@using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
OnComplete = "OnCompleteAjaxForm()"
}, new { id = "ajax-form" }))
{
<div id="order-current">
</div>
<div>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control", style = "margin-top:10px;", id = "Name" })
@Html.ValidationMessageFor(x => x.Name)
</div>
<div>
@Html.DropDownListFor(x => x.Type, Model.TypeControlDataSource, new { @class = "form-control", style = "margin-top:10px;", id = "Type", onchange = "imageOnChangeEvent()" })
@Html.ValidationMessageFor(x => x.Type)
</div>
<div>
<p>@Model.Info</p>
</div>
<button type="submit" class="btn btn-primary" id="button_ok" name="ok"> OK</button>
}
</div>
@model WebApplication16.ViewModels.Home.OrdersVM
@使用(Ajax.BeginForm(“Pay”,“Home”),新的AjaxOptions
{
InsertionMode=InsertionMode.Replace,
UpdateTargetId=“结果”,
OnComplete=“OnCompleteAjaxForm()”
},新的{id=“ajax form”})
{
@TextBoxFor(x=>x.Name,新的{@class=“form control”,style=“margin top:10px;”,id=“Name”})
@Html.ValidationMessageFor(x=>x.Name)
@Html.DropDownListFor(x=>x.Type,Model.TypeControlDataSource,新的{@class=“form control”,style=“margin top:10px;”,id=“Type”,onchange=“imageonchangevent()”})
@Html.ValidationMessageFor(x=>x.Type)
@模型信息
好啊
}
@model WebApplication16.ViewModels.Home.OrdersVM
<div id="result">
@using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
OnComplete = "OnCompleteAjaxForm()"
}, new { id = "ajax-form" }))
{
<div id="order-current">
</div>
<div>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control", style = "margin-top:10px;", id = "Name" })
@Html.ValidationMessageFor(x => x.Name)
</div>
<div>
@Html.DropDownListFor(x => x.Type, Model.TypeControlDataSource, new { @class = "form-control", style = "margin-top:10px;", id = "Type", onchange = "imageOnChangeEvent()" })
@Html.ValidationMessageFor(x => x.Type)
</div>
<div>
<p>@Model.Info</p>
</div>
<button type="submit" class="btn btn-primary" id="button_ok" name="ok"> OK</button>
}
</div>