【问题标题】：How can I query a view partial and render it in a modal?如何查询部分视图并将其呈现为模式？
【发布时间】：2014-07-15 17:26:51
【问题描述】：

我在强类型控制器中有一个部分视图。是否可以在鼠标点击时呈现该视图的部分内容？

示例：

活动视图

<ul>
    <li><a href="#fireModal" class="open-popup-link">1</a></li>
    <li><a href="#fireModal" class="open-popup-link">2</a></li>
    <li><a href="#fireModal" class="open-popup-link">3</a></li>
    <li><a href="#fireModal" class="open-popup-link">4</a></li>
</ul>
<div id="modalView"></div>
<script>
    $(document).ready(function () {
        $('.open-popup-link').magnificPopup({
          key: 'my-popup',
          type: 'inline',
          inline: {
            // Define markup. Class names should match key names.
            markup: '<div class="white-popup"><div class="mfp-close"></div>awesome</div>'
          }
        },
        {
            callbacks: {
                open: function(){

                }
            }
        });

        $('.open-popup-link').on('mfpOpen', function(e /*, params */) {
        var linkText = // how to I grab this? (e.g. 1, 2, 3, or 4)
        $.ajax({
            // call view partial withlinktext as parameter
            //on success
            //  var inlineContent = viewPartialContent
            // On error
            //  var inlineCOntent = 'Uh oh, something went wrong'
        });
        });
    });
</script>

查看部分

@model *******.Models.Reservation
<div class="container">
        <div class="section-heading">
            <h2 class="red">Confirm Your Reservation</h2><br />
        </div>
        <div class="section-content">
            <div class="row">
                <h3 class="black text-center">Are you sure you want to reserve space <span class="dark-red">@Model.SpaceNumber</span></h3>
                <h4 class="black text-center">for <span class="dark-red">@Model.Game.Description</span> on <span class="dark-red">@Model.Game.Date.ToShortDateString()</span>?</h4>
            </div>
            <div class="row">
                <div class="hero-buttons text-center">
                    <a href="#" class="btn btn-gray btn-lg white">No</a>
                    <form action="/api/Reservations" method="post" id="confirmationForm">
                        @Html.Hidden("eRaiderUserName", @Model.eRaiderUserName)
                        @Html.Hidden("SpaceNumber", @Model.SpaceNumber)
                        <input type="submit" value="Yes" class="btn btn-red btn-lg white">
                    </form>
                </div>
            </div>
        </div>
    </div>

控制器中viewpartial的方法

public ActionResult Confirm(int spaceNumber)
{
    var reservation = new Reservation { SpaceNumber=spaceNumber, UserName=AppSettings.CurrentUserName, Game=db.Games.FirstOrDefault(g => g.ID == AppSettings.CurrentGameID) };
    return View(reservation);
}

这有意义吗？我可以让它工作吗？

【问题讨论】：

您的代码看起来太复杂，无法达到您想要的效果。您想在哪里渲染局部视图（顺便说一句，这就是它的名称）？

标签： c# asp.net ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

你需要做两件事：

更改您的 Confirm 方法，使其返回 PartialView(reservation) 而不是 View(reservation)
您需要使用 AJAX，例如 jQuery ajax，来获取 HTML，并将其呈现在您的页面中

$.ajax({url = 'the url for your Confirm action', type = 'GET', dataType='html', data = params}).done(function(html) { // use the jQuery and the html to inject it wherever you need in your page });

注意：params 是一个 jQuery 对象，在这种情况下，它包含您需要传递的数据，例如 spaceNumber，即

var params = { spaceNumber: 'spaceNumberValue' }

【讨论】：