我如何查询一个视图的部分和渲染它在一个模态

本文关键字：一个 模态 何查询 视图 查询 | 更新日期: 2023-09-27 18:12:58

我在一个强类型控制器中有一个视图局部。是否有可能在鼠标点击时渲染该视图的部分内容?

例子:

活动视图 

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

这有意义吗?我能让它工作吗?

我如何查询一个视图的部分和渲染它在一个模态

您需要做两件事:

  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' }
相关文章：