单击按钮,在主视图中的 foreach 语句中一次显示/隐藏部分视图结果

Posted

技术标签:

【中文标题】单击按钮,在主视图中的 foreach 语句中一次显示/隐藏部分视图结果【英文标题】:Show/Hide partial view result one display at a time in foreach statement in main view at the click of a button 【发布时间】:2021-12-16 02:23:32 【问题描述】:

我在主视图中有一个部分列表视图。局部视图在主视图的 foreach 语句中呈现。我想在单击按钮时一次显示一个显示部分视图结果,而不是一次在页面上显示列表详细信息,条件是在允许之前填充当前显示的部分视图中的字段下一个要显示的结果

在我的主要观点中:

<div class="">
   @foreach(var subline in Model.Lines)
   
      @html.Partial("_Lines", subline)
   
 </div>

在我的部分观点中:

@using (Html.BeginCollectionItem("Lines"))

  <div class="partial-class-result">
     <div class="question-code">
        @switch (Model.Question_Code)
        
            case "01":
                <h6>Question 1 of @ViewBag.NoOfQuestions</h6>
                break;
            case "02":
                <h6>Question 2 of @ViewBag.NoOfQuestions</h6>
                break;
            case "03":
                <h6>Question 3 of @ViewBag.NoOfQuestions</h6>
                break;
            case "04":
                <h6>Question 4 of @ViewBag.NoOfQuestions</h6>
                break;
            case "05":
                <h6>Question 5 of @ViewBag.NoOfQuestions</h6>
                break;
        
    </div>
    <div class="question">
        <h5 class="arm-text-color">@Html.DisplayFor(model => model.Question)</h5>
    </div>
    <div class="response">
        <h5 class="arm-text-color">@Html.EditorFor(model => model.Response)</h5>
    </div>
   
    <div class="survey-control">
        <button type="button" class="bg-info btn-group-lg btn-left">Previous</button>
        <button type="button" class="bg-info btn-group-lg btn-right">Next</button>
    </div>
   </div>
 

我的 javascript 代码:

//next button
$('.btn-right').on('each', function (e) 
    $(this).on('click', function () 
        if ($(this).parent().siblings('#Response').val() == '')
            return;
        $(this).parent().hide();
        $(this).parent().nextSibling().show();
    );
);
//previous button
$('.btn-left').on('each', function (e) 
    $(this).on('click', function () 
        $(this).parent().hide();
        $(this).parent().previousSibling().show();
    );
);    

CSS 代码:

.partial-class-result 
   display: none;

我的 javascript 代码似乎没有做任何事情。我想知道如何让它工作。

【问题讨论】:

【参考方案1】:

我已经能够让它工作了。

这是修改后的 Javascript 代码

$('body').on('click', '.btn-right', function (e) 
        var id = $(this).parent().parent().children().first().val();
        var resp = $('input[name="SurveyLines[' + id + '].Response"]:checked').val();
        if ($('input[name="SurveyLines[' + id + '].Response"]:checked').val() == undefined) 
            return;
        ;
        if ($(this).parent().parent().next().is('div.survey-line')) 
            $(this).parent().parent().next().show();
            $(this).parent().parent().hide();

         else 
            $('#submit-survey').parent().show();
        ;
    );

【讨论】:

以上是关于单击按钮,在主视图中的 foreach 语句中一次显示/隐藏部分视图结果的主要内容,如果未能解决你的问题,请参考以下文章

在反应jsx中一次遍历一个数组

在数据库中一次添加2行或3行无法在iPhone中添加记录

如何在Xcode的Interface Builder中一次编辑多个约束

选择器视图未出现在第一次尝试单击按钮时

在ACCESS 中,单击数据库窗口工具栏中的()按钮,即可在视图中打开相应的表。

[我想使用foreach循环php中的ajax来获取被点击行的UID,但获取所有UID