Question

我是asp.net MVC 5的新手，我想知道如何使用Ajax以局部视图调用模态？我曾尝试过一些代码，但模式并没有显示出来。有人帮吗？这是我的代码：

查看

    <script>
        @Scripts.Render("~/bundles/jqueryval")

                // Create
                $(".modalCreate").click(function (e) {
            e.preventDefault();
            $.ajax({
                cache: false,
                type: "GET",
                url: '@Url.Action("Create","Category")',
                success: function () {
                        $(this).attr('data-target', '#createCat');
                        $(this).attr('data-toggle', 'modal');
                    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
                    $('body').on('click', '.modal-close-btn', function () {
                        $('#createCat').modal('hide');
                    });
                    //clear modal cache, so that new content can be loaded
                    $('#createCat').on('hidden.bs.modal', function () {
                        $(this).removeData('bs.modal');
                    });
                    $('#CancelModal').on('click', function () {
                        return false;
                    });

                    // Init JQuery Validation for view
                    $("form").removeData("validator");
                    $("form").removeData("unobtrusiveValidation");
                    $.validator.unobtrusive.parse("form");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    displayAjaxError(thrownError);
                }
            });
        });
        </script>


<p>

    @Html.ActionLink("Create Category ", "Create", "Category",
        null, new { @class = "modalCreate btn btn-success" })
</p>

<div id="createCat" class="modal fade"
     tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>

这是我的控制者：

  public ActionResult Create()
    {
        return PartialView("_Create");
    }

    // POST: /Category/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(CategoryCreateVM productcategory)
    {
        if (ModelState.IsValid)
        {
            ProductCategory cat = Mapper.Map<CategoryCreateVM, ProductCategory>(productcategory);

            db.ProductCategories.Add(cat);
            db.SaveChanges();
            TempData["Message"] = "New Category added sucessfully.";
            ViewBag.Message = "New Category added sucessfully.";
            return RedirectToAction("Index");
        }

        return PartialView(productcategory);
    }

和部分观点：

<div class="modal-dialog">
    <div class="modal-body">
        <div class="modal-content">
            @using (Html.BeginForm("Create", "Category", FormMethod.Post))
            {
}

        </div>
    </div>
</div>

我使用boostrap默认主题来做。我尝试在浏览器检查中调试它不会显示任何错误。但我可以肯定它能够找到我的局部视图，但模态永远不会出现。我希望任何人都可以帮我查看我的代码。

Answer 1

如果我理解这就是这样： 1-在模拟的每个部分的"<script>" Views->Shared->_Layout部分特定id中添加模态模板，以便在任何地方使用它，例如：

<!-- Modal start-->
    <div class="modal fade" id="Modalid" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"></button>
                    <h4 class="modal-title" id="ModalLabelid">Modal title</h4>
                </div>
                <div class="modal-body" id="ModalBodyid"></div>
            </div>
        </div>
    </div>
    <!--Modal End-->

2-然后在任何您想要使用模式的视图中添加以下代码：

<script>
function functionname() {
        $("#Modalid").modal();
        $("#ModalLabelid").html("YourTitle");
        $("#ModalBodyid").load("url of partial view or anything that you want show in modal body");
    }
</script>

现在如果你想从某个partialview加载模态体，请在.load（）方法中写入url：

$("#ModalBodyid").load("/Controller/Action/");

如果您的操作应该获取参数，请完全按照整个操作添加参数名称：

$("#ModalBodyid").load("/Controller/Action/" + NameOfParameterinAction);

最后要使用您的脚本，您应该从任何视图中调用functionname()所需的任何位置：）

Asp.net MVC 5 Ajax调用模式对话框

1 个答案: