我正在用 asp.net MVC 开发一个项目。现在我想在 ViewModel 中为“成功添加”的新值(按表单)制作弹出窗口。我应该使用 JSON , AJAX 和 jquery 技术来做到这一点,但经过 1 天的尝试没有成功,我希望得到你的帮助。
我想收到弹出“成功消息”的表单称为“测量”。
这就是视图模型“测量”中的源代码
@model ePatient.Web.Models.MeasurementModels
@{
ViewBag.Title = "Register";
}
<script>
$(document).ready(function () {
$('.date').datepicker({dateFormat: "mm/dd/yy"});
});
</script>
<h2>Create a New Account</h2>
<p>
Use the form below to create a new account.
</p>
<p>
Passwords are required to be a minimum of @ViewBag.PasswordLength characters in length.
</p>
<link href="../../../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"> </script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"> </script>
@using (Html.BeginForm())
{
<div>
<fieldset>
<legend>Account Information</legend>
@* Measure *@
<div class="editor-label">
@Html.LabelFor(m => m.MeasureList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.Measure, Model.MeasureList))
</div>
@* MeasureVal *@
<div class="editor-label">
@Html.LabelFor(m => m.MeasureVal)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MeasureVal)
@Html.ValidationMessageFor(m => m.MeasureVal)
</div>
@* InsulinType *@
<div class="editor-label">
@Html.LabelFor(m => m.InsulinTypeList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.InsulinType, Model.InsulinTypeList, "--изберете типа на последно приетия инсулин--", null)
</div>
@* Insulin_amount *@
<div class="editor-label">
@Html.LabelFor(m => m.InsulinAmount)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.InsulinAmount)
@Html.ValidationMessageFor(m => m.InsulinAmount)
</div>
@* Weight *@
<div class="editor-label">
@Html.LabelFor(m => m.Weight)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Weight)
@Html.ValidationMessageFor(m => m.Weight)
</div>
@* Height *@
<div class="editor-label">
@Html.LabelFor(m => m.Height)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Height)
@Html.ValidationMessageFor(m => m.Height)
</div>
@* Min_pressure *@
<div class="editor-label">
@Html.LabelFor(m => m.MinPressure)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MinPressure)
@Html.ValidationMessageFor(m => m.MinPressure)
</div>
@* Max_pressure *@
<div class="editor-label">
@Html.LabelFor(m => m.MaxPressure)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MaxPressure)
@Html.ValidationMessageFor(m => m.MaxPressure)
</div>
@* Hypoglycemia *@
<div class="editor-label">
@Html.LabelFor(m => m.HypoglycemiaList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.Hypoglycemia, Model.HypoglycemiaList)
</div>
@* Measure *@
<div class="editor-label">
@Html.LabelFor(m => m.TestValue)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.TestValue)
@Html.ValidationMessageFor(m => m.TestValue)
@* Comment *@
<div class="editor-label">
@Html.LabelFor(m => m.Comment)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Comment)
@Html.ValidationMessageFor(m => m.Comment)
</div>
@* Comment *@
<div class="editor-label">
@Html.LabelFor(m => m.Created)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Created, new { @class = "date" })
@Html.ValidationMessageFor(m => m.Created)
</div>
<p>
<input type="submit" value="Register" />
</p>
</fieldset>
<script type="text/javascript">
$.ajax({
type: "POST",
url: $form.attr('/system/measurement/index'),
data: $form.serialize(),
error: HandleUnespectedError,
dataType: "json",
success: function (response) {
if (response.Success)
alert("Success" + response.Message);
else
alert("Error: " + response.Message);
}
});
</script>
</div>
}
这就是控制器“MeasurementsController”中的源代码:
#region
using System;
using System.Linq;
using System.Web.Mvc;
using ePatient.Web.Models;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
using ePatient.Web.Models;
using ePatient.Web.Utils;
#endregion
namespace ePatient.Web.Areas.Admin.Controllers
{
[Authorize(Roles = "Patient")]
public class MeasurementController : Controller
{
private readonly Doctor80Entities db = new Doctor80Entities();
public class JsonResponseModel{
public bool Success {get;set;}
public string Message {get;set;}
}
public ViewResult Index()
{
var model = new MeasurementModels
{
Created = DateTime.Now,
MeasureList = new[]
{
new SelectListItem {Value = "сутрин на гладно", Text = "сутрин на гладно"},
new SelectListItem {Value = "преди инжектиране на инсулин", Text = "преди инжектиране на инсулин"},
new SelectListItem {Value = "преди хранене", Text = "преди хранене"},
new SelectListItem {Value = "1-2 часа след хранене", Text = "1-2 часа след хранене"},
new SelectListItem {Value = "вечер преди сън", Text = "вечер преди сън"},
new SelectListItem {Value = "около 02:00-04:00 ч. през нощта", Text = "около 02:00-04:00 ч. през нощта"},
new SelectListItem {Value = "тест при неразположение(гадене,повръщане,коремна болка)", Text = "тест при неразположение(гадене,повръщане,коремна болка)"},
},
HypoglycemiaList = new[]
{
new SelectListItem {Value = "НЕ", Text = "НЕ",Selected = true},
new SelectListItem {Value = "ДА", Text = "ДА"},
},
InsulinTypeList = new[]
{
new SelectListItem {Value = "БЪРЗОДЕЙСТВАЩ ИНСУЛИН ", Text = "БЪРЗОДЕЙСТВАЩ ИНСУЛИН "},
new SelectListItem {Value = "ИНТЕРМЕДИЕРЕН ИНСУЛИН ", Text = "ИНТЕРМЕДИЕРЕН ИНСУЛИН "},
new SelectListItem {Value = "ПРЕДВАРИТЕЛНО ПРИГОТВЕНИ ИНСУЛИНОВИ СМЕСИ ", Text = "ПРЕДВАРИТЕЛНО ПРИГОТВЕНИ ИНСУЛИНОВИ СМЕСИ "},
new SelectListItem {Value = "ИНСУЛИН С МНОГО ГОЛЯМА ПРОДЪЛЖИТЕЛНОСТ НА ДЕЙСТВИЕ ", Text = "ИНСУЛИН С МНОГО ГОЛЯМА ПРОДЪЛЖИТЕЛНОСТ НА ДЕЙСТВИЕ "},
},
};
return View(model);
}
[HttpPost]
public ActionResult Index(MeasurementModels model)
{
if (ModelState.IsValid)
{
var doctor = db.tblPatients.FirstOrDefault(o => o.UserName == User.Identity.Name);
var currentUser = db.tblPatients.FirstOrDefault(o => o.UserName == User.Identity.Name);
if (doctor != null && currentUser != null && doctor.DoctorID != null)
{
db.tblMeasurements.Add(new tblMeasurement
{
Comment = model.Comment,
Created = model.Created,
DoctorID = doctor.DoctorID,
Height = model.Height,
Hypoglycemia = model.Hypoglycemia,
InsulinType = model.InsulinType,
Insulin_amount = model.InsulinAmount,
Max_pressure = model.MaxPressure,
Measure = model.Measure,
MeasureVal = model.MeasureVal,
Min_pressure = model.MinPressure,
PatientID = currentUser.ID,
Test_value = model.TestValue,
Weight = model.Weight,
});
db.SaveChanges();
return Json(new JsonResponseModel { Success = true, Message = "Your form has been sent"});
}
}
else {
model = new MeasurementModels
{
MeasureList = new[]
{
new SelectListItem {Value = "сутрин на гладно", Text = "сутрин на гладно"},
new SelectListItem {Value = "преди инжектиране на инсулин", Text = "преди инжектиране на инсулин"},
new SelectListItem {Value = "преди хранене", Text = "преди хранене"},
new SelectListItem {Value = "1-2 часа след хранене", Text = "1-2 часа след хранене"},
new SelectListItem {Value = "вечер преди сън", Text = "вечер преди сън"},
new SelectListItem {Value = "около 02:00-04:00 ч. през нощта", Text = "около 02:00-04:00 ч. през нощта"},
new SelectListItem {Value = "тест при неразположение(гадене,повръщане,коремна болка)", Text = "тест при неразположение(гадене,повръщане,коремна болка)"},
},
HypoglycemiaList = new[]
{
new SelectListItem {Value = "НЕ", Text = "НЕ",Selected = true},
new SelectListItem {Value = "ДА", Text = "ДА"},
},
InsulinTypeList = new[]
{
new SelectListItem {Value = "БЪРЗОДЕЙСТВАЩ ИНСУЛИН ", Text = "БЪРЗОДЕЙСТВАЩ ИНСУЛИН "},
new SelectListItem {Value = "ИНТЕРМЕДИЕРЕН ИНСУЛИН ", Text = "ИНТЕРМЕДИЕРЕН ИНСУЛИН "},
new SelectListItem {Value = "ПРЕДВАРИТЕЛНО ПРИГОТВЕНИ ИНСУЛИНОВИ СМЕСИ ", Text = "ПРЕДВАРИТЕЛНО ПРИГОТВЕНИ ИНСУЛИНОВИ СМЕСИ "},
new SelectListItem {Value = "ИНСУЛИН С МНОГО ГОЛЯМА ПРОДЪЛЖИТЕЛНОСТ НА ДЕЙСТВИЕ ", Text = "ИНСУЛИН С МНОГО ГОЛЯМА ПРОДЪЛЖИТЕЛНОСТ НА ДЕЙСТВИЕ "},
},
};
}
return View(model);
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
并且视图中的代码:
@model ePatient.Web.Models.MeasurementModels
@{
ViewBag.Title = "Register";
}
<script>
$(document).ready(function () {
$('.date').datepicker({dateFormat: "mm/dd/yy"});
});
</script>
<h2>Create a New Account</h2>
<p>
Use the form below to create a new account.
</p>
<p>
Passwords are required to be a minimum of @ViewBag.PasswordLength characters in length.
</p>
<link href="../../../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"> </script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"> </script>
@using (Html.BeginForm())
{
<div>
<fieldset>
<legend>Account Information</legend>
@* Measure *@
<div class="editor-label">
@Html.LabelFor(m => m.MeasureList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.Measure, Model.MeasureList))
</div>
@* MeasureVal *@
<div class="editor-label">
@Html.LabelFor(m => m.MeasureVal)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MeasureVal)
@Html.ValidationMessageFor(m => m.MeasureVal)
</div>
@* InsulinType *@
<div class="editor-label">
@Html.LabelFor(m => m.InsulinTypeList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.InsulinType, Model.InsulinTypeList, "--изберете типа на последно приетия инсулин--", null)
</div>
@* Insulin_amount *@
<div class="editor-label">
@Html.LabelFor(m => m.InsulinAmount)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.InsulinAmount)
@Html.ValidationMessageFor(m => m.InsulinAmount)
</div>
@* Weight *@
<div class="editor-label">
@Html.LabelFor(m => m.Weight)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Weight)
@Html.ValidationMessageFor(m => m.Weight)
</div>
@* Height *@
<div class="editor-label">
@Html.LabelFor(m => m.Height)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Height)
@Html.ValidationMessageFor(m => m.Height)
</div>
@* Min_pressure *@
<div class="editor-label">
@Html.LabelFor(m => m.MinPressure)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MinPressure)
@Html.ValidationMessageFor(m => m.MinPressure)
</div>
@* Max_pressure *@
<div class="editor-label">
@Html.LabelFor(m => m.MaxPressure)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.MaxPressure)
@Html.ValidationMessageFor(m => m.MaxPressure)
</div>
@* Hypoglycemia *@
<div class="editor-label">
@Html.LabelFor(m => m.HypoglycemiaList)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.Hypoglycemia, Model.HypoglycemiaList)
</div>
@* Measure *@
<div class="editor-label">
@Html.LabelFor(m => m.TestValue)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.TestValue)
@Html.ValidationMessageFor(m => m.TestValue)
@* Comment *@
<div class="editor-label">
@Html.LabelFor(m => m.Comment)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Comment)
@Html.ValidationMessageFor(m => m.Comment)
</div>
@* Comment *@
<div class="editor-label">
@Html.LabelFor(m => m.Created)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Created, new { @class = "date" })
@Html.ValidationMessageFor(m => m.Created)
</div>
<p>
<input type="submit" value="Register" />
</p>
</fieldset>
<script type="text/javascript">
$.ajax({
type: "POST",
url: $form.attr('/system/measurement/index'),
data: $form.serialize(),
error: HandleUnespectedError,
dataType: "json",
success: function (response) {
if (response.Success)
alert("Success" + response.Message);
else
alert("Error: " + response.Message);
}
});
</script>
</div>
}
我的问题是如何获得 JSON 值 success=true 并将其转换为警报弹出窗口(成功添加),通过单击“确定”重定向到某些操作。
先感谢您。