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]属性,如果我单击关闭按钮而不填充字段,它也会关闭。如何使它不闭合?

ASP.. NET MVC5, JSON,弹出partialView - set下拉列表选定

你的第一个问题:

你可以使用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添加值到下拉菜单