3
私は小さなサンプルに大きな問題を最小限に抑えようとしたので、新しいサンプルWebプロジェクトを作成しました。 VSのmvc-empty私は家のコントローラで "インデックス"という名前のビューを作成しました。 Indexビューコード：asp.net mvcでAjax.BeginFormを送信した後、jQueryコードが正常に動作しない
@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>
}
ホームコントローラコード：
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);
}
}
}
_Orders部分図のインデックスview.Theコードの上にレンダリングされる「_Orders」という名前の部分図は、もあります。
@model WebApplication16.ViewModels.Home.OrdersVM
@using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
}, new { id = "ajax-form" }))
{
<div id="result">
<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", })
@Html.ValidationMessageFor(x => x.Type)
</div>
<div>
<p>@Model.Info</p>
</div>
<button type="submit" class="btn btn-primary" name="ok"> OK</button>
</div>
}
<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>
Index model is described by class IndexVM:
public class IndexVM
{
public IndexVM()
{
this.Orders = new OrdersVM();
}
public OrdersVM Orders { get; set; }
}
_Ordersモデルは、クラスOrdersVMによって記述される：
public class OrdersVM
{
[Required]
public string Name { get; set; }
public string Info { get; set; }
[Required]
public TypeEnum Type { get; set; }
public List<SelectListItem> TypeControlDataSource { get; set; }
}
public enum TypeEnum
{
I,
II,
III
}
id = "Type"のDropDownListForコントロールの値を変更した後、id = "order-current"のコンテナにインデックスビューのjqueryコードで隠しフィールドの画像を挿入し、その操作の後にajax形式提出する必要があります。これは、適切けどにHomeControllerから
return PartialView("~/Views/Home/_Orders.cshtml", dataVM.Orders);
を呼び出した後に動作しますが、フィールドの情報が正しく更新されますが、「注文電流」のdivコンテナから注入された画像がなくなっています。私はF12ボタンを使用してGoogle Chromeの何が間違っているかを調べようとしましたが、エラーはありませんが、 "browserLink"スクリプトに無限ループが発生しました。理由を説明できません。 私が望むのは、ajax形式を送信した後、id = "order-current"のコンテナ内に注射した画像を見ることだけです。どのようにこれを行うには、私は間違っていた？