啓動AJAX（ASP.NET MVC）

我有通過按鈕打開模態窗口中單擊啓動AJAX（ASP.NET MVC）

這裏是查看代碼：

<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是局部視圖

我在模態中的腳本中的問題不起作用，它打開。看起來像是在頁面加載時工作，而不是模態。

當我打開模式時，如何運行它？

來源

2017-06-06 Logan

從document.ready和mo中取出函數調用將它加入按鈕onclick事件。您還需要處理函數中的模態可見性，或者在onclick事件中添加一些可見性邏輯。 – mjw

這是因爲@ Html.Partial在頁面加載時呈現，而不是在單擊按鈕時呈現。添加到按鈕將使其運行每次點擊的功能：onClick =「emaillist_update2（）」 – Dillon

@Logan你可以請upvote下面的答案。它爲我工作。只有在點擊模型按鈕時才調用腳本。 Upvote讓其他人可以查看答案。 – kblau

這是你如何做到這一點：

鑑於部分查看共享命名_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>

來源

2017-06-06 21:56:36 kblau

啓動AJAX（ASP.NET MVC）

回答

相關問題