Bootbox проверки формы
Я показываю PartialView
в Bootbox
От другого PartialView
, Тогда данные PartialView
будут сохранены в базе данных. Теперь, прежде чем сохранить его в базе данных, я должен убедиться, что все обязательные поля имеют правильные значения (например, не пусто).
Пожалуйста, найдите ниже коды.
Частичное представление для отображения в Bootbox (диалог)
@model WebSensoryMvc.Models.SampleData
@using (Html.BeginForm("Create", "SessionData", FormMethod.Post, new { id = "FormCreateSample", name = "FormCreateSample" }))
{
@Html.AntiForgeryToken()
<div class="container">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.GroupNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.GroupNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.GroupNo, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.MaterialID, "Material", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("MaterialID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.MaterialID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.SampleCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.SampleCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.SampleCode, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.BatchCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BatchCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.BatchCode, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.SizeID, "Size", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("SizeID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.SizeID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.AgeID, "Age", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AgeID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.AgeID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.TemperatureID, "Temperature", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("TemperatureID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.TemperatureID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.PackagingTypeID, "Packaging Type", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("PackagingTypeID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PackagingTypeID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.Spike, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Spike)
@Html.ValidationMessageFor(model => model.Spike, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.SampleType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.SampleType, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.SampleType, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
@Html.LabelFor(model => model.Remarks, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Remarks, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Remarks, "", new { @class = "text-danger" })
</div>
</div>
</div>
@*<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>*@
</div>
</div>
}
Скрипт для отображения Bootbox с Partial View
<script>
$(document).ready(function () {
$("#modalCreateSample").on('click', function () {
$.ajax({
url: "/SessionData/Create",
type: 'GET',
success: function (data) {
bootbox.dialog({
title: "Create Session",
message: data,
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
$.ajax({
url: "/SessionData/Create",
data: $("#FormCreateSample").serialize(),
type: "POST",
success: function (data) {
alert('success');
return true;
},
error: function (error) {
alert('error');
return false;
}
});
}
}
}
});
},
error: function (error) {
alert("Error: Please try again.");
}
});
});
});
</script>
Ниже приведен пример фрагмента моей текущей страницы. Как только пользователь нажмет кнопку " Сохранить", он должен запустить проверку во всплывающем окне.
Моя проблема сейчас заключается в том, как реализовать проверку в PartialView
а также Bootbox
? Любое предложение? ТИА
**************************** Обновление № 1 **************************** Я в конечном итоге с помощью Bootstrap Modal
вместо того, чтобы использовать Bootbox
, Теперь я могу проверить свою форму, используя код, предоставленный @Stephen Muecke.
Я просто продолжаю следить за этим. При звонке мой POST
метод serialize()
метод возврата пуст? Используя мой старый кусок кода, верните правильный serialize()
данные.