我建立了一个带有简单联系表单的 View ，其中包含姓名、电子邮件和电话。我在同一父页面上重复使用此表单两到三次。当用户提交其中一个表单时，我检测提交的表单并使用 Dapper 通过 javascript/jQuery 将内容发布到数据库。 .
问题是当我在任何页面上重复使用联系表单时，输入字段将不会使用唯一 ID 生成。这会导致 w3 验证失败并显示Duplicate ID。在这种特殊情况下，我需要页面通过 w3 验证。
我该如何解决这个问题？我尝试使用 ViewData.TemplateInfo.HtmlFieldPrefix 为输入字段添加前缀，但并没有真正解决问题，因为前缀值是静态的。如果我使用随机前缀值，那么如何在 HttpPost Controller 中捕获它？
这是我的代码。
索引.cshtml
- 多次引用 ContactForm.cshtml:
<html>
<head>...</head>
<body>
....
@{Html.RenderAction("ContactForm")}
....
@{Html.RenderAction("ContactForm")}
....
</body>
</html>
ContactForm.cshtml
@model ProjectX.Models.CaseModel
@using (Html.BeginForm("SendMessage", "Home", FormMethod.Post))
{
@Html.TextInputFor(model => model.Name, Res.Name, new { placeholder = Res.Name } )
@Html.TextInputFor(model => model.Phone, Res.Phone, new { placeholder = Res.Phone, type = "tel" })
@Html.TextInputFor(model => model.Email, Res.Email, new { placeholder = Res.Email, type = "email" })
<input type="submit" value="Send" onclick="jsSaveForm(event);" />
}
// @Html.TextInputFor MvcHtmlString helper method
public static MvcHtmlString TextInputFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string title, Object htmlAttributes = null)
{
var req = ModelMetadata.FromLambdaExpression(expression, helper.ViewData).IsRequired;
var name = helper.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
if (req)
title += " *";
string html = String.Format("<div class=\"inp\"><label for=\"{2}\">{0}</label>{1}</div>", helper.ValidationMessageFor(expression), helper.TextBoxFor(expression, htmlAttributes), name);
return new MvcHtmlString(html);
}
CaseModel.cs
public class CaseModel
{
[Required(ErrorMessageResourceType = typeof(Res), ErrorMessageResourceName = "ValidationRequired")]
public string Name { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
家庭 Controller
// GET
[ChildActionOnly]
[Route("~/Home/ContactForm")]
public ActionResult ContactForm()
{
// tried this but this is a static value.
// ViewData.TemplateInfo.HtmlFieldPrefix = "SomePrefix";
return PartialView(new CaseModel());
}
// POST
[HttpPost]
[Route("~/Home/SendMessage")]
public async Task<PartialViewResult> SendMessage(CaseModel model)
{
... brevity...
await SaveData(model);
}
最佳答案
例如，您可以通过在 htmlAttributes 参数中将 id 属性设置为空字符串来删除它
@Html.TextInputFor(model => model.Name, Res.Name, new { id = "", placeholder = Res.Name } )
尽管您可能需要考虑在 TextInputFor() 扩展方法中执行此操作。
顺便说一句，您的扩展方法不会考虑属性的显示名称(使用 [Display(Name = "...")] 属性时，以及 title 参数是不必要的。我建议你的代码应该是
public static MvcHtmlString TextInputFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
string displayName = metaData.DisplayName;
if (metaData.IsRequired)
{
displayName += " *";
}
StringBuilder html = new StringBuilder();
html.Append(helper.LabelFor(expression, displayName).ToString());
html.Append(helper.TextBoxFor(expression, htmlAttributes).ToString());
html.Append(helper.ValidationMessageFor(expression).ToString());
TagBuilder container = new TagBuilder("div");
container.AddCssClass("inp");
container.InnerHtml = html.ToString();
return new MvcHtmlString(container.ToString());
}
关于javascript - 如何在同一模型的同一MVC页面上重用表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46858964/