Question

您想要打开一个显示产品列表的模式，为此您可以使用以下按钮打开模式：

<a data-toggle="modal" id="pedirDesayuno" href="#myDesayunoPartial" class="btn btn-info">Desayunos <span class="glyphicon glyphicon-plus-sign"></span> </a>

在我的主视图中，您有模态和我引用脚本的部分

<!-- Modal PartialView -->
<div class="modal fade" id="myDesayunoPartial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body"><div class="te">Espere Porfavor...</div></div>
        </div>
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script src="~/Scripts/PartialViews/Modal.js"></script>
}

我的脚本Modal.js：

$("#pedirDesayuno").click(function (eve) {

    $("modal-content").load("/Ordens/PedirDesayuno");
});

和我打开列表的控制器：

[HttpGet]
public ActionResult PedirDesayuno()
{
   var listadesayuno = db.Productoes.Where(c => c.CategoriaProducto.v_Nombre == "DESAYUNO").ToList();
    return View(listadesayuno);
}

和我的部分视图PedirDesayuno.cshtml：

@model IEnumerable<SistemaComandas.Models.Producto>


<h2>Agregar Producto</h2>
<h3>@ViewBag.Error</h3>


<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>

<body>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <hr />
        <div class="form-horizontal">       
            <table class="table table table-bordered table-responsive table-striped table-hover">
                <tr>

                    <th>
                        @Html.DisplayNameFor(model => model.v_Nombre)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Precio_Unitario)
                    </th>

                    <th></th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>

                        <td>
                            @Html.DisplayFor(modelItem => item.v_Nombre)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Precio_Unitario)
                        </td>

                        <td>                          
                        </td>
                    </tr>
                }

            </table>        
        </div>
    }

</body>
</html>

问题是我的模态窗口没有打开产品列表，只是加载了一个部件，如图所示：

我做错了什么？如何在模态视图中接收列表？对我有什么帮助吗？

Answer 1

$("modal-content")返回undefined（它不是有效的选择器）。如果您希望元素为class="modal-content"，则需要

$(".modal-content").load("/Ordens/PedirDesayuno");

然而，我怀疑你真正想要的是

$(".modal-body").load("/Ordens/PedirDesayuno");

这样就不会从对话框中删除关闭按钮和标题。

此外，由于您没有任何表单控件，因此@using (Html.BeginForm())和@Html.AntiForgeryToken()毫无意义，您需要删除<html>，<head>和{{1}来自部分的标记，包括脚本。

如何使用MVC将IEnumerable <model>传递给Modal视图

1 个答案: