locked
MVC Accordion on ajax.ActionLink RRS feed

  • Question

  • User444756084 posted

    I am using Ajax.ActionLink to send a request to my action method and update the SelectedSTRMList div with a partial view. I am trying to use an accordion to view the updated div. However, the partial view is not displaying within the div when the link is clicked. I can view the partial view in a separate window. Any idea of what I am doing wrong?? Thanks

    View

    @model IEnumerable<NS.Models.FeeAuth>
    
    <h2>Requests</h2>
    
    
    <div class="table-responsive">
        <table class="table table-condensed" style="border-collapse:collapse;">
            <tr>
                <th>
                    @Html.LabelFor(m => m.First().ID)
                </th>
                <th>
    
                    @Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
                </th>
                <th>
                    @Html.Label("emplid", "Student Emplid")
                </th>
                <th>
                    @Html.LabelFor(m => m.First().fname)
                </th>
                <th>
                    @Html.LabelFor(m => m.First().lname)
                </th
                <th></th>
            </tr>
            @{int i = 0;}
            @foreach (var item in Model)
            {
    
                <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                    <td>
    
                        @Ajax.ActionLink(Html.Encode(item.ID), 
                                 "SelectedSTRMS", 
                                  new
                                  {
                                     id = item.ID,
                                     requestId = item.requestID
                                   },                                
                       new AjaxOptions
                          {
                           UpdateTargetId = "SelectedSTRMList", 
                           InsertionMode = InsertionMode.Replace, 
                           HttpMethod = "GET" 
                          })
    
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.requestID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.emplid)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.fname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.lname)
                    </td>                
    
                </tr>
                <tr>
                    <td colspan="6" class="hiddenRow">
                        <div class="accordian-body collapse" id="collapse1_@i">
                            <div id="SelectedSTRMList">   
                            </div>
                        </div>
                    </td>
    
                </tr>
                i++;
            }
    
        </table>
    

     

    _Layout View showing jquery

    <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.11.2.min.js")" type="text/javascript"></script>
        @*<script src="@Url.Content("//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>*@
        <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    Controller

     public PartialViewResult SelectedSTRMS(int id, int requestId)
        {
    
    
            FeeAuthWithCommentsViewModel feeauth = new FeeAuthWithCommentsViewModel();
            feeauth.FeeAuth = db.FeeAuths.Find(id);
    
    
            int feeauthID = id;
            List<string> GetSTRM = new List<string>();
    
            GetSTRM = db.vw_GetSTRMs.Where(v => v.FeeAuthID == feeauthID).Select(v => v.DESCR).ToList();
    
            if (GetSTRM.Count > 0)
            {
                ViewBag.SemesterInfo = GetSTRM.ToList();
            }
            else
            {
    
                ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
            }
    
            return PartialView("_SelectedSTRMS");
        }

    Partial View

    <table>
     <tr>
         <td>
             <ul>              
                     @foreach (var s in (List<string>)ViewBag.SemesterInfo)
                     {
                        <li style="padding-bottom:20px;">@s</li>
                     }
    
             </ul>
    
         </td>
     </tr>         
    </table>
    Monday, November 7, 2016 7:46 PM

Answers

  • User-1823088829 posted

    It looks you have missing the bootstrap js library. Additionally, your ajax is just updating the first div since you are not applying the index to it.

    Here a workable example:

    @model IEnumerable<WebApplication2.Models.ViewModel1>
    
    @{
        ViewBag.Title = "Home Page";
    }
    <div class="table-responsive">
        <table class="table table-condensed" style="border-collapse: collapse;">
            <tr>
                <th>
                    @Html.LabelFor(m => m.First().ID)
                </th>
                <th>
                    @Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
                </th>
                <th>
                    @Html.Label("emplid", "Student Emplid")
                </th>
                <th>
                    @Html.LabelFor(m => m.First().fname)
                </th>
                <th>
                    @Html.LabelFor(m => m.First().lname)
                </th>
                <th></th>
            </tr>
            @{ int i = 0;}
            @foreach (var item in Model)
            {
                <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                    <td>
                        @Ajax.ActionLink(Html.Encode(item.ID), 
                                         "SelectedSTRMS", 
                                         new { id = item.ID, requestId = item.requestID }, 
                                         new AjaxOptions { UpdateTargetId = "SelectedSTRMList<mark>_" + i</mark>, InsertionMode = InsertionMode.Replace })
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.requestID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.emplid)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.fname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.lname)
                    </td>
                </tr>
                <tr>
                    <td colspan="6" class="hiddenRow">
                        <div class="accordion-body collapse" id="collapse1_@i">
                            <div id="SelectedSTRMList<mark>_@i</mark>">Hola mundo!!!</div>
                        </div>
                    </td>
                </tr>
                i++;
            }
        </table>
    </div>
    
    @section scripts
    {
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 6:04 AM
  • User-271186128 posted

    Hi gordon1221,

    I tried the code you posted in my ApprovalIndex View and it still does not display the partial view. I uninstalled and reinstalled the jQuery.Ajax.Unobtrusive. Could the issue be within the controller action method?

    Based on the previous discussion, I create a sample using the following code, it works well on my side. You can refer to it:

    Code in View:

    @model IEnumerable<MVCSampleCode.Models.Movie>
    
    @{
        ViewBag.Title = "Index3";
    }
    
    <h2>Index3</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
        @{int i = 0;}
    @foreach (var item in Model) {
        <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                   
            <td>
                @Ajax.ActionLink(Html.Encode(item.ID),
                                 "SelectedSTRMS",
                                  new
                                  {
                                      id = item.ID
                                  },
                       new AjaxOptions
                       {
                           UpdateTargetId = "SelectedSTRMList_"+i,
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "GET"
                       })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
                @Html.ActionLink("Details", "Details", new { id=item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            </td>
        </tr>
    
        <tr>
            <td colspan="6" class="hiddenRow">
                <div class="accordian-body collapse" id="collapse1_@i">
                    <div id="SelectedSTRMList_@i">
                    </div>
                </div>
            </td>
    
        </tr>
        i++;
    }
    
    </table>
    @section scripts{
        @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")   
    }

    You could use F12 Network tab to check whether the JS reference load successful. If the JS file not load, when click the Ajax link, it will redirect to the partial view.

    Since the SelectedSTRMList div in the foreach statement, we could also use the different id property.

    Code in Controller:

           public ActionResult Index3()
            {
                List<Movie> itemlist = new List<Movie>()
                {
                    new Movie() { ID=1001, Title="AAA", Price=2},
                    new Movie() { ID=1002, Title="BBB", Price=3},
                    new Movie() { ID=1003, Title="CCC", Price=4}
                };
    
                return View(itemlist);
            }
    
            public PartialViewResult SelectedSTRMS(int id)
            {
                int feeauthID = id;
                List<string> GetSTRM = new List<string>() { id+"--"+ "AAA", id + "--" + "BBB", id + "--" + "CCC" };
                if (GetSTRM.Count > 0)
                {
                    ViewBag.SemesterInfo = GetSTRM.ToList();
                }
                else
                {
    
                    ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
                }
    
                return PartialView("_SelectedSTRMS");
            }

    You could set a break point in the Action method, and check whether it is hit.

    Code in partial view: using your code.

    The screenshot:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 11, 2016 9:53 AM

All replies

  • User1428471904 posted

    Looks like it an issue with static id SelectedSTRMList. As you are using loop and using static id, Means you will get duplicate divs with same id (SelectedSTRMList). So make it dynamic like SelectedSTRMList+@i. Let me know if it works

    SelectedSTRMList
    Tuesday, November 8, 2016 5:21 AM
  • User-1823088829 posted

    It looks you have missing the bootstrap js library. Additionally, your ajax is just updating the first div since you are not applying the index to it.

    Here a workable example:

    @model IEnumerable<WebApplication2.Models.ViewModel1>
    
    @{
        ViewBag.Title = "Home Page";
    }
    <div class="table-responsive">
        <table class="table table-condensed" style="border-collapse: collapse;">
            <tr>
                <th>
                    @Html.LabelFor(m => m.First().ID)
                </th>
                <th>
                    @Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
                </th>
                <th>
                    @Html.Label("emplid", "Student Emplid")
                </th>
                <th>
                    @Html.LabelFor(m => m.First().fname)
                </th>
                <th>
                    @Html.LabelFor(m => m.First().lname)
                </th>
                <th></th>
            </tr>
            @{ int i = 0;}
            @foreach (var item in Model)
            {
                <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                    <td>
                        @Ajax.ActionLink(Html.Encode(item.ID), 
                                         "SelectedSTRMS", 
                                         new { id = item.ID, requestId = item.requestID }, 
                                         new AjaxOptions { UpdateTargetId = "SelectedSTRMList<mark>_" + i</mark>, InsertionMode = InsertionMode.Replace })
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.requestID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.emplid)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.fname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.lname)
                    </td>
                </tr>
                <tr>
                    <td colspan="6" class="hiddenRow">
                        <div class="accordion-body collapse" id="collapse1_@i">
                            <div id="SelectedSTRMList<mark>_@i</mark>">Hola mundo!!!</div>
                        </div>
                    </td>
                </tr>
                i++;
            }
        </table>
    </div>
    
    @section scripts
    {
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 6:04 AM
  • User444756084 posted

    I updated the code and changed the div to:

    SelectedSTRMList_@i 

    It still does not work. I believe because the div is empty. The value &nbsp;is not being passed with the ajax. &nbsp;I do have bootstrap included in my scripts.

    Tuesday, November 8, 2016 5:11 PM
  • User-1823088829 posted

    Div should be updated/replaced no matter if this is empty o not.

    Other couple of points to check:

    • Check you also update the ajax call that point to your div: 
      new AjaxOptions { UpdateTargetId = "SelectedSTRMList<mark>_" + i</mark>, ...
    • Validate you are including the rights js files. I placed on my code the minimal set of files.
    Tuesday, November 8, 2016 5:18 PM
  • User444756084 posted

    My targetID IS: 

     @Ajax.ActionLink(Html.Encode(item.ID), // <-- Text to display
                                     "SelectedSTRMS", // <-- Action Method Name
                                      new { id = item.ID, requestId = item.requestID },                                
                           new AjaxOptions
                              {
                               UpdateTargetId = "SelectedSTRMList" + i, 
                               InsertionMode = InsertionMode.Replace, 
                               HttpMethod = "GET" 
                              })
    

    Also, all of the js files are included in my _Layout view within the Shared directory. Wouldn't that work? 

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery-ui-1.11.2.min.js")" type="text/javascript"></script>
            @*<script src="@Url.Content("//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>*@
            <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
            @*<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>*@
            <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
            @*<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>*@
            <script src="@Url.Content("~/Scripts/jquery.jeditable.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.fileupload.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.iframe-transport.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.inputmask/jquery.inputmask.js")" type="text/javascript"></script>
            <script src="@Url.Content("//cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.8/jquery.floatThead.min.js")" type="text/javascript"></script>
            <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery-Color-Fade-master/jquery.colorfade.min.js")"></script>

    Tuesday, November 8, 2016 5:22 PM
  • User-1823088829 posted

    Try using just the js files I'm proposing...

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    Tuesday, November 8, 2016 5:50 PM
  • User444756084 posted

    I added those scripts to my view and it didn't work. The collapsing will work if I add static text within the div but it will not work otherwise. It should be displaying my partial view that is pulling back data. 

    <div id="SelectedSTRMList_@i">
        Test this
    </div>

    Tuesday, November 8, 2016 6:37 PM
  • User-1823088829 posted

    Did you remove/commented all the js calls in your _Layout view?

    Basically, What I'm trying to check is if there are some conflicts with your js files. Like calling twice the unobtrusive library

            <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

     

    Tuesday, November 8, 2016 6:43 PM
  • User444756084 posted

    I commented out the js files in my layout view so they are only in the view that is calling the ajax. However, it still only works when text is in the div.

    Tuesday, November 8, 2016 6:52 PM
  • User-1823088829 posted

    I can imagine collapsing is working as expected. If div is empty, it is showing it anyway, just that it is showing nothing (you got me?)

    Let go step by step:

    • Is your issue about showing/hiding collapse divs?
    • or your issue is on loading partial view content with your ajax call?
      (or maybe both)
    Tuesday, November 8, 2016 6:58 PM
  • User444756084 posted

    Thank you for helping!!! I believe the issue is loading the partial view content with the ajax call. The showing/hiding div does work when it has something to display. 

    Tuesday, November 8, 2016 7:03 PM
  • User-1823088829 posted

    No worries, the idea is try to help as best as we can..

    If div is been showing/hiding when it has something to display, it is also working if it is empty; but the thing is that it does not have anything to show. We are okay on this point.

    Now, let focus on loading the new content coming from your partial view called by your ajax call.
    Could share one more time how you have your actual code, please?

    Tuesday, November 8, 2016 7:17 PM
  • User444756084 posted

    ApprovalIndex View

    @model IEnumerable<NS.Models.FeeAuth>
    
    <h2>Requests</h2>
    
    
    <div class="table-responsive">
        <table class="table table-condensed" style="border-collapse:collapse;">
            <tr>
                <th>
                    @Html.LabelFor(m => m.First().ID)
                </th>
                <th>
    
                    @Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
                </th>
                <th>
                    @Html.Label("emplid", "Student Emplid")
                </th>
                <th>
                    @Html.LabelFor(m => m.First().fname)
                </th>
                <th>
                    @Html.LabelFor(m => m.First().lname)
                </th
                <th></th>
            </tr>
            @{int i = 0;}
            @foreach (var item in Model)
            {
    
                <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                    <td>
    
                        @Ajax.ActionLink(Html.Encode(item.ID), 
                                 "SelectedSTRMS", 
                                  new
                                  {
                                     id = item.ID,
                                     requestId = item.requestID
                                   },                                
                       new AjaxOptions
                          {
                           UpdateTargetId = "SelectedSTRMList" + i, 
                           InsertionMode = InsertionMode.Replace, 
                           HttpMethod = "GET" 
                          })
    
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.requestID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.emplid)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.fname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.lname)
                    </td>                
    
                </tr>
                <tr>
                    <td colspan="6" class="hiddenRow">
                        <div class="accordian-body collapse" id="collapse1_@i">
                            <div id="SelectedSTRMList_@i">
                            </div>
                        </div>
                    </td>
    
                </tr>
                i++;
            }
    
        </table>


    @section scripts
    {
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    }



    Controller

    public PartialViewResult SelectedSTRMS(int id, int requestId)
        {
    
    
            FeeAuthWithCommentsViewModel feeauth = new FeeAuthWithCommentsViewModel();
            feeauth.FeeAuth = db.FeeAuths.Find(id);
    
    
            int feeauthID = id;
            List<string> GetSTRM = new List<string>();
    
            GetSTRM = db.vw_GetSTRMs.Where(v => v.FeeAuthID == feeauthID).Select(v => v.DESCR).ToList();
    
            if (GetSTRM.Count > 0)
            {
                ViewBag.SemesterInfo = GetSTRM.ToList();
            }
            else
            {
    
                ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
            }
    
            return PartialView("_SelectedSTRMS");
        }

    Partial View

    <table>
     <tr>
         <td>
             <ul>
                     @foreach (var s in (List<string>)ViewBag.SemesterInfo)
                     {
                        <li style="padding-bottom:20px;">@s</li>
                     }
    
             </ul>
    
         </td>
     </tr>
    </table>

     

    Tuesday, November 8, 2016 7:24 PM
  • User-1823088829 posted

    Do me a favor, please use the code at the end on this post on your ApprovalIndex View, exactly as shown.

    You have some typo error, like:

    • Not closing th
      <th>@Html.LabelFor(m => m.First().lname)</th
    • Your div class is wrong
      <div class="accordian-body
      it should be: <div class="accordion-body
    • your are not closing your main div
      </table></div>
    • Additionally, HttpMethod = "GET" has been removed from your ajax call

    Finally, could you verify /Scripts/jquery.unobtrusive-ajax.js is available on your project? If not, you can download it using nuget package: jQuery.Ajax.Unobtrusive

    @model IEnumerable<NS.Models.FeeAuth>
    
    <h2>Requests</h2>
    
    
    <div class="table-responsive">
        <table class="table table-condensed" style="border-collapse:collapse;">
            <tr>
                <th>
                    @Html.LabelFor(m => m.First().ID)
                </th>
                <th>
    
                    @Html.ActionLink("Request ID", "ApprovalIndex", new { sortOrder = ViewBag.RequestIDSortParam })
                </th>
                <th>
                    @Html.Label("emplid", "Student Emplid")
                </th>
                <th>
                    @Html.LabelFor(m => m.First().fname)
                </th>
                <th>
                    @Html.LabelFor(m => m.First().lname)
                </th>
                <th></th>
            </tr>
            @{ int i = 0;}
            @foreach (var item in Model)
            {
                <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                    <td>
                        @Ajax.ActionLink(Html.Encode(item.ID),
                                         "SelectedSTRMS",
                                         new { id = item.ID, requestId = item.requestID },
                                         new AjaxOptions { UpdateTargetId = "SelectedSTRMList_" + i, InsertionMode = InsertionMode.Replace })
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.requestID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.emplid)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.fname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelitem => item.lname)
                    </td>
                </tr>
                <tr>
                    <td colspan="6" class="hiddenRow">
                        <div class="accordion-body collapse" id="collapse1_@i">
                            <div id="SelectedSTRMList_@i"></div>
                        </div>
                    </td>
                </tr>
                i++;
            }
        </table>
    </div>
    
    @section scripts
    {
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    }

     

    Tuesday, November 8, 2016 10:22 PM
  • User444756084 posted

    I tried the code you posted in my ApprovalIndex View and it still does not display the partial view. I uninstalled and reinstalled the jQuery.Ajax.Unobtrusive. Could the issue be within the controller action method?

    Wednesday, November 9, 2016 1:36 AM
  • User1724605321 posted

    Hi gordon,

    Could the issue be within the controller action method?

    After you call the action method to load the partial view , you could use F12 develop tools to check whether the partial view is loaded on the page , if no , then nothing will find in div "SelectedSTRMList" .

    Best Regards,

    Nan Yu

    Friday, November 11, 2016 6:55 AM
  • User-271186128 posted

    Hi gordon1221,

    I tried the code you posted in my ApprovalIndex View and it still does not display the partial view. I uninstalled and reinstalled the jQuery.Ajax.Unobtrusive. Could the issue be within the controller action method?

    Based on the previous discussion, I create a sample using the following code, it works well on my side. You can refer to it:

    Code in View:

    @model IEnumerable<MVCSampleCode.Models.Movie>
    
    @{
        ViewBag.Title = "Index3";
    }
    
    <h2>Index3</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
        @{int i = 0;}
    @foreach (var item in Model) {
        <tr data-toggle="collapse" data-parent="#collapse1_@i" data-target="#collapse1_@i" class="accordion-toggle">
                   
            <td>
                @Ajax.ActionLink(Html.Encode(item.ID),
                                 "SelectedSTRMS",
                                  new
                                  {
                                      id = item.ID
                                  },
                       new AjaxOptions
                       {
                           UpdateTargetId = "SelectedSTRMList_"+i,
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "GET"
                       })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
                @Html.ActionLink("Details", "Details", new { id=item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            </td>
        </tr>
    
        <tr>
            <td colspan="6" class="hiddenRow">
                <div class="accordian-body collapse" id="collapse1_@i">
                    <div id="SelectedSTRMList_@i">
                    </div>
                </div>
            </td>
    
        </tr>
        i++;
    }
    
    </table>
    @section scripts{
        @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")   
    }

    You could use F12 Network tab to check whether the JS reference load successful. If the JS file not load, when click the Ajax link, it will redirect to the partial view.

    Since the SelectedSTRMList div in the foreach statement, we could also use the different id property.

    Code in Controller:

           public ActionResult Index3()
            {
                List<Movie> itemlist = new List<Movie>()
                {
                    new Movie() { ID=1001, Title="AAA", Price=2},
                    new Movie() { ID=1002, Title="BBB", Price=3},
                    new Movie() { ID=1003, Title="CCC", Price=4}
                };
    
                return View(itemlist);
            }
    
            public PartialViewResult SelectedSTRMS(int id)
            {
                int feeauthID = id;
                List<string> GetSTRM = new List<string>() { id+"--"+ "AAA", id + "--" + "BBB", id + "--" + "CCC" };
                if (GetSTRM.Count > 0)
                {
                    ViewBag.SemesterInfo = GetSTRM.ToList();
                }
                else
                {
    
                    ViewBag.SemesterInfo = new List<string> { "No STRM Selected" };
                }
    
                return PartialView("_SelectedSTRMS");
            }

    You could set a break point in the Action method, and check whether it is hit.

    Code in partial view: using your code.

    The screenshot:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 11, 2016 9:53 AM
  • User-1823088829 posted

    Sorry...

    No, I don't think it is on your controller. It should be with js. But to be honest, I don't know what else can I suggest. Sorry...

    Friday, November 11, 2016 7:06 PM
  • User444756084 posted

    Thanks for your help. The issue was that my div id did not match the UpTargetId. I was missing the "_"

    UpdateTargetId = "SelectedSTRMList_" + i,
    Monday, November 14, 2016 1:01 PM
  • User-1823088829 posted

    Did you noticed it was there since my first post...?

    Monday, November 14, 2016 4:42 PM
  • User444756084 posted

    No, I did not. ugggg!!!.. I will update your answer first post as the answer. 

    Tuesday, November 15, 2016 12:41 AM
  • User-1823088829 posted

    The important thing here is that you figured out... way to go, and good luck...

    Tuesday, November 15, 2016 1:06 AM