Question

我有一个包含信息的表，我想点击链接（这是一个bootstrap gliphycon），当我点击这个链接时，我想在bootstrap模式中渲染一个局部视图，其中包含有关此列表项的所有信息。 / p>

我的控制器

self.databaseRef.child("App_Queue/\(Category1)").queryLimitedToLast(15).observeEventType(.ChildAdded, withBlock: { (snapshot) in
...

我调用action方法将数据返回到modal：

public PartialViewResult Details(int id)
        {
            try
            {
                return PartialView("Details", _paisRepository.GetDetails(id));
            }
            catch (Exception)
            {
                ViewBag.error = "Não foi possivel buscar os dados!";
                return PartialView("Error");
            }
        }

和bootstrap模态

<a href="/Pais/Details/@item.ID">
   <div class="glyphicon glyphicon-search" style="cursor:pointer"></div>
</a>

Answer 1

第一：

向您的glyphicon添加一个javascript函数调用并发送当前对象项ID

   <span class="glyphicon glyphicon-search" style="cursor:pointer" data- onclick="ShowDetails('@item.id')"></span>

将您的模态改为：

<div class="modal" id="exibirPais" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
                <span class="glyphicon glyphicon-search"></span>
                <label class="control-label">Exibir</label>
            </h4>
        </div>
        <div class="modal-body" id="Body">
         @*  Body where the  partial view will be rendered using AJAX*@

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger">Fechar</button>
        </div>
    </div>
</div>

你的javascript函数：

 function ShowDetails(Id) {
        $("#exibirPais").modal();
        $.ajax({
            url: '/Controller/Details/' + Id,
            success: function(result) {
                $('#Body').html(result);

            }
        });
    }

Answer 2

你应该听这个标签上的click事件，并使用ajax向服务器操作方法发出请求，并使用回来的响应来构建模态对话框。

因此，在主视图中，渲染a标记时，可以将href值设置为action方法的url路径。

<table>
@foreach (var item in SomeCollection)
{
  <tr>
     <td>
         <a href="@Url.Action("Details",new {id=item.Id})" class="modal-link">
                     <div class="glyphicon glyphicon-search" style="cursor:pointer"></div>
         </a>
     </td>
  </tr>
}
</table>

我们在锚标记中添加了一个css类modal-link。现在让我们添加监听锚标记上的click事件（使用此css类），对所点击链接的href值进行tan ajax调用。当ajax方法返回结果（由action方法生成的html标记）时，我们将使用它作为模态对话框内容。

$(function() {    

     $('body').on('click', '.modal-link',function (e) {
         e.preventDefault();

         $("#myModal").remove();

         $.get($(this).attr("href"),function (data) {
               $('<div id="myModal" class="modal fade"><div class="modal-dialog" 
                                                                    role="document">' +
                            data +'</div></div>').modal();
         });
     });

})

此代码将使用来自Details操作方法的部分视图结果替换模态的整个内容。这意味着Details.cshtml局部视图中的you need to include the necessary markup needed for the modal header and footer（带按钮）。

Answer 3

通过javascript中的点击事件

 $("#exibirPais").load('@Url.Action("PartialViewResult", "Controller_Name")');

N.B。：PartialViewResult必须返回PartialView（模型）; 和.cshtml页面部分页面

如何在链接中单击时呈现局部视图

3 个答案: