ASP.. NET MVC5, JSON,弹出partialView - set下拉列表选定
本文关键字:下拉列表 set 弹出 NET MVC5 JSON ASP partialView | 更新日期: 2023-09-27 17:51:05
我想设置DDL选择的项目与项目插入在弹出页面。使用的脚本示例从这里- http://www.advancesharp.com/blog/1126/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-2
在JsonResult中我看到插入的值(在调试模式下检查断点),但是需要帮助将此值设置为在主页面的DDL中选择的
public ActionResult WorkPlaces(int id = 0)
{
var workPlace = new Work();
return PartialView("WorkPlaces", workPlace);
}
[HttpPost]
public JsonResult WorkPlaces(Work work)
{
if (ModelState.IsValid)
{
db.Works.Add(work);
db.SaveChanges();
return Json(new { success = true });
}
return Json(work, JsonRequestBehavior.AllowGet);
}
模型类
public class Person
{
public int Id { get; set; }
[Display(Name = "Person Name")]
[Required(AllowEmptyStrings = false, ErrorMessage = "Name is required")]
public string Name { get; set; }
public Nullable<int> WorkId { get; set; }
public virtual Work Work { get; set; }
}
public class Work
{
public int Id { get; set; }
[Display(Name = "Work place")]
[Required(AllowEmptyStrings = false, ErrorMessage = "Name is required")]
public string workPlace { get; set; }
}
主页 @model testAppAuth.Models.Person
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.WorkId, "WorkId", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("WorkId", null, htmlAttributes: new {@class = "form-control"})
@Html.ValidationMessageFor(model => model.WorkId, "", new {@class = "text-danger"})
<a class="btn btn-success" data-modal="" href="/Person/WorkPlaces" id="btnCreate">
<span class="glyphicon glyphicon-plus"></span>
</a>
</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>
@Html.ActionLink("Back to List", "Index")
</div>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
@section scripts{
@Scripts.Render("~/Scripts/Appjs/WorkPlace.js")
}
弹出页面 @model testAppAuth.Models.Work
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Add new workplace</h3>
</div>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Work place</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.workPlace, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.workPlace, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.workPlace, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="modal-footer">
<span id="progress" class="text-center" style="display: none;">
<img src="/images/wait.gif" alt="wiat" />
Wait..
</span>
<input class="btn btn-primary" type="submit" value="Save" />
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
}
<script>
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
</script>
弹出窗口脚本
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
另外,使用这个脚本,即使我在模型类中设置[Required]属性,如果我单击关闭按钮而不填充字段,它也会关闭。如何使它不闭合?
你的第一个问题:
你可以使用Jquery:当你关闭对话框时(成功)调用一个Jquery函数,该函数将接受提交的值并更改主页面的选中项。
,
success: function (result) {
//change the selected item
}
第二个问题:
Ajax调用不关心模型验证。
当你从你的模态提交数据时,在进行AJAX调用之前验证必需字段的值。
。
$('form', dialog).submit(function () {
if(isValidInput()){
$('#progress').show();
//make Ajax Call
}
});
function IsValidInput(){
//do validation
}
对于您的问题如何在关闭模型之前验证使用以下代码
$(function () {
$('#myModal').on('hide.bs.modal', function (event) {
var form = $("#formid");
form.Validate();
if(form.Valid()){
//Ajax;
}
else{
event.PreventDefault();
}})});
现在在ajax成功使用jquery添加值到下拉菜单