在启动模式窗口上启动 ajax (ASP.NET MVC)答案

【问题标题】：Launch ajax on launch modal window (ASP.NET MVC)在启动模式窗口上启动 ajax (ASP.NET MVC)
【发布时间】：2017-06-06 17:59:59
【问题描述】：

我有通过按钮单击打开的模态窗口

这是视图中的代码：

<button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Описание вакансии</button>

<div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Описание</h4>
        </div>
        <div class="modal-body">
            @Html.Partial("~/Views/Questions/Info.cshtml")
        </div>
    </div>

</div>

这是模态代码：

  <div id="detail">

</div>

<script>
    $(document).ready(function() {
        emaillist_update2();
    });

    function emaillist_update2() {
        var url = window.location.pathname;
        var id = url.substring(url.lastIndexOf('/') + 1);
        $.ajax({
            url:'@Url.Action("Displayinfo2","Questions")',
            type: 'Post',
            dataType: 'Json',
            data: {
                ID: id
            },
            success: function(result) {
                var info = result;

                $("#detail").append(info.Greeting);
            },
            error: function(result) {
                alert('Error');
            }
        });
    }
</script>

Maodal 是局部视图

我在模态脚本中的问题在它打开的地方不起作用。看起来它在页面加载时有效，而不是模式。

当我打开模态时如何运行它？

【问题讨论】：

从 document.ready 中取出函数调用并将其移至按钮 onclick 事件。您还需要在函数中处理模态可见性，或者在 onclick 事件中添加一些可见性逻辑。
这是因为@Html.Partial 在页面加载时呈现，而不是在单击按钮时呈现。将此添加到按钮将使其在每次单击时运行该功能： onClick=" emaillist_update2()"
@Logan 您能否为下面的答案投票。它对我有用。仅在单击模型按钮时调用脚本。投票，以便其他人可以查看答案。

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

这就是你的做法：

名为 _Info.cshtml 的视图共享中的部分视图：

A Partial View
<div id="detail" />

控制器/模型：

public class MyDataModel
{
    public int ID { get; set; }
}

//Create an edmx to your table
public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index2005(string ID)
    {
        return Json(new
        {
            Greeting = "This is a Greeting" 
        }
        , @"application/json");
    }

    public ActionResult Index2005(int? id) //argument to differ from post
    {
        return View();
    }

查看：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2005</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".btn").click(function () {
                emaillist_update2()
            })

            function emaillist_update2() {
                alert("ap");
                var url = window.location.pathname;
                //var id = url.substring(url.lastIndexOf('/') + 1);
                var id = "you can compute the id";

                $.ajax({
                    //modified the url for my use
                    url: '/Home/Index2005',
                    type: 'POST',
                    dataType: 'json',
                    data: { ID: id },
                    success: function (result) {
                        $("#detail").append(result.Greeting);
                    },
                    error: function (result) {
                        alert('Error');
                    }
                });
            }

        })
    </script>
</head>
<body>
    <button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Описание вакансии</button>
    <div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Описание</h4>
                </div>
                <div class="modal-body">
                    @*put partial class in views share*@
                    @Html.Partial("_Info")
                </div>
            </div>

        </div>
    </div>
</body>
</html>

【讨论】：