从视图列表中的每个项目的链接打开引导模式 - MVC [英] Open bootstrap Modal from link for each item in a list in view - MVC

问题描述

我有一个对每个数据库项目列表执行循环的视图。我希望每个人都有一个详细信息操作，它会打开一个模式，将每个项目的ID传递给它，并在该模式内的部分视图中显示该项目的详细信息。

到目前为止，我有以下内容：

foreach（Model中的var item）{< a href =＃detailsModalrole =buttonclass =btndata-toggle =modal>详情< / a>}< div class =modal fade id =detailsModaltabindex = - 1role =dialogaria-labelledby =myModalLabel> < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-body> @ {Html.RenderAction（_ PartialDetails，ActivityAds，new {@id =需要通过身份证}）;}< / div> < / DIV> < / DIV> < / div>

我试图避免将模式在每个循环中，我担心这将是非常低效的，不得不为每条记录创建一个模式。我可能会调用Modal中的部分视图也是错误的。

谢谢

解决方案

一种方法是使用ajax动态地填充容器。

这里是我有一个应用程序的示例 - note那一些javascript是在外部的js文件中，所以不能直接使用模型;模型值存储在隐藏字段和/或data-id，data-value属性中为此目的

  @foreach（var assignment在Model.Assignments）
 {
将利角色= 呈现 ID = [e-mail] 数据ID = @ assignment.AssignmentView.AssignmentViewId > 
< a role =menuitemonclick =selectCriteria（this）; title =@ assignment.AssignmentView.AssignmentViewDescription> Criteria @ criteriaNumber< / a> 
< / li> 
 criteriaNumber ++; 
 
  

javascript

函数selectCriteria（clickedElement）{
 var dataid = $（clickedElement）.parent（）。attr（data-id）; 
 loadAssignmentDetails（dataid）; 
 
 
函数loadAssignmentDetails（assignmentViewId）{
 $ .ajax（{
类型：GET，
 url：Config.RootUrl +Assignments / Detail /+ assignmentViewId +/+ $（＃AssignmentTypeValueId）。val（），
 success：function（data）{
 $（＃assignmentViewDetailsContainer）.html（data） ; 
} 
}）; 
} 
  

I have a view which does a for each loop over a list of database items. I am looking to have a "Details" action for each one which opens a modal passing the id for each item into it and displays the details for that item in a partial view within that modal.

So far I have the following

@foreach (var item in Model)
{
  <a href="#detailsModal" role="button" class="btn" data-toggle="modal">Details</a>
}

 <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
                 <div class="modal-content">
                       <div class="modal-body">
@{Html.RenderAction("_PartialDetails", "ActivityAds", new { @id = "NEED TO PASS ID HERE" });}
                       </div>
              </div>
        </div>
   </div>

I am trying to avoid putting the modal in the for each loop as I fear that would be very inefficient having to create a modal for every record. I could be calling the partial view in the Modal wrong as well. I am out of practise Im afraid and I am sure there is a way to do this

Thank you

解决方案

One way would be to use ajax to fill in the container dynamically.

here is an example from an app i have - note that some of the javascript is in an external js file so can't directly use model; model values are stored in hidden fields and/or data-id, data-value attributes for this purpose

        @foreach (var assignment in Model.Assignments)
        {                
            <li role="presentation" id="[e-mail]" data-id="@assignment.AssignmentView.AssignmentViewId">
                <a role="menuitem" onclick="selectCriteria(this);" title="@assignment.AssignmentView.AssignmentViewDescription">Criteria @criteriaNumber</a>
            </li>
            criteriaNumber++;
        }

javascript

function selectCriteria(clickedElement) {
    var dataid = $(clickedElement).parent().attr("data-id");
    loadAssignmentDetails(dataid);
}

function loadAssignmentDetails(assignmentViewId) {
    $.ajax({
        type: "GET",
        url: Config.RootUrl + "Assignments/Detail/" + assignmentViewId + "/" + $("#AssignmentTypeValueId").val(),
        success: function (data) {
            $("#assignmentViewDetailsContainer").html(data);
        }
    });
}

这篇关于从视图列表中的每个项目的链接打开引导模式 - MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！