如何查询部分视图并以模态渲染它？

Question

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

实施例

有效观点

<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>

控制器中视图部分的方法

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);
}

这是否有意义，是否可以使其有效？

Answer 1

你需要做两件事：

1. 更改您的Confirm方法，以便它返回PartialView(reservation)而不是View(reservation)

2. 您需要使用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' }