MVC 5 множественных токенов защиты от подделки AJAX
Моя проблема в том, что у меня есть частичное представление, которое содержит форму, полную выпадающих. Я использую AJAX для динамического обновления выпадающего контента. Все работает нормально, пока я не использую токены Anti Forgery. После сериализации моей формы в посте ajax я собираю оба жетона защиты от подделки в моем _LoginPartial.cshtml форма и маркер защиты от подделки в форме, из которой я публикую данные _config.cshtml, Это приводит к тому, что атрибут проверки закрывает сообщение и мешает работе AJAX.
Я пробовал следующее:
Извлеките все токены и просто поместите один токен в
_Layout.cshtmlи ссылаясь на это в вызове AJAX. Это работает для Ajax, но при отправке формы я получаю ошибку токена не найдена, так как токен не находится в форме.Затем я попытался опубликовать форму с помощью AJAX и сослаться на один токен в
_Layout.cshtmlПосмотреть. Это вернуло данные в ajax, а не в целое представление, как я надеялся.
Мои вопросы:
- Как я могу поместить только текущий токен формы в функцию поста ajax?
- В качестве альтернативы, есть ли правильный способ сделать то, что я пытаюсь сделать?
Я почти уверен, что есть простой способ разобраться в этом, но я действительно только начинающий со всем этим, и я пытаюсь найти свои ноги. Любая помощь будет оценена.
_LoginPartial.cshtml
@using Microsoft.AspNet.Identity
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
if (Request.IsAuthenticated)
{
<ul class="nav navbar-nav navbar-right">
<li>
@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
@if (User.IsInRole("admin"))
{
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
}
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
@if (User.IsInRole("admin"))
{
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
}
<li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Doogies Website</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
</head>
<body>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "_AFT"})) { @Html.AntiForgeryToken()}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Doogies Site", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("RTCG", "RTCG_Configurator", "Rtcg")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content" >
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Chris Duguid</p>
</footer>
</div>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
_config.cshtml (частичное представление, где находится форма)
Да, я знаю, что в форме нет информации для отправки. Я нахожусь в точке, где я пробовал отправку с использованием ajax.
@model HomeWeb.Models.RtcgConfigurationModel
@using (Html.BeginForm( new { enctype = "multipart/form-data" , id = "configform"}))
{
<div class="form-horizontal">
<h3>Configure RTCG</h3>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.RtcgCabinetType, "Cabinet Type", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgCabinetType, Model.Cabinets, new { onchange = "changed();" })
@Html.ValidationMessageFor(model => model.RtcgCabinetType)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgAdaptorType, "Adaptor Type", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgAdaptorType, Model.Adaptors, new { onchange = "changed();" })
@Html.ValidationMessageFor(model => model.RtcgAdaptorType)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgQtyAdaptors, "Adaptor Qty.", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgQtyAdaptors, Model.AdaptorQtys, new { onchange = "changed();" })
@Html.ValidationMessageFor(model => model.RtcgQtyAdaptors)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgTerminationMethod, "Termination", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgTerminationMethod, Model.TerminationMethods)
@Html.ValidationMessageFor(model => model.RtcgTerminationMethod)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgFaceplateStyle, "Faceplate Style", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgFaceplateStyle, Model.FacePlateStyles)
@Html.ValidationMessageFor(model => model.RtcgFaceplateStyle)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgScreenPrinting, "Screenprinting", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgScreenPrinting, Model.ScreenPrintOptions)
@Html.ValidationMessageFor(model => model.RtcgScreenPrinting)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgApplication, "Fibre Type", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgApplication, Model.Applications)
@Html.ValidationMessageFor(model => model.RtcgApplication)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.RtcgVerminProof, "Vermin Proof", new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.DropDownListFor(model => Model.RtcgVerminProof, Model.VerminProofing)
@Html.ValidationMessageFor(model => model.RtcgVerminProof)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-10">
<input value="Get Quotation" class="btn btn-primary" style="float: none" onclick="submitajax()" />
</div>
</div>
</div>
}
<script type="text/javascript">
function changed() {
var tokensource = $('#_AFT');
var formData = $('form').serialize();
var token = $('input[name="__RequestVerificationToken"]', tokensource).val();
$.extend(formData, { '__RequestVerificationToken': token });
$.ajax({
url: '/Rtcg/Ajax_DropdownChanged',
type: "POST",
data: formData,
success: function (result) {
$('#config-form').html(result);
},
})
}
function submitajax() {
var tokensource = $('#_AFT');
var formData = $('form').serialize();
var token = $('input[name="__RequestVerificationToken"]', tokensource).val();
$.extend(formData, { '__RequestVerificationToken': token });
$.ajax({
url: '/Rtcg/updateDB',
type: "POST",
data: formData,
success: function (result) {
},
})
}
</script>
RTCG_Configurator (представление индекса при представлении тела)
@model HomeWeb.Models.RtcgConfigurationModel
@{
ViewBag.Title = "RTCG Configurator";
}
<section >
<div class="col-md-6 pv" id="config-form">
@Html.Partial("_config")
</div>
<div class="col-md-6" >
</div>
</section>
<div style="clear:both">
<br /><br />
<p><a href="~/Home/Index" class="btn btn-primary btn-sm">« Back Home </a></p>
</div>
Контроллер - Ajax_DropdownChanged()
// POST: handle dropdown changes from Ajax
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Ajax_DropdownChanged(RtcgConfigurationModel formData)
{
//handle 'postback' displaying the fields.
if (ModelState.IsValid)
{
RtcgConfigurationModel model = new RtcgConfigurationModel();
using (var db = new ApplicationDbContext())
{
model.Cabinets = DisplayElement.Cabinets(formData);
model.Adaptors = DisplayElement.Adaptors(formData);
model.AdaptorQtys = DisplayElement.AdaptorQuantities(formData);
model.TerminationMethods = DisplayElement.Termination(formData);
model.FacePlateStyles = DisplayElement.Faceplates(formData);
model.ScreenPrintOptions = DisplayElement.ScreenPrinting(formData);
model.Applications = DisplayElement.Application(formData);
model.VerminProofing = DisplayElement.VerminProof(formData);
}
return PartialView("_config", model);
//return View(model);
}
else
{
return PartialView();
}
}
2 ответа
Ваше использование var formData = $('form').serialize(); будет сериализовать значения всех элементов управления формы во всех формах в представлении, включая токены защиты от подделки, поэтому вы отправляете несколько токенов.
Убедитесь, что каждая форма имеет id атрибут, а затем передать только значения (и токен) в форме с id="configform"использовать
var formData = $('#configform').serialize();
Обратите внимание, что вам не нужно
var token = $('input[name="__RequestVerificationToken"]', tokensource).val();
$.extend(formData, { '__RequestVerificationToken': token });
поскольку .serialize() уже включает пару имя / значение для токена (при условии @Html.AntiForgeryToken() включен между <form> теги)
Проблема была ошибкой новичка.
Как сказал Стивен в своем ответе. Я не обращался к форме в частности. Добавление $('#configform'). Serialize() сделало свое дело.
Я добавил токен в каждую форму и удалил его со страницы макета.
Вот мой код Ajax сейчас.
<script type="text/javascript">
function changed() {
$.ajax({
url: '/Rtcg/Ajax_DropdownChanged',
type: "POST",
data: $('#configform').serialize(),
success: function (result) {
$('#config-form').html(result);
},
})
}
</script>
Стивен должен быть в плаще.